Merge pull request #91 from usingbrain/nobrain

fix: add form

Author: usingbrain

client/src/App.tsx

@@ -8,14 +8,14 @@ import Homepage from './Components/TeacherHomepage/Homepage';
 import Login from './Components/Startpage/Welcome/Login';
 import Register from './Components/Startpage/Welcome/Register';
 import Welcome from './Components/Startpage/Welcome/Welcome';
-import Instruction from './Components/TeacherHomepage/Instruction';
 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';
 import StudentHistory from './Components/Calendar/StudentHistory';
+import MainTeacherView from './Components/TeacherHomepage/MainTeacherView';
 
 const client = createClient({
   url: 'http://localhost:4000/graphql',
@@ -28,32 +28,27 @@ 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/new-course" element={<AddForm />}></Route>
-              <Route path="/homepage/classes/:courseId" element={<ClassView />}>
+              {/* <Route path="classes/new-course" element={<AddForm />}></Route> */}
+              <Route path=":type" element={<MainTeacherView />}></Route>
+              <Route path="classes/:courseId" element={<ClassView />}>
+                <Route path="history" element={<Overview />}></Route>
+                <Route path=":sessionId" element={<SessionHistory />}></Route>
                 <Route
-                  path='/homepage/classes/:courseId/history'
-                  element={<Overview />}
-                ></Route>
-                <Route
-                  path='/homepage/classes/:courseId/:sessionId'
-                  element={<SessionHistory />}
-                ></Route>
-                <Route
-                  path='/homepage/classes/:courseId/student/:studentId'
+                  path="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/Components/ClassView/ClassView.tsx

@@ -33,7 +33,7 @@ const ClassView: React.FC = () => {
     return (
       <section className="h-screen flex flex-col justify-start w-3/4 h-full">
         <div className={headerStyle}>
-          <h1 className="font-bold">{course.name?.toUpperCase()}</h1>
+          <h1 className="font-bold">{course.name.toUpperCase()}</h1>
           <Link to="/homepage">
             <button onClick={() => dispatch(setSelected(null))}>
               <CloseBtn className="w-10 h-10" />

client/src/Components/QrView/QrView.tsx

@@ -3,8 +3,7 @@ import { useParams } from 'react-router-dom';
 import QRCode from 'react-qr-code';
 
 const QrView: React.FC = () => {
-  const type = useParams().type;
-  const id = useParams().id;
+  const { id, type } = useParams();
   let qrValue;
 
   if (type && id) {

client/src/Components/TeacherDashboard/AddForm.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router';
 import { useSelector, useDispatch } from 'react-redux';
-import { setForm, setSelected } from '../../store/actions';
+import { setSelected } from '../../store/actions';
 import { useCreateCourseMutation } from '../../generated/graphql';
 import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.svg';
 import Course from '../../Types/course';
@@ -14,7 +13,6 @@ const lottieStyle = 'invisible md:visible w-0 h-0 md:w-4/12 md:h-auto';
 
 const AddForm: React.FC = () => {
   const [title, setTitle] = useState('');
-  const open = useSelector((state: { form: boolean }) => state.form);
   const selected = useSelector(
     (state: { selectedCourse: Course | null }) => state.selectedCourse
   );
@@ -32,8 +30,8 @@ const AddForm: React.FC = () => {
 
   useEffect(() => {
     // display new Course in ClassView
-    if (selected && !open) navigate(`/homepage/classes/${selected.id}`);
-  }, [selected, open, navigate]);
+    if (selected) navigate(`/homepage/classes/${selected.id}`);
+  }, [selected, navigate]);
 
   async function addCourse(name: string) {
     const response = await createCourse({ name });
@@ -45,46 +43,47 @@ const AddForm: React.FC = () => {
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    console.log('handling form submit');
     if (title.length > 1) addCourse(title);
     else {
       // TODO: display error
     }
     setTitle('');
-    dispatch(setForm(open));
   }
+
+  function handleClose() {
+    console.log('handling close');
+    dispatch(setSelected(null));
+    navigate('/homepage');
+  }
+
   return (
-    <div className='h-full w-1/2 flex justify-center flex-row border-4 mx-auto mt-16'>
+    <div className="w-2/3 flex justify-center flex-row border-4 mx-auto mt-24">
       <section className={popUpStyle}>
-        <section className='flex flex-row justify-between items-center bg-black p-8 h-20 mb-4 text-3xl'>
-          <h1 className='font-bold md:text-3xl text-xl'>Add new class.</h1>
-          <Link to='/homepage'>
-            <button
-              onClick={() => {
-                dispatch(setForm(open));
-              }}
-            >
-              <CloseBtn className='w-10 h-10' />
-            </button>
-          </Link>
+        <section className="flex flex-row justify-between items-center bg-black p-8 h-20 mb-4 text-3xl">
+          <h1 className="font-bold md:text-3xl text-xl">Add new class.</h1>
+          <button onClick={handleClose}>
+            <CloseBtn className="w-10 h-10" />
+          </button>
         </section>
-        <article className='flex flex-col md:h-3/4 w-full justify-center items-center p-0 h-0'>
+        <article className="flex flex-col md:h-3/4 w-full justify-center items-center p-0 h-0">
           <div className={lottieStyle}>
             <Lottie options={defaultOptions} height={'100%'} width={'100%'} />
           </div>
           <form
             onSubmit={(e) => handleSubmit(e)}
-            className='flex flex-row items-center w-7/12 border-4 border-green'
+            className="flex flex-row items-center w-7/12 border-4 border-green"
           >
             <input
-              className='h-14 w-full sm:w-full text-2xl text-black px-6 focus:outline-none'
-              type='text'
+              className="h-14 w-full sm:w-full text-2xl text-black px-6 focus:outline-none"
+              type="text"
               value={title}
-              placeholder='Input class title.'
+              placeholder="Input class title."
               onChange={(e) => setTitle(e.target.value)}
             />
             <button
-              type='submit'
-              className='bg-green text-white text-lg lg:text-2xl sm:text-xl w-5/12 lg:w-3/12 h-14'
+              type="submit"
+              className="bg-green text-white text-lg lg:text-2xl sm:text-xl w-5/12 lg:w-3/12 h-14"
             >
               Add
             </button>

client/src/Components/TeacherDashboard/Sidemenu.tsx

@@ -1,37 +1,37 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { useSelector, useDispatch } from 'react-redux';
-import { setForm } from '../../store/actions';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { setSelected } from '../../store/actions';
 import CourseList from './CourseList';
 
-
 const sidemenuStyle =
   'bg-green flex flex-col justify-start items-center w-1/4 h-screen shadow-2xl overflow-hidden overflow-scroll';
-const btnStyle = 'bg-white hover:bg-green-xlight p-3 rounded-sm my-4 w-3/5 text-center';
+const btnStyle =
+  'bg-white hover:bg-green-xlight p-3 rounded-sm my-4 w-3/5 text-center';
 const btnTextStyle = 'text-green font-bold text-sm';
 
 const Sidemenu: React.FC = () => {
-  const open = useSelector((state: { form: boolean }) => state.form);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
+  function handleClick() {
+    console.log('add button');
+    dispatch(setSelected(null));
+    navigate('/homepage/new-course');
+  }
   return (
     <nav className={sidemenuStyle}>
       <div className={btnStyle}>
-        <Link to="/homepage/new-course">
-          <button
-            onClick={() => dispatch(setForm(open))}
-            className={btnTextStyle}
-          >
-            <p className="invisible sm:visible h-0 sm:h-full w-0 sm:w-full">ADD NEW CLASS</p>
-            <p className="text-5xl visible sm:invisible h-full sm:h-0">+</p>
-          </button>
-        </Link>
+        <button onClick={handleClick} className={btnTextStyle}>
+          <p className="invisible sm:visible h-0 sm:h-full w-0 sm:w-full">
+            ADD NEW CLASS
+          </p>
+          <p className="text-5xl visible sm:invisible h-full sm:h-0">+</p>
+        </button>
       </div>
       <CourseList />
     </nav>
   );
 };
 
 export default Sidemenu;
-
-// bg-opacity-15

client/src/Components/TeacherHomepage/Homepage.tsx

@@ -4,9 +4,9 @@ import { Outlet } from 'react-router-dom';
 import Sidemenu from '../TeacherDashboard/Sidemenu';
 import Navbar from './Navbar';
 import Course from '../../Types/course';
-import Instruction from './Instruction';
 import { useCoursesQuery } from '../../generated/graphql';
 import { setCourses } from '../../store/actions';
+import MainTeacherView from './MainTeacherView';
 
 const Homepage: React.FC = () => {
   const dispatch = useDispatch();
@@ -31,7 +31,7 @@ const Homepage: React.FC = () => {
       <Navbar />
       <main className="flex flex-row justify-start w-full h-screen">
         <Sidemenu />
-        {selectedCourse ? <Outlet /> : <Instruction />}
+        {selectedCourse ? <Outlet /> : <MainTeacherView />}
       </main>
     </div>
   );

client/src/Components/TeacherHomepage/MainTeacherView.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams } from 'react-router';
+import AddForm from '../TeacherDashboard/AddForm';
+import Instruction from './Instruction';
+
+const MainTeacherView = () => {
+  const { type } = useParams();
+  const addForm = type === 'new-course' && true;
+
+  return <div className="w-3/4">{addForm ? <AddForm /> : <Instruction />}</div>;
+};
+
+export default MainTeacherView;

client/src/store/actions.ts

@@ -22,11 +22,6 @@ export const setSession = (session: Session | null) => ({
   session,
 });
 
-export const setForm = (open: boolean) => ({
-  type: 'SET_FORM',
-  open,
-});
-
 export const setHistory = (showing: boolean) => ({
   type: 'SET_HISTORY',
   showing,

client/src/store/reducers.ts

@@ -59,20 +59,6 @@ const session: SessionReducer = (state = null, action) => {
   }
 };
 
-type formReducer = (
-  state: boolean,
-  action: { type: string; open: boolean }
-) => boolean;
-
-const form: formReducer = (state = false, action) => {
-  switch (action.type) {
-    case 'SET_FORM':
-      return !action.open;
-    default:
-      return state;
-  }
-};
-
 type historyReducer = (
   state: boolean,
   action: { type: string; showing: boolean }
@@ -106,7 +92,6 @@ const reducers = combineReducers({
   courses,
   selectedCourse,
   session,
-  form,
   history,
   currentList,
 });