fix: fixed state management for courseList

Author: usingbrain

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'>
+      <main className="flex flex-row justify-start w-full">
         <Sidemenu />
         {selectedCourse ? <Outlet /> : <Instruction />}
       </main>