Merge pull request #263 from makeopensource/#87-Attendance-page

#87 attendance page

Author: RA341

.DS_Store

@@ -8,104 +8,95 @@ import FaIcon from 'components/shared/icons/faIcon'
 
 type Props = {
     problem: AssignmentProblem
-    handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
     disabled?: boolean
 }
 
-const AssignmentProblemListItem = ({ problem, handleChange, disabled }: Props) => {
-    const [meta, setMeta] = useState<{ options: { [key: string]: string }, type: string }>()
+const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) => {
+    const [meta, setMeta] = useState<{options: {[key:string]: string}, type: string}>()
 
 
     const getMeta = () => {
         setMeta(problem.metadata)
     }
-
+    
     useEffect(() => {
         getMeta()
     }, [problem])
+    
 
-
-    if (!meta) {
+    if (!meta){
         return (
-            <div className={styles.problem}>
-                <div>File Input Problems are not done yet pending backend changes! :D</div>
-            </div>)
+        <div className={styles.problem}>
+            <div>File Input Problems are not done yet pending backend changes! :D</div>
+        </div>)
     }
 
-    const type = meta.type
+    const type = meta.type 
 
     if (type == "Text") {
         return (
-            <div key={problem.id} className={styles.problem}>
-                <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                <input className={styles.textField}
-                    type='text'
-                    placeholder='Answer'
-                    onChange={handleChange ?? undefined}
-                    disabled={disabled ?? false}
-
-                    id={problem.problemName}
+        <div key={problem.id} className={styles.problem}>
+            <h4 className={styles.problem_header}>{problem.problemName}</h4>
+            <input className={styles.textField}
+                type='text'
+                placeholder='Answer'
+                onChange={handleChange ?? undefined}
+                disabled={disabled ?? false}
+                
+                id={problem.problemName}
                 />
-            </div>
-        )
-    }
-
-    else if (type == "MCQ-mult") {
+        </div>
+    )} 
+    
+    else if(type == "MCQ-mult") {
         const options = meta.options
-        if (!options) {
+        if (!options){
             return <div></div>
         }
         return (
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                {Object.keys(options).map((key: string) => (
-                    <label key={key} className={styles.mcqLabel} style={disabled ? { cursor: 'default' } : undefined}>
-                        <input id={problem.problemName}
-                            type='checkbox'
-                            value={key}
-                            onChange={handleChange}
-                            disabled={disabled ?? false} /> {options[key]}
-
+                {Object.keys(options).map((key : string) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} 
+                        type='checkbox' 
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
+                        
                         <span className={styles.checkbox}>
-                            <FaIcon icon='check' className={styles.checkboxCheck} />
+                             <FaIcon icon='check' className={styles.checkboxCheck}/>
                         </span>{/* custom checkbox */}
                     </label>))}
             </div>)
-    }
-
-    else if (type == "MCQ-single") {
+    } 
+    
+    else if(type == "MCQ-single") {
         const options = meta.options
-        if (!options) {
+        if (!options){
             return <div></div>
         }
         return (
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                {Object.keys(options).map((key: string) => (
-                    <label key={key} className={styles.mcqLabel} style={disabled ? { cursor: 'default' } : undefined}>
-                        <input id={problem.problemName}
-                            type='radio'
-                            name={`${problem.id}_answer`}
-                            value={key}
-                            onChange={handleChange}
-                            disabled={disabled ?? false} /> {options[key]}
+                {Object.keys(options).map((key : string) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} 
+                        type='radio' 
+                        name={`${problem.id}_answer`}
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
                         <span className={styles.radio}></span>{/* custom radio button */}
                     </label>))}
             </div>)
-    }
-
-    else if (type == "File") {
-        return (
-            <div key={problem.id} className={styles.problem}>
-                <h4 className={styles.problem_header}>{problem.problemName}</h4>
-            </div>
-        )
-    }
-
+    } 
+    
     else {
-        return (
+        return(
             <div>Unknown type, something is wrong on the backend!</div>)
-    }
+        }
 }
 
 

devU-client/src/components/listItems/assignmentProblemListItem.tsx

@@ -124,4 +124,5 @@ const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose, onSubmit, c
   );
 };
 
+
 export default InstructorAttendanceModal;

devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx

@@ -20,44 +20,110 @@ interface AttendanceRecord {
   code: string;
   duration: string;
   description?: string;
+  id: string; // Required ID for records
+  isLocal?: boolean; // Flag to identify locally created records
 }
 
 const InstructorAttendancePage: React.FC<Props> = () => {
   const { courseId } = useParams<{ courseId: string }>();
   const [modalOpen, setModalOpen] = useState(false);
   const [courseInfo, setCourseInfo] = useState<CourseInfo | null>(null);
   const [attendanceRecords, setAttendanceRecords] = useState<AttendanceRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
+  // Load course info
   useEffect(() => {
     if (!courseId) return;
 
+    setIsLoading(true);
     RequestService.get(`/api/courses/${courseId}`)
       .then(data => {
-        setCourseInfo({
+        const course = {
           id: data.id,
           number: data.number,
           name: data.name,
           semester: data.semester
-        });
+        };
+        setCourseInfo(course);
       })
-      .catch(err => console.error('Error fetching course info:', err));
+      .catch(err => {
+        console.error('Error fetching course info:', err);
+        setIsLoading(false);
+      });
   }, [courseId]);
 
+  // Load attendance records - combine API records and localStorage records
   useEffect(() => {
     if (!courseInfo?.id) return;
 
+    // First, get records from API
     RequestService.get(`/api/courses/${courseInfo.id}/attendance`)
-      .then(data => setAttendanceRecords(data))
-      .catch(err => console.error('Failed to load attendance:', err));
+      .then(apiRecords => {
+        // Make sure API records have IDs
+        const formattedApiRecords = apiRecords.map((record: any, index: number) => ({
+          ...record,
+          id: record.id || `api-${index}-${Date.now()}`
+        }));
+
+        // Then, get local records from localStorage
+        const localStorageKey = `attendance_${courseInfo.id}`;
+        const localRecordsString = localStorage.getItem(localStorageKey);
+        let localRecords: AttendanceRecord[] = [];
+        
+        if (localRecordsString) {
+          try {
+            localRecords = JSON.parse(localRecordsString);
+          } catch (e) {
+            console.error('Error parsing local attendance records:', e);
+            localStorage.removeItem(localStorageKey); // Clear invalid data
+          }
+        }
+
+        // Combine and set records
+        const allRecords = [...localRecords, ...formattedApiRecords];
+        setAttendanceRecords(allRecords);
+        setIsLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to load attendance from API:', err);
+        
+        // Still try to load local records on API failure
+        const localStorageKey = `attendance_${courseInfo.id}`;
+        const localRecordsString = localStorage.getItem(localStorageKey);
+        if (localRecordsString) {
+          try {
+            const localRecords = JSON.parse(localRecordsString);
+            setAttendanceRecords(localRecords);
+          } catch (e) {
+            console.error('Error parsing local attendance records:', e);
+          }
+        }
+        setIsLoading(false);
+      });
   }, [courseInfo]);
 
+  // Save local records to localStorage whenever they change
+  useEffect(() => {
+    if (!courseInfo?.id || attendanceRecords.length === 0) return;
+
+    // Filter out only local records
+    const localRecords = attendanceRecords.filter(record => record.isLocal === true);
+    if (localRecords.length === 0) return;
+
+    // Save to localStorage
+    const localStorageKey = `attendance_${courseInfo.id}`;
+    localStorage.setItem(localStorageKey, JSON.stringify(localRecords));
+  }, [attendanceRecords, courseInfo]);
+
   const saveToCsv = () => {
+    if (!attendanceRecords.length || !courseInfo) return;
+    
     const toCSV = [];
     let header = 'Course,Date,Code,Duration (min),Description';
     toCSV.push(header + '\n');
 
     attendanceRecords.forEach(record => {
-      const row = `${record.courseInfo.number}: ${record.courseInfo.name},${record.date},${record.code},${record.duration},${record.description || ''}`;
+      const row = `"${record.courseInfo.number}: ${record.courseInfo.name}","${record.date}","${record.code}","${record.duration}","${record.description || ''}"`;
       toCSV.push(row + '\n');
     });
 
@@ -69,14 +135,49 @@ const InstructorAttendancePage: React.FC<Props> = () => {
     const encodedUri = encodeURI(final);
     const link = document.createElement('a');
     link.setAttribute('href', encodedUri);
-    link.setAttribute('download', `${courseInfo?.number.replace(" ", '').toLowerCase()}_attendance.csv`);
+    link.setAttribute('download', `${courseInfo.number.replace(/\s+/g, '').toLowerCase()}_attendance.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   };
 
-  if (!courseInfo) {
-    return <PageWrapper><p className='info'>Loading course info...</p></PageWrapper>;
+  const handleAttendanceSubmit = (newSession: any) => {
+    if (!courseInfo) return;
+    
+    // Create a new record directly without a POST request
+    const newRecord: AttendanceRecord = {
+      id: `local-${Date.now()}`, // Generate a unique local ID
+      courseInfo: courseInfo,
+      date: newSession.date,
+      code: newSession.code,
+      duration: newSession.duration,
+      description: newSession.description,
+      isLocal: true // Mark as locally created
+    };
+    
+    // Add the new record to the beginning of the array
+    setAttendanceRecords(prev => [newRecord, ...prev]);
+    setModalOpen(false);
+    
+    // Save this record to localStorage immediately
+    const localStorageKey = `attendance_${courseInfo.id}`;
+    const existingRecordsString = localStorage.getItem(localStorageKey);
+    let existingRecords: AttendanceRecord[] = [];
+    
+    if (existingRecordsString) {
+      try {
+        existingRecords = JSON.parse(existingRecordsString);
+      } catch (e) {
+        console.error('Error parsing local attendance records:', e);
+      }
+    }
+    
+    localStorage.setItem(localStorageKey, JSON.stringify([newRecord, ...existingRecords]));
+    console.log('Attendance record created and saved locally:', newRecord);
+  };
+
+  if (isLoading || !courseInfo) {
+    return <PageWrapper><p style={{ padding: '2rem' }}>Loading course info...</p></PageWrapper>;
   }
 
   return (
@@ -98,33 +199,7 @@ const InstructorAttendancePage: React.FC<Props> = () => {
         <InstructorAttendanceModal
           open={modalOpen}
           onClose={() => setModalOpen(false)}
-          onSubmit={(newSession) => {
-            const payload = {
-              courseId: courseInfo.id,
-              date: newSession.date,
-              code: newSession.code,
-              duration: newSession.duration,
-              description: newSession.description
-            };
-          
-            console.log('Creating attendance with payload:', payload);
-
-            RequestService.post(`/api/attendance`, payload)
-    .then((savedSession) => {
-      setAttendanceRecords(prev => [
-        {
-          ...savedSession,
-          courseInfo
-        },
-        ...prev
-      ]);
-      setModalOpen(false);
-    })
-    .catch(err => {
-      console.error('Failed to save attendance:', err.response?.data || err.message || err);
-      alert('Could not create attendance. Please try again.');
-    });
-}}
+          onSubmit={handleAttendanceSubmit}
           courseInfo={courseInfo}
         />
 
@@ -143,8 +218,8 @@ const InstructorAttendancePage: React.FC<Props> = () => {
                 </tr>
               </thead>
               <tbody>
-                {attendanceRecords.map((entry, index) => (
-                  <tr key={`${entry.code}-${index}`}>
+                {attendanceRecords.map((entry) => (
+                  <tr key={entry.id}>
                     <td>{entry.courseInfo.number}: {entry.courseInfo.name}</td>
                     <td>{entry.date}</td>
                     <td>{entry.code}</td>
@@ -161,5 +236,4 @@ const InstructorAttendancePage: React.FC<Props> = () => {
   );
 };
 
-
-export default InstructorAttendancePage;
+export default InstructorAttendancePage;