Merge pull request #83 from usingbrain/main

pull changes

Author: OGALEXI

client/src/App.tsx

@@ -28,36 +28,32 @@ function App() {
   return (
     <Provider value={client}>
       <BrowserRouter>
-        <div className="App">
+        <div className='App'>
           <Routes>
             <Route exact path="/" element={<Welcome />} />
             <Route path="/homepage" element={<Homepage />}>
-              <Route
-                path="/homepage/dashboard"
-                element={<Instruction />}
-              ></Route>
               <Route path="/homepage/new-course" element={<AddForm />}></Route>
               <Route path="/homepage/classes/:courseId" element={<ClassView />}>
                 <Route
-                  path="/homepage/classes/:courseId/history"
+                  path='/homepage/classes/:courseId/history'
                   element={<Overview />}
                 ></Route>
                 <Route
-                  path="/homepage/classes/:courseId/:sessionId"
+                  path='/homepage/classes/:courseId/:sessionId'
                   element={<SessionHistory />}
                 ></Route>
                 <Route
-                  path="/homepage/classes/:courseId/student/:studentId"
+                  path='/homepage/classes/:courseId/student/:studentId'
                   element={<StudentHistory />}
                 ></Route>
               </Route>
             </Route>
             <Route>
-              <Route path="/login" element={<Login />} />
-              <Route path="/register" element={<Register />} />
+              <Route path='/login' element={<Login />} />
+              <Route path='/register' element={<Register />} />
             </Route>
-            <Route path="/student" element={<StudentDashboard />}></Route>
-            <Route path="/:type/:id" element={<QrView />}></Route>
+            <Route path='/student' element={<StudentDashboard />}></Route>
+            <Route path='/:type/:id' element={<QrView />}></Route>
           </Routes>
         </div>
       </BrowserRouter>

client/src/Assets/checkedAnimation.json

@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":10,"ip":0,"op":18,"w":1080,"h":1080,"nm":"animation-check","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"check-green","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[648.25,452.934,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-228.247,53.339],[-114.37,166.806],[228.162,-167.15]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.6392156862745098,0.5764705882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":54,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[0]},{"t":16,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":12,"s":[0]},{"t":16,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"circle-green","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[535.795,535.568,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[98.386,98.386,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[729.85,729.85],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.6392156862745098,0.5764705882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":54,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3.718,3.742],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.623,100.623],"ix":3},"r":{"a":0,"k":27.796,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[100]},{"t":10,"s":[15.2]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[100]},{"t":10,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"check-grey","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[647.852,452.832,0],"ix":2},"a":{"a":0,"k":[163,124.5,0],"ix":1},"s":{"a":0,"k":[158.358,158.358,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6.56,6.716],[6.716,-6.56],[0,0],[0,0],[6.639,-6.639],[-6.639,-6.639],[0,0],[-6.66,6.506],[0,0]],"o":[[-6.561,-6.716],[0,0],[0,0],[-6.639,-6.639],[-6.639,6.639],[0,0],[6.584,6.584],[0,0],[6.716,-6.561]],"v":[[156.131,-117.352],[132.09,-117.634],[-71.89,81.625],[-132.01,21.506],[-156.051,21.506],[-156.051,45.548],[-84.051,117.548],[-60.152,117.688],[155.848,-93.312]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.902000038297,0.902000038297,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[162.94,124.444],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":800,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle-grey","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2},"a":{"a":0,"k":[245.5,245.5,0],"ix":1},"s":{"a":0,"k":[158.358,158.358,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[65.441,0],[46.274,46.275],[0,65.441],[-46.275,46.274],[-65.442,0],[-34.872,-18.345],[4.371,-8.309],[8.311,4.37],[34.158,0],[0,-116.346],[-116.346,0],[0,116.346],[1.122,8.839],[-9.314,1.183],[-1.182,-9.314],[0,-10.409],[46.275,-46.274]],"o":[[-65.442,0],[-46.275,-46.274],[0,-65.442],[46.274,-46.275],[39.651,0],[8.309,4.372],[-4.371,8.308],[-30.01,-15.787],[-116.346,0],[0,116.346],[116.346,0],[0,-8.982],[-1.183,-9.314],[9.31,-1.185],[1.303,10.255],[0,65.441],[-46.274,46.275]],"v":[[0,245],[-173.241,173.241],[-245,0],[-173.241,-173.241],[0,-245],[113.915,-216.959],[121.045,-193.999],[98.085,-186.868],[0,-211],[-211,0],[0,211],[211,0],[209.309,-26.858],[224.031,-45.865],[243.037,-31.142],[245,0],[173.241,173.241]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.902000038297,0.902000038297,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 2","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"fl","c":{"a":0,"k":[0.902000038297,0.902000038297,0.902000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[245.25,245.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":800,"st":0,"bm":0}],"markers":[]}

client/src/Assets/chekcbox-checked.svg

@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":60,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"forwardslash","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.762,0.833],"y":[1,1.024,1]},"o":{"x":[0.167,0.238,0.167],"y":[0,1.592,0]},"t":0,"s":[100,0,100]},{"t":50,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-5.795,-236.25],[-5.795,233.182]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2,0.2,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0600600600601,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"backslash","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.762,0.833],"y":[1,1.024,1]},"o":{"x":[0.167,0.238,0.167],"y":[0,1.592,0]},"t":0,"s":[100,0,100]},{"t":50,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-5.795,-236.25],[-5.795,233.182]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2,0.2,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":60.0600600600601,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[951.989,529.261,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[708.75,708.75],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.2,0.2,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[8.011,10.739],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":55,"s":[100]}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":60.0600600600601,"st":0,"bm":0}],"markers":[]}

client/src/Assets/chekcbox-cross.svg

@@ -2,6 +2,7 @@ import React from 'react';
 import StudentsList from './StudentsList';
 import SessionBtn from './SessionBtn';
 import RegisterBtn from './RegisterBtn';
+import DeleteBtn from './DeleteBtn';
 
 const viewStyle = 'flex flex-row justify-around';
 const listStyle = 'rounded-sm shadow-sm w-1/2';
@@ -12,11 +13,11 @@ const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
       <section className={listStyle}>
         <StudentsList courseId={courseId} />
       </section>
-      <article className='w-2/6'>
+      <article className="w-2/6">
         <SessionBtn courseId={courseId} />
         <RegisterBtn courseId={courseId} />
+        <DeleteBtn courseId={courseId} />
       </article>
-      {/* TODO: add DELETE COURSE BUTTON */}
     </div>
   );
 };

client/src/Assets/errorAnimation.json

@@ -7,6 +7,7 @@ import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.sv
 import ClassDashboard from './ClassDashboard';
 import Overview from '../Calendar/Overview';
 import User from '../../Types/user';
+import DeleteBtn from './DeleteBtn';
 
 const headerStyle =
   'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';

client/src/Components/ClassView/ClassDashboard.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router';
+import { useDeleteCourseMutation } from '../../generated/graphql';
+import { setCourses } from '../../store/actions';
+import Course from '../../Types/course';
+
+const btnStyle = {
+  box: 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-4 text-white h-16',
+  button:
+    'invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full',
+  ptag: 'visible md:invisible md:w-0 md:h-0',
+};
+
+const alertStyle =
+  'text-white text-center flex flex-col items-center justify-evenly h-56 w-96 fixed top-2/3 inset-x-1/2 bg-black p-12';
+
+const alertBtnStyle = 'hover:bg-white hover:text-black border-white p-4';
+
+const DeleteBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  let success = false;
+  const [askIfSure, setAskIfSure] = useState(false);
+
+  const courses = useSelector(
+    (state: { courses: Course[] | null }) => state.courses
+  );
+
+  const [, deleteCourse] = useDeleteCourseMutation();
+
+  const handleDelete = async (courseId: number) => {
+    const response = await deleteCourse({ courseId });
+    if (response.error) {
+    } // TODO: handle error
+    if (response.data) {
+      success = true;
+      // filter the list, dispatch new one
+      const coursesAfterDelete = courses?.filter(
+        (course) => course.id !== courseId
+      );
+      // @ts-ignore
+      dispatch(setCourses(coursesAfterDelete));
+      setTimeout(() => navigate('/homepage'), 1000);
+    }
+  };
+
+  const handleClick = () => {
+    // ask if sure!!!
+    setAskIfSure(true);
+  };
+
+  // TODO: success message??
+
+  return (
+    <div className={btnStyle.box}>
+      <button onClick={handleClick} className={btnStyle.button}>
+        Delete course
+      </button>
+      {askIfSure && (
+        <div className={alertStyle}>
+          <h2>Are you sure you want to delete this course?</h2>
+          <div className="flex flex-row justify-evenly w-full mt-4">
+            <button
+              onClick={() => handleDelete(courseId)}
+              className={alertBtnStyle}
+            >
+              YES
+            </button>
+            <button
+              onClick={() => setAskIfSure(false)}
+              className={alertBtnStyle}
+            >
+              CANCEL
+            </button>
+          </div>
+        </div>
+      )}
+      {success && (
+        <div className={alertStyle}>
+          <h2>Course successfully deleted</h2>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DeleteBtn;

client/src/Components/ClassView/ClassView.tsx

@@ -1,20 +1,28 @@
 import React from 'react';
 
-const registerStyle = 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-8 text-white h-16';
+const registerStyle =
+  'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-4 text-white h-16';
 
 const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
   function openQR() {
     window.open(
       window.location.origin + `/register/${courseId}`,
       '_blank',
-      'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500',
+      'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500'
     );
   }
 
-  return <div className={registerStyle}>
-    <button onClick={openQR} className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full">Register students</button>
-    <p className="visible md:invisible md:w-0 md:h-0">Register</p>
-  </div>;
+  return (
+    <div className={registerStyle}>
+      <button
+        onClick={openQR}
+        className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full"
+      >
+        Register students
+      </button>
+      <p className="visible md:invisible md:w-0 md:h-0">Register</p>
+    </div>
+  );
 };
 
 export default RegisterBtn;