Merge branch 'bubblegum' of https://github.com/usingbrain/QRcheckd into bubblegum

Author: OGALEXI

client/src/Components/ClassView/ClassView.tsx

@@ -5,9 +5,7 @@ import { setSelected, setHistory } from '../../store/actions';
 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';
-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/DeleteBtn.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
 import { useDeleteCourseMutation } from '../../generated/graphql';

client/src/Components/TeacherDashboard/CourseList.tsx

@@ -1,62 +1,31 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { setCourses } from '../../store/actions';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import Course from './Course';
-import { useCoursesQuery } from '../../generated/graphql';
 import CourseType from '../../Types/course';
 
 const listStyle = 'w-full text-left';
 
 const CourseList: React.FC = () => {
-  const dispatch = useDispatch();
-  const [{ fetching, data, error }] = useCoursesQuery({ variables: {} });
-  const courses = data?.getCourses?.data;
-
   const coursesState = useSelector(
-    (state: { courses: CourseType[] | null }) => state.courses // initialze with empty array instead of null
+    (state: { courses: CourseType[] | null }) => state.courses // TODO: initialze with empty array instead of null
   );
-  // const [state, setState] = useState(coursesState);
-
-  // useEffect(() => {
-  //   setState(coursesState);
-  // }, [coursesState]);
-
-  useEffect(() => {
-    if (courses) {
-      // @ts-ignore
-      dispatch(setCourses(courses));
-    }
-  }, []);
-
-  if (fetching) {
-  } // TODO handle fetching
-  if (error) {
-  } // TODO handle error
-
-  // if (courses) {
-  //   // @ts-ignore
-  //   dispatch(setCourses(courses));
 
   return (
     <div className={listStyle}>
-      {
+      {!!coursesState &&
         // useredux state here instead of DB response
-        coursesState!.map((course) => {
+        coursesState.map((course) => {
           return (
             <article key={course?.id}>
               <Link to={`/homepage/classes/${course?.id}`}>
                 {!!course && <Course course={course} />}
               </Link>
             </article>
           );
-        })
-      }
+        })}
     </div>
   );
 };
 
-//   return <article></article>;
-// };
-
 export default CourseList;

client/src/Components/TeacherHomepage/Homepage.tsx

@@ -1,21 +1,35 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 import Sidemenu from '../TeacherDashboard/Sidemenu';
 import Navbar from './Navbar';
-import User from '../../Types/user';
 import Course from '../../Types/course';
 import Instruction from './Instruction';
+import { useCoursesQuery } from '../../generated/graphql';
+import { setCourses } from '../../store/actions';
 
 const Homepage: React.FC = () => {
+  const dispatch = useDispatch();
+  const [{ fetching, data, error }] = useCoursesQuery({ variables: {} });
+  const courses = data?.getCourses?.data;
+
+  if (fetching) {
+  } // TODO handle fetching
+  if (error) {
+  } // TODO handle error
+  if (courses) {
+    // @ts-ignore
+    dispatch(setCourses(courses));
+  }
+
   const selectedCourse = useSelector(
     (state: { selectedCourse: Course | null }) => state.selectedCourse
   );
 
   return (
     <div>
       <Navbar />
-      <main className='flex flex-row justify-start w-full h-screen'>
+      <main className="flex flex-row justify-start w-full">
         <Sidemenu />
         {selectedCourse ? <Outlet /> : <Instruction />}
       </main>

client/src/Components/TeacherHomepage/Navbar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import User from '../../Types/user';
 import { useNavigate } from 'react-router';
 import { useLogoutMutation, useMeQuery } from '../../generated/graphql';
 import { ReactComponent as QRLogo } from '../../Assets/thePerfectestLogo2.svg';
@@ -20,14 +19,14 @@ const Navbar: React.FC = () => {
   };
   return (
     <nav className={navStyle}>
-      <Link to='/'>
-        <QRLogo className='w-48 flex' />
+      <Link to="/">
+        <QRLogo className="w-48 flex" />
       </Link>
-      <section className='flex flex-row items-center'>
-        <h3 className='pr-8 font-lato font-bold text-lg'>
+      <section className="flex flex-row items-center">
+        <h3 className="pr-8 font-lato font-bold text-lg">
           {data?.me?.name} {data?.me?.lastname}
         </h3>
-        <button onClick={handleLogout} className='font-normal hover:text-green'>
+        <button onClick={handleLogout} className="font-normal hover:text-green">
           Logout
         </button>
       </section>