Merge pull request #78 from usingbrain/nobrain

feat: individual attendance history

Author: usingbrain

client/src/Components/Calendar/StudentHistory.tsx

@@ -21,15 +21,19 @@ const StudentHistory: React.FC = () => {
 
   if (indivHistory) {
     return (
-      <div>
+      <div className=" flex flex-row flex-wrap w-5/6 justify-start ">
         {indivHistory.map((session) => {
           const date = new Date(Number(session!.date));
           const UTCdate = date.toUTCString();
 
           return (
-            <div>
+            <div className="flex flex-col justify-center p-4 items-center">
+              {session!.attended ? (
+                <CheckBoxChecked className="w-10 h-10" />
+              ) : (
+                <CheckBoxCrossed className="w-10 h-10" />
+              )}
               <p>{moment(UTCdate).format('L')}</p>
-              {session!.attended ? <CheckBoxChecked /> : <CheckBoxCrossed />}
             </div>
           );
         })}

client/src/Components/ClassView/ClassView.tsx

@@ -12,8 +12,7 @@ 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 py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16';
-const listHeader =
-  'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16';
+const listHeader = 'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
@@ -45,8 +44,10 @@ const ClassView: React.FC = () => {
         <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}`}
+              <p>
+                Students{' '}
+                {history && `assigned to this course: ${students.length}`}
+              </p>
             </div>
             <Link to={link} className={attendanceStyle}>
               <h3

client/src/Components/ClassView/StudentsList.tsx

@@ -9,6 +9,7 @@ import Session from '../../Types/session';
 import socketIOClient from 'socket.io-client';
 import CheckboxListSession from './CheckboxListSession';
 import CheckboxListHistory from '../Calendar/CheckboxListHistory';
+import StudentElementHistory from './StudentElementHistory';
 const ENDPOINT = 'http://localhost:4000';
 
 const listStyle = 'flex flex-col justify-start items-start shadow-bottom';
@@ -57,15 +58,27 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={listStyle}>
       {students?.length ? (
-        <div className='flex flex-row w-full justify-between'>
+        <div className="flex flex-row w-full justify-between">
           <div className="flex flex-col">
             {students.map((student) => {
               return (
-                <StudentElement
-                  key={student!.email}
-                  name={student!.name}
-                  lastname={student!.lastname}
-                />
+                <div>
+                  {!history ? (
+                    <StudentElement
+                      key={student!.email}
+                      name={student!.name}
+                      lastname={student!.lastname}
+                    />
+                  ) : (
+                    <StudentElementHistory
+                      key={student!.email}
+                      name={student!.name}
+                      lastname={student!.lastname}
+                      studentId={student!.id}
+                      courseId={courseId}
+                    />
+                  )}
+                </div>
               );
             })}
           </div>

client/src/generated/graphql.tsx

@@ -220,6 +220,7 @@ export type SessionResponse = {
 export type Student = {
   __typename?: 'Student';
   email: Scalars['String'];
+  id: Scalars['Int'];
   lastname: Scalars['String'];
   name: Scalars['String'];
 };
@@ -299,7 +300,7 @@ export type AssignedStudentsQueryVariables = Exact<{
 }>;
 
 
-export type AssignedStudentsQuery = { __typename?: 'Query', getAssignedStudents: { __typename?: 'AssignedStudentsResponse', error?: string | null | undefined, data?: Array<{ __typename?: 'Student', name: string, lastname: string, email: string } | null | undefined> | null | undefined } };
+export type AssignedStudentsQuery = { __typename?: 'Query', getAssignedStudents: { __typename?: 'AssignedStudentsResponse', error?: string | null | undefined, data?: Array<{ __typename?: 'Student', id: number, name: string, lastname: string, email: string } | null | undefined> | null | undefined } };
 
 export type CourseOverviewQueryVariables = Exact<{
   courseId: Scalars['Int'];
@@ -474,6 +475,7 @@ export const AssignedStudentsDocument = gql`
   getAssignedStudents(courseId: $courseId) {
     error
     data {
+      id
       name
       lastname
       email

client/src/graphql/queries/assignedStudents.graphql

@@ -2,6 +2,7 @@ query AssignedStudents($courseId: Int!) {
   getAssignedStudents(courseId: $courseId) {
     error
     data {
+      id
       name
       lastname
       email

server/dist/graphql/assignedCourseModule.js

@@ -28,6 +28,7 @@ export const assignedCourseModule = createModule({
       }
 
       type Student {
+        id: Int!
         name: String!
         lastname: String!
         email: String!