fix: add use client, error boundary, extract ToastContainer, pure setState, fix deploy gate

Author: mohi-devhub

.github/workflows/deploy.yml

@@ -21,8 +21,7 @@ jobs:
           check-name: 'Backend Tests'
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           wait-interval: 10
-          allowed-conclusions: success,failure
-        continue-on-error: true
+          allowed-conclusions: success
 
       - name: Wait for frontend tests
         uses: lewagon/wait-on-check-action@v1.3.1

frontend/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -9,7 +9,7 @@ import XPProgressBar from "@/components/XPProgressBar";
 import TopicCard from "@/components/TopicCard";
 import RecommendedCard from "@/components/RecommendedCard";
 import LoadingScreen from "@/components/LoadingScreen";
-import { useToast } from "@/components/Toast";
+import { useToast, ToastContainer } from "@/components/Toast";
 import { useRealtimeXP } from "@/lib/useRealtimeXP";
 import { useAuth } from "@/lib/useAuth";
 import { useLoadingState } from "@/hooks/useLoadingState";
@@ -61,6 +61,7 @@ export default function Dashboard() {
   const { userId, user, loading: authLoading } = useAuth();
   const router = useRouter();
   const [progress, setProgress] = useState<UserProgress | null>(null);
+  const prevLevelRef = useRef<number>(-1);
   const [recommendations, setRecommendations] =
     useState<RecommendationResponse | null>(null);
   const { isLoading, withLoading } = useLoadingState(true);
@@ -90,7 +91,7 @@ export default function Dashboard() {
   });
 
   // Real-time updates
-  const { showToast, ToastContainer } = useToast();
+  const { showToast, toasts, dismissToast } = useToast();
 
   // Stable callbacks for real-time events
   const handleXPGain = useCallback(
@@ -103,17 +104,11 @@ export default function Dashboard() {
       });
       showToast(`${topic || "Study"} completed!`, xp, "xp");
 
-      // Update progress with new XP
+      // Update progress with new XP — no side effects inside the updater
       setProgress((prev) => {
         if (!prev) return prev;
         const newTotalXP = prev.total_xp + xp;
         const newLevel = Math.floor(newTotalXP / 500) + 1;
-
-        // Check for level up
-        if (newLevel > prev.level) {
-          handleLevelUp(newLevel);
-        }
-
         return {
           ...prev,
           total_xp: newTotalXP,
@@ -190,6 +185,20 @@ export default function Dashboard() {
     [],
   );
 
+  // Detect level-up after state update — side effect kept outside the setState updater
+  useEffect(() => {
+    if (!progress) return;
+    if (prevLevelRef.current === -1) {
+      // First load: record baseline level without triggering level-up
+      prevLevelRef.current = progress.level;
+      return;
+    }
+    if (progress.level > prevLevelRef.current) {
+      handleLevelUp(progress.level);
+    }
+    prevLevelRef.current = progress.level;
+  }, [progress?.level]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Subscribe to real-time XP updates
   const { isConnected } = useRealtimeXP({
     userId: userId || "",
@@ -571,7 +580,7 @@ export default function Dashboard() {
       </div>
 
       {/* Toast Notifications */}
-      <ToastContainer />
+      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
 
       {/* Celebration Modal */}
       <CelebrationModal

frontend/app/error.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen bg-terminal-black text-terminal-white flex items-center justify-center p-8 font-mono">
+      <div className="border border-terminal-white p-8 max-w-md w-full">
+        <div className="text-terminal-gray text-xs mb-2">// RUNTIME_ERROR</div>
+        <h2 className="text-2xl font-bold mb-4">[!] SOMETHING_WENT_WRONG</h2>
+        <p className="text-terminal-gray text-sm mb-6 break-all">
+          {error.message || "An unexpected error occurred."}
+        </p>
+        {error.digest && (
+          <p className="text-terminal-gray text-xs mb-6">
+            digest: {error.digest}
+          </p>
+        )}
+        <button
+          onClick={reset}
+          className="w-full bg-terminal-black text-terminal-white border border-terminal-white px-6 py-3 hover:bg-terminal-white hover:text-terminal-black transition-colors"
+        >
+          RETRY()
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/components/Header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { BlinkingCursor } from "./TypingText";

frontend/components/RecommendedCard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";

frontend/components/Toast.tsx

@@ -53,6 +53,31 @@ function XPToast({ toast, onDismiss }: XPToastProps) {
   );
 }
 
+interface ToastContainerProps {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  return (
+    <AnimatePresence mode="popLayout">
+      {toasts.map((toast, index) => (
+        <motion.div
+          key={toast.id}
+          style={{
+            position: "fixed",
+            top: `${32 + index * 80}px`,
+            left: "50%",
+            zIndex: 50,
+          }}
+        >
+          <XPToast toast={toast} onDismiss={onDismiss} />
+        </motion.div>
+      ))}
+    </AnimatePresence>
+  );
+}
+
 let toastCounter = 0;
 
 export function useToast() {
@@ -71,23 +96,5 @@ export function useToast() {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
-  const ToastContainer = () => (
-    <AnimatePresence mode="popLayout">
-      {toasts.map((toast, index) => (
-        <motion.div
-          key={toast.id}
-          style={{
-            position: "fixed",
-            top: `${32 + index * 80}px`,
-            left: "50%",
-            zIndex: 50,
-          }}
-        >
-          <XPToast toast={toast} onDismiss={dismissToast} />
-        </motion.div>
-      ))}
-    </AnimatePresence>
-  );
-
-  return { showToast, ToastContainer };
+  return { showToast, toasts, dismissToast };
 }