Merge pull request #73 from usingbrain/main

merge to bubbles

Author: OGALEXI

client/package-lock.json

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
+import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
+
+import { useSessionAttendanceQuery } from '../../generated/graphql';
+import User from '../../Types/user';
+import { useParams } from 'react-router';
+
+interface Props {
+  studentList: (User | null | undefined)[];
+}
+
+const CheckboxListHistory: React.FC<Props> = ({ studentList }) => {
+  const sessionId = Number(useParams().sessionId);
+  const [{ fetching, data, error }] = useSessionAttendanceQuery({
+    variables: { sessionId },
+  });
+
+  if (fetching) {
+  } // TODO handle fetching
+  if (error) {
+  } // TODO handle error
+
+  const studentsAttended = data?.getSessionAttendance?.data;
+
+  return (
+    <div>
+      {!!studentsAttended &&
+        studentList?.map((student) => {
+          if (
+            studentsAttended.some(
+              (attendee) => attendee?.email === student?.email
+            )
+          ) {
+            return <CheckBoxChecked className="w-10 h-10" />;
+          }
+          return <CheckBoxCrossed className="w-10 h-10" />;
+        })}
+    </div>
+  );
+};
+
+export default CheckboxListHistory;

client/src/Assets/PerfectLogo2.svg

@@ -4,9 +4,11 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 //package for date format
 import moment from 'moment';
 
-const overviewStyle = "flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8";
-const headerStyle = "flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl";
-const historyStyle = "flex flex-row flex-wrap justify-start w-full";
+const overviewStyle =
+  'flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8';
+const headerStyle =
+  'flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl';
+const historyStyle = 'flex flex-row flex-wrap justify-start w-full';
 
 const Overview: React.FC = () => {
   const courseId = Number(useParams().courseId);
@@ -20,30 +22,30 @@ const Overview: React.FC = () => {
   } // TODO handle error
 
   const history = data?.getCourseOverview?.data;
-  const total = history?.studentTotal;
   const sessions = history?.sessions;
 
   console.log('history: ', history);
   return (
     <div>
       <div className={overviewStyle}>
-        <header>
-          <h3 className={headerStyle}>Students assigned to this course: {total}</h3>
-        </header>
-        <article className="flex flex-col justify-center">
-          <p className="m-auto text-xl">Attendance</p>
+        <article className='flex flex-col justify-center'>
+          <p className='m-auto text-xl'>Attendance</p>
           <section className={historyStyle}>
             {!!sessions &&
               sessions.map((session) => {
                 if (session) {
                   const date = new Date(Number(session.createdAt));
                   const UTCdate = date.toUTCString();
                   return (
-                    <div className="w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight">
+                    <div className='w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight'>
                       <Link to={`/homepage/classes/${courseId}/${session.id}`}>
                         <div>
-                          <h5 className="text-lg sm:text-xl">{session.attendance}</h5>
-                          <p className="text-sm sm:text-md">{moment(UTCdate).format('L')}</p>
+                          <h5 className='text-lg sm:text-xl'>
+                            {session.attendance}
+                          </h5>
+                          <p className='text-sm sm:text-md'>
+                            {moment(UTCdate).format('L')}
+                          </p>
                         </div>
                       </Link>
                     </div>

client/src/Assets/chekcbox-cross.svg

@@ -1,24 +1,14 @@
 import React from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import { useSessionAttendanceQuery } from '../../generated/graphql';
+import StudentsList from '../ClassView/StudentsList';
+
+// const listStyle = 'flex flex-col justify-start items-start';
 
 const btnStyle = "bg-green text-white p-4 shadow-md";
 
 const SessionHistory: React.FC = () => {
   const courseId = Number(useParams().courseId);
-  const sessionId = Number(useParams().sessionId);
-
-  const [{ fetching, data, error }] = useSessionAttendanceQuery({
-    variables: { sessionId },
-  });
-
-  if (fetching) {
-  } // TODO handle fetching
-  if (error) {
-  } // TODO handle error
-
-  const studentsAttended = data?.getSessionAttendance?.data;
 
   return (
     <div>
@@ -29,7 +19,8 @@ const SessionHistory: React.FC = () => {
         </Link>
       </footer>
       {/* student list for this session */}
-      {/* each student is clickable to get individual attendance */}
+      <StudentsList courseId={courseId} />
+      {/* TODO: each student is clickable to get individual attendance */}
     </div>
   );
 };

client/src/Components/Calendar/CheckboxListHistory.tsx

@@ -11,17 +11,22 @@ interface Props {
   sessionId: number;
 }
 
-const CheckboxList: React.FC<Props> = ({ studentList, sessionId }) => {
+const CheckboxListSession: React.FC<Props> = ({ studentList, sessionId }) => {
   const [{ fetching, data, error }, refetchAttendance] =
     useSessionAttendanceQuery({
       variables: { sessionId },
       requestPolicy: 'network-only',
     });
 
+  if (fetching) {
+  } // TODO handle fetching
+  if (error) {
+  } // TODO handle error
+
   useEffect(() => {
     const socket = socketIOClient(ENDPOINT);
     socket.on('ATTENDANCE_CHANGE', () => refetchAttendance());
-  }, []);
+  }, [refetchAttendance]);
 
   return (
     <div>
@@ -31,12 +36,12 @@ const CheckboxList: React.FC<Props> = ({ studentList, sessionId }) => {
             (attendee) => attendee?.email === student.email
           )
         ) {
-          return <CheckBoxChecked className='w-10 h-10' />;
+          return <CheckBoxChecked className="w-10 h-10" />;
         }
-        return <CheckBoxEmpty className='w-10 h-10' />;
+        return <CheckBoxEmpty className="w-10 h-10" />;
       })}
     </div>
   );
 };
 
-export default CheckboxList;
+export default CheckboxListSession;

client/src/Components/Calendar/Overview.tsx

@@ -3,19 +3,16 @@ import StudentsList from './StudentsList';
 import SessionBtn from './SessionBtn';
 import RegisterBtn from './RegisterBtn';
 
-const viewStyle =
-  'flex flex-row justify-between items-left content-center pt-4 w-full px-8 h-full';
-const listStyle = "rounded-sm shadow-xl w-1/2";
-const listHeader = "bg-green p-2 text-white text-bold text-lg rounded-t-sm";
+const viewStyle = 'flex flex-row justify-around';
+const listStyle = 'rounded-sm shadow-xl w-1/2';
 
 const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={viewStyle}>
       <section className={listStyle}>
-        <div className={listHeader}>Students</div>
         <StudentsList courseId={courseId} />
       </section>
-      <article>
+      <article className='w-2/6'>
         <SessionBtn courseId={courseId} />
         <RegisterBtn courseId={courseId} />
       </article>

client/src/Components/Calendar/SessionHistory.tsx

@@ -6,17 +6,25 @@ import Course from '../../Types/course';
 import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.svg';
 import ClassDashboard from './ClassDashboard';
 import Overview from '../Calendar/Overview';
+import User from '../../Types/user';
 
 const headerStyle =
   'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
-const attendanceStyle = 'flex justify-center bg-black hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 w-1/3 text-white ';
+const attendanceStyle =
+  'flex justify-center bg-black py-4 rounded-sm font-bold text-lg w-1/3 text-white mb-4';
+const listHeader =
+  'w-1/2 bg-green p-2 text-white text-bold text-lg rounded-t-sm';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
   const course = useSelector(
     (state: { selectedCourse: Course | null }) => state.selectedCourse
   );
   const history = useSelector((state: { history: boolean }) => state.history);
+  const students = useSelector(
+    (state: { currentList: User[] }) => state.currentList
+  );
+
   const courseId = course?.id;
 
   const link = history
@@ -34,17 +42,23 @@ const ClassView: React.FC = () => {
             </button>
           </Link>
         </div>
-        <article className="flex self-end">
-          <Link to={link} className={attendanceStyle}>
-            <h3
-              className="text-lg"
-              onClick={() => dispatch(setHistory(history))}
-            >
-              {history ? 'Back to dashboard' : 'Attendance history'}
-            </h3>
-          </Link>
+        <article className="flex flex-col px-10">
+          <div className="flex flex-row justify-around w-full">
+            <div className={listHeader}>
+              Students{' '}
+              {history && `assigned to this course: ${students.length}`}
+            </div>
+            <Link to={link} className={attendanceStyle}>
+              <h3
+                className="text-lg"
+                onClick={() => dispatch(setHistory(history))}
+              >
+                {history ? 'Back to dashboard' : 'Attendance history'}
+              </h3>
+            </Link>
+          </div>
+          {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
         </article>
-        {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
       </section>
     );
   }