feat: button back to session history from student history

Author: usingbrain

client/src/App.tsx

@@ -10,7 +10,6 @@ import Register from './Components/Startpage/Welcome/Register';
 import Welcome from './Components/Startpage/Welcome/Welcome';
 import ClassView from './Components/ClassView/ClassView';
 import StudentDashboard from './Components/StudentView/StudentDashboard';
-import AddForm from './Components/TeacherDashboard/AddForm';
 import QrView from './Components/QrView/QrView';
 import Overview from './Components/Calendar/Overview';
 import SessionHistory from './Components/Calendar/SessionHistory';

client/src/Components/Calendar/SessionHistory.tsx

@@ -1,26 +1,30 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setSessionId } from '../../store/actions';
 import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import StudentsList from '../ClassView/StudentsList';
 
-// const listStyle = 'flex flex-col justify-start items-start';
-
-const btnStyle = "flex bg-green text-white p-4 shadow-lg m-auto my-8";
+const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
 
 const SessionHistory: React.FC = () => {
   const courseId = Number(useParams().courseId);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  dispatch(setSessionId(null));
+
+  function handleClick() {
+    navigate(`/homepage/classes/${courseId}/history`);
+  }
 
   return (
     <div>
-      {/* button back to overview */}
-      <footer className="flex justify-center my-4">
-      </footer>
-      {/* student list for this session */}
+      <footer className="flex justify-center my-4"></footer>
       <StudentsList courseId={courseId} />
-      {/* TODO: each student is clickable to get individual attendance */}
-      <Link to={`/homepage/classes/${courseId}/history`}>
-        <button className={btnStyle}>Back to history overview</button>
-      </Link>
+      <button className={btnStyle} onClick={handleClick}>
+        Back to history overview
+      </button>
     </div>
   );
 };

client/src/Components/Calendar/StudentHistory.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
 import { useIndividualAttendanceQuery } from '../../generated/graphql';
 import { useParams } from 'react-router';
+import { useNavigate } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
 import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
 import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
 import moment from 'moment';
+import Student from '../../Types/student';
+
+const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
 
 const StudentHistory: React.FC = () => {
+  const navigate = useNavigate();
   const courseId = Number(useParams().courseId);
   const studentId = Number(useParams().studentId);
-  const name = 'Friend';
-  const lastname = 'buddy';
+  const studentState = useSelector(
+    (state: { student: Student | null }) => state.student
+  );
+  const sessionId = useSelector(
+    (state: { sessionId: number | null }) => state.sessionId
+  );
+  let name;
+  let lastname;
+
+  if (studentState) {
+    name = studentState.name;
+    lastname = studentState.lastname;
+  }
 
   const [{ fetching, data, error }] = useIndividualAttendanceQuery({
     variables: { courseId, studentId },
@@ -20,12 +37,22 @@ const StudentHistory: React.FC = () => {
   if (error) {
   } // TODO handle error
 
+  function handleClick() {
+    console.log('click back from studenthistory', { sessionId });
+    navigate(`/homepage/classes/${courseId}/${sessionId}`);
+  }
+
   const indivHistory = data?.getIndividualAttendance?.data; // returns {attended, date}
 
   if (indivHistory) {
     return (
       <div>
-        <h1 className="flex justify-center text-lg md:text-xl">{name} {lastname}</h1>
+        <h1 className="flex justify-center text-lg md:text-xl">
+          {name} {lastname}
+        </h1>
+        <button className={btnStyle} onClick={handleClick}>
+          Back to session overview
+        </button>
         <section className="flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4">
           <div className=" flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 overflow-scroll border-green border-8">
             {indivHistory.map((session) => {
@@ -52,34 +79,3 @@ const StudentHistory: React.FC = () => {
 };
 
 export default StudentHistory;
-
-// 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>
-// );
-
-// 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">
-//       <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>
-//         </div>
-//       </Link>
-//     </div>
-//   );
-// }

client/src/Components/ClassView/StudentElementHistory.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setSessionId, setStudent } from '../../store/actions';
 import { useNavigate } from 'react-router';
+import { useParams } from 'react-router-dom';
 
 interface Props {
   courseId: number;
@@ -14,16 +17,23 @@ const StudentElementHistory: React.FC<Props> = ({
   courseId,
   studentId,
 }) => {
+  const dispatch = useDispatch();
   const navigate = useNavigate();
 
+  const sessionId: number = Number(useParams().sessionId);
+
+  function handleClick() {
+    dispatch(setStudent({ name, lastname, studentId }));
+    dispatch(setSessionId(sessionId));
+
+    navigate(`/homepage/classes/${courseId}/student/${studentId}`);
+  }
+
   return (
-    <button
-      className="flex place-items-center h-10"
-      onClick={() =>
-        navigate(`/homepage/classes/${courseId}/student/${studentId}`)
-      }
-    >
-      <h3 className="mx-4">{lastname} {name}</h3>
+    <button className="flex place-items-center h-10" onClick={handleClick}>
+      <h3 className="mx-4">
+        {lastname} {name}
+      </h3>
     </button>
   );
 };

client/src/Types/student.ts

@@ -1,5 +1,5 @@
 export default interface Student {
   name: string;
   lastname: string;
-  email: string;
+  studentId: number;
 }

client/src/store/actions.ts

@@ -1,12 +1,18 @@
 import User from '../Types/user';
 import Course from '../Types/course';
 import Session from '../Types/session';
+import Student from '../Types/student';
 
 export const setUser = (user: User) => ({
   type: 'SET_USER',
   user,
 });
 
+export const setStudent = (student: Student | null) => ({
+  type: 'SET_STUDENT',
+  student,
+});
+
 export const setCourses = (courses: Course[]) => ({
   type: 'SET_COURSES',
   courses,
@@ -22,6 +28,11 @@ export const setSession = (session: Session | null) => ({
   session,
 });
 
+export const setSessionId = (sessionId: number | null) => ({
+  type: 'SET_SESSION_ID',
+  sessionId,
+});
+
 export const setHistory = (showing: boolean) => ({
   type: 'SET_HISTORY',
   showing,

client/src/store/reducers.ts

@@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
 import User from '../Types/user';
 import Course from '../Types/course';
 import Session from '../Types/session';
+import Student from '../Types/student';
 
 type UserReducer = (
   state: User | null,
@@ -17,6 +18,20 @@ const user: UserReducer = (state = null, action) => {
   }
 };
 
+type StudentReducer = (
+  state: Student | null,
+  action: { type: string; student: Student }
+) => Student | null;
+
+const student: StudentReducer = (state = null, action) => {
+  switch (action.type) {
+    case 'SET_STUDENT':
+      return action.student;
+    default:
+      return state;
+  }
+};
+
 type CoursesReducer = (
   state: Course[] | null,
   action: { type: string; courses: Course[] }
@@ -59,6 +74,20 @@ const session: SessionReducer = (state = null, action) => {
   }
 };
 
+type SessionIdReducer = (
+  state: number | null,
+  action: { type: string; sessionId: number }
+) => number | null;
+
+const sessionId: SessionIdReducer = (state = null, action) => {
+  switch (action.type) {
+    case 'SET_SESSION_ID':
+      return action.sessionId;
+    default:
+      return state;
+  }
+};
+
 type historyReducer = (
   state: boolean,
   action: { type: string; showing: boolean }
@@ -89,9 +118,11 @@ const currentList: currentListReducer = (state = null, action) => {
 
 const reducers = combineReducers({
   user,
+  student,
   courses,
   selectedCourse,
   session,
+  sessionId,
   history,
   currentList,
 });