Update daily potd UI when no POTD

Author: codevoid048

client-test/src/components/Challenges/index.tsx

@@ -94,6 +94,7 @@ const Challenges: React.FC = () => {
       setIsDailyLoading(true);
       const params = user ? { userId: user._id } : {};
       const res = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/daily`, { params });
+      
       if (res.data) {
         const challenge = res.data;
         const formattedChallenge: Challenge = {
@@ -115,9 +116,16 @@ const Challenges: React.FC = () => {
 
         setDailyProblem(formattedChallenge);
         setIsSolved(challenge.isSolved || false);
+      } else {
+        // No daily challenge data
+        setDailyProblem(null);
+        setIsSolved(false);
       }
     } catch (error) {
       console.error("Failed to fetch daily challenge:", error);
+      // Backend returns 404 when no challenge is posted for today
+      setDailyProblem(null);
+      setIsSolved(false);
     } finally {
       setIsDailyLoading(false);
     }
@@ -219,6 +227,16 @@ const Challenges: React.FC = () => {
     }
   }, [user, activeTab]);
 
+  // Show toast when user is not logged in
+  useEffect(() => {
+    if (!user) {
+      toast.error("Sign in to view status and solutions", {
+        duration: 2000,
+        position: 'bottom-right',
+      });
+    }
+  }, [user]);
+
   // Reset to page 1 when filters change
   useEffect(() => {
     if (filterOptions.categories.length > 0) {
@@ -386,9 +404,9 @@ const Challenges: React.FC = () => {
                   <h3 className="text-xl sm:text-2xl font-bold text-gray-200 dark:text-gray-800 line-clamp-1">
                     {dailyProblem.title}
                   </h3>
-                  <p className="text-gray-400 dark:text-gray-600 text-sm line-clamp-2">
+                  {/* <p className="text-gray-400 dark:text-gray-600 text-sm line-clamp-2">
                     {dailyProblem.description}
-                  </p>
+                  </p> */}
                   <div className="flex flex-wrap gap-2">
                     {dailyProblem.categories.map((cat: any) => (
                       <Badge
@@ -439,7 +457,21 @@ const Challenges: React.FC = () => {
                 </span>
               </div>
             </div>
-          ) : null}
+          ) : (
+            <div className="mt-6 bg-gray-800 dark:bg-muted rounded-xl p-4 sm:p-6 flex flex-col items-center justify-center text-center space-y-4 h-40">
+              <div className="bg-amber-500/20 dark:bg-amber-500/30 p-3 rounded-full">
+                <Clock className="h-8 w-8 text-amber-500" />
+              </div>
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-gray-200 dark:text-gray-800">
+                  No Problem Posted Today
+                </h3>
+                <p className="text-gray-400 dark:text-gray-600 text-sm">
+                  Please wait until a new daily challenge is posted. Check back soon!
+                </p>
+              </div>
+            </div>
+          )}
         </CardContent>
       </Card>
 
@@ -625,7 +657,7 @@ const Challenges: React.FC = () => {
                                 <Calendar className="h-3 w-3 mr-1" /> {problem.date}
                               </div>
                               <h3 className="text-lg font-bold text-foreground">{problem.title}</h3>
-                              <p className="text-muted-foreground text-sm line-clamp-2">{problem.description}</p>
+                              {/* <p className="text-muted-foreground text-sm line-clamp-2">{problem.description}</p> */}
                               <div className="flex flex-wrap gap-1.5">
                                 {problem.categories.map((cat: any) => (
                                   <Badge

client-test/src/lib/solutionStatus.tsx

@@ -44,12 +44,12 @@ const SolutionStatus: React.FC<ProblemStatusProps> = ({ problem }) => {
   const isSolved = problem.status === "Solved" ? "Solved" : "Not Solved";
 
   return (
-    <div className="flex w-full gap-2 self-start sm:self-center">
+    <div className="flex flex-col w-full gap-2 self-start sm:self-center">
       {isSolved === "Solved" ? (
-        <div className="flex w-full gap-2">
+        <div className="flex flex-col w-full gap-2">
           <Button
             size="sm"
-            className="flex-1 text-xs py-1 px-2 bg-green-600 hover:bg-green-700 text-white border-0 transition-colors duration-200"
+            className="w-full text-xs py-1 px-2 bg-green-600 hover:bg-green-700 text-white border-0 transition-colors duration-200"
             onClick={(e) => {
               e.stopPropagation();
               window.open(problem.problemUrl, "_blank");
@@ -61,19 +61,19 @@ const SolutionStatus: React.FC<ProblemStatusProps> = ({ problem }) => {
             <Button
               size="sm"
               variant="outline"
-              className="flex-1 text-xs py-1 px-2 border-blue-500 hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200 text-foreground"
+              className="w-full text-xs py-1 px-2 border-blue-500 hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200 text-foreground"
               onClick={handleViewSolution}
             >
               <Eye className="h-3 w-3 mr-1" /> View Solution
             </Button>
           )}
         </div>
       ) : (
-        <div className="flex w-full gap-2">
+        <div className="flex flex-col w-full gap-2">
           <Button
             size="sm"
             variant="outline"
-            className="flex-1 text-xs py-1 px-2 border-primary hover:bg-primary/10 hover:text-primary transition-colors duration-200 text-foreground"
+            className="w-full text-xs py-1 px-2 border-primary hover:bg-primary/10 hover:text-primary transition-colors duration-200 text-foreground"
             onClick={(e) => {
               e.stopPropagation();
               window.open(problem.problemUrl, "_blank");
@@ -85,7 +85,7 @@ const SolutionStatus: React.FC<ProblemStatusProps> = ({ problem }) => {
             <Button
               size="sm"
               variant="outline"
-              className="flex-1 text-xs py-1 px-2 border-blue-500 hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200 text-foreground"
+              className="w-full text-xs py-1 px-2 border-blue-500 hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200 text-foreground"
               onClick={handleViewSolution}
             >
               <Eye className="h-3 w-3 mr-1" /> View Solution

server/controllers/challengeController.js

@@ -121,12 +121,9 @@ export const getDailyChallenge = async (req, res) => {
             }
         }).sort({ createdAt: -1 });
 
+        // If no challenge found for today, return 404 instead of fallback to most recent
         if (!dailyChallenge) {
-            dailyChallenge = await Challenge.findOne().sort({ createdAt: -1 });
-        }
-
-        if (!dailyChallenge) {
-            return res.status(404).json({ message: 'No daily challenge found' });
+            return res.status(404).json({ message: 'No challenge posted for today' });
         }
 
         let targetUser = null;

server/server.js

@@ -8,7 +8,7 @@ dotenv.config();
 
 connectDB();
 
-// const PORT = process.env.PORT || 5000
-// app.listen(PORT, () => { console.log(`Server is running at ${PORT}`); })
+const PORT = process.env.PORT || 5000
+app.listen(PORT, () => { console.log(`Server is running at ${PORT}`); })
 
-export const handler = serverless(app);
+// export const handler = serverless(app);