Merge pull request #52 from sustech-cs304/frontend

Frontend

Author: Jaredanwolfgang

peachide/src/app/UserEnvProvider.tsx

@@ -19,11 +19,13 @@ interface GroupsMap {
 interface UserContextType {
   token: string | null;
   userId: string | null;
+  fetchFailed: boolean;
   isAuthenticated: boolean;
   isTeacher: boolean;
   myGroups: GroupsMap;
   userData: UserData | null;
   setUserData: (userData: UserData) => void;
+  setFetchFailed: (fetchFailed: boolean) => void;
   setIsTeacher: (isTeacher: boolean) => void;
   setMyGroups: (groups: GroupsMap) => void;
   login: (token: string, userId: string, isTeacher: boolean) => void;
@@ -65,6 +67,7 @@ const defaultSidebarItems: SidebarItem[] = [...baseSidebarItems];
 const UserContext = createContext<UserContextType>({
   token: null,
   userId: null,
+  fetchFailed: false,
   isAuthenticated: false,
   isTeacher: false,
   myGroups: {} as GroupsMap,
@@ -73,6 +76,7 @@ const UserContext = createContext<UserContextType>({
   login: () => { },
   logout: () => { },
   setUserData: () => { },
+  setFetchFailed: () => { },
   sidebarItems: defaultSidebarItems,
   setSidebarItems: () => { },
   setMyGroups: () => { },
@@ -85,6 +89,7 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
   const [userId, setUserId] = useState<string | null>(null);
   const [isTeacher, setIsTeacher] = useState<boolean>(false);
   const [userData, setUserData] = useState<UserData | null>(null);
+  const [fetchFailed, setFetchFailed] = useState<boolean>(false);
   const [sidebarItems, setSidebarItems] = useState<SidebarItem[]>(defaultSidebarItems);
   const [myGroups, setMyGroups] = useState<GroupsMap>({} as GroupsMap);
 
@@ -107,7 +112,9 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
         });
 
         if (!response.ok) {
-          throw new Error('Failed to fetch user data');
+          setFetchFailed(true);
+          console.log("Failed to fetch user data", response);
+          return;
         }
 
         const data = await response.json();
@@ -132,6 +139,7 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
         }
         setMyGroups(groups as GroupsMap);
       } catch (error) {
+        setFetchFailed(true);
         console.error('Error fetching user data:', error);
         toast.error('Failed to load user information');
       }
@@ -185,6 +193,7 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
       localStorage.setItem('sidebarItems', JSON.stringify([...defaultSidebarItems, ...studentSidebarItems]));
       console.log("studentSidebarItems", [...defaultSidebarItems, ...studentSidebarItems]);
     }
+    setFetchFailed(false);
   };
 
   const logout = () => {
@@ -197,6 +206,7 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
     // Reset sidebar items to default when logging out
     setSidebarItems(defaultSidebarItems);
     localStorage.setItem('sidebarItems', JSON.stringify(defaultSidebarItems));
+    setFetchFailed(false);
   };
 
   const isAuthenticated = IS_MOCK_AUTH || !!token;
@@ -212,6 +222,8 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
         setIsTeacher,
         login,
         logout,
+        fetchFailed,
+        setFetchFailed,
         userData,
         setMyGroups,
         setUserData,

peachide/src/app/classes/Assignment.tsx

@@ -9,7 +9,9 @@ import {
   ChevronRight,
   AlertCircle,
   BookOpen,
-  CodeXml
+  CodeXml,
+  Users,
+  User
 } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -20,9 +22,13 @@ import { useUserContext } from '../UserEnvProvider';
 
 interface Assignment {
   assignment_id: string;
+  is_group_assign: boolean;
   name: string;
+  course_id: string;
+  teacher_id: string;
   deadline: string;
   isOver: boolean;
+  description?: string;
 }
 
 interface AssignmentData {
@@ -67,44 +73,7 @@ export default function Assignment({ courseId }: AssignmentProps) {
         console.error('Error fetching assignments:', err);
         // Mock data for development
         setData({
-          assignments: [
-            {
-              assignment_id: "asn_001",
-              name: "Getting Started with Algorithms",
-              deadline: "2023-06-15T23:59:59Z",
-              isOver: false
-            },
-            {
-              assignment_id: "asn_002",
-              name: "Data Structures Implementation",
-              deadline: "2023-06-20T23:59:59Z",
-              isOver: false
-            },
-            {
-              assignment_id: "asn_003",
-              name: "Algorithm Complexity Analysis",
-              deadline: "2023-06-10T23:59:59Z",
-              isOver: true
-            },
-            {
-              assignment_id: "asn_004",
-              name: "Advanced Problem Solving",
-              deadline: "2023-07-05T23:59:59Z",
-              isOver: false
-            },
-            {
-              assignment_id: "asn_005",
-              name: "Team Project Planning",
-              deadline: "2023-06-25T23:59:59Z",
-              isOver: false
-            },
-            {
-              assignment_id: "asn_006",
-              name: "Basic Programming Concepts",
-              deadline: "2023-05-30T23:59:59Z",
-              isOver: true
-            }
-          ]
+          assignments: []
         });
       } finally {
         setLoading(false);
@@ -116,7 +85,11 @@ export default function Assignment({ courseId }: AssignmentProps) {
     }
   }, [courseId]);
 
+  const [envLoading, setEnvLoading] = useState(false);
+
   const handleStartAssignment = async (assignmentId: string) => {
+    setError(null);
+    setEnvLoading(true);
     var result: any;
     try {
       const formData = new FormData();
@@ -135,11 +108,13 @@ export default function Assignment({ courseId }: AssignmentProps) {
       result = await response.json();
       if (result.message == "Require group" && !(courseId in myGroups)) {
         setError('You need to join a group to start this assignment.');
+        setEnvLoading(false);
         return;
       }
     } catch (error) {
       console.error('Error starting assignment environment:', error);
       setError('Failed to start assignment environment. Please try again later.');
+      setEnvLoading(false);
       return;
     }
     const environmentId = result.environment_id;
@@ -152,8 +127,38 @@ export default function Assignment({ courseId }: AssignmentProps) {
         icon: "CodeXml"
       }
     ]);
+    setEnvLoading(false);
   };
 
+  // Loading popout overlay
+  if (envLoading) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+        <Card className="p-8 flex flex-col items-center gap-4 shadow-2xl">
+          <div className="animate-spin mb-2">
+            <svg className="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold">Preparing your coding environment...</h3>
+          <p className="text-muted-foreground text-center text-sm">This may take a few moments. Please wait.</p>
+        </Card>
+      </div>
+    );
+  }
+
   // Sort assignments: active ones by deadline (earliest first), then completed ones
   const sortedAssignments = data?.assignments
     ? [...data.assignments].sort((a, b) => {
@@ -411,21 +416,42 @@ export default function Assignment({ courseId }: AssignmentProps) {
                     {!isActive && (
                       <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-muted-foreground/30 to-muted-foreground/10"></div>
                     )}
-                    <CardHeader className="pb-2">
-                      <CardTitle className={`text-xl font-semibold flex items-center ${!isActive ? 'text-muted-foreground' : ''}`}>
-                        <BookOpen className="h-5 w-5 mr-2 text-primary" />
-                        {assignment.name}
-                        {assignment.isOver && (
-                          <Badge variant="outline" className="ml-2 text-xs">
-                            Completed
-                          </Badge>
-                        )}
-                        {isMissed && (
-                          <Badge variant="destructive" className="ml-2 text-xs">
-                            Missed
-                          </Badge>
-                        )}
-                      </CardTitle>
+                    <CardHeader className="pb-3">
+                      <div className="flex items-start justify-between">
+                        <CardTitle className={`text-xl font-semibold flex items-center ${!isActive ? 'text-muted-foreground' : ''}`}>
+                          <BookOpen className="h-5 w-5 mr-2 text-primary" />
+                          {assignment.name}
+                        </CardTitle>
+                        <div className="flex gap-2 ml-4">
+                          {assignment.is_group_assign && (
+                            <Badge variant="secondary" className="flex items-center gap-1 text-xs">
+                              <Users size={10} />
+                              Group
+                            </Badge>
+                          )}
+                          {!assignment.is_group_assign && (
+                            <Badge variant="outline" className="flex items-center gap-1 text-xs">
+                              <User size={10} />
+                              Individual
+                            </Badge>
+                          )}
+                          {assignment.isOver && (
+                            <Badge variant="outline" className="text-xs">
+                              Completed
+                            </Badge>
+                          )}
+                          {isMissed && (
+                            <Badge variant="destructive" className="text-xs">
+                              Missed
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                      {assignment.description && (
+                        <p className={`text-sm mt-2 ${!isActive ? 'text-muted-foreground' : 'text-muted-foreground'}`}>
+                          {assignment.description}
+                        </p>
+                      )}
                     </CardHeader>
                     <CardContent className="pb-4">
                       {renderDeadlineInfo(assignment.deadline, assignment.isOver)}

peachide/src/app/layout.tsx

@@ -26,8 +26,8 @@ export default function RootLayout({
             <body>
                 <ThemeProvider
                     attribute="class"
-                    defaultTheme="system"
-                    enableSystem
+                    defaultTheme="light"
+                    enableSystem={false}
                     disableTransitionOnChange
                 >
                     <UserProvider>