Merge pull request #71 from usingbrain/btosz

Toggle history bar

Author: BartoszSzatkowski

client/package-lock.json

@@ -4,9 +4,11 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
 //package for date format
 import moment from 'moment';
 
-const overviewStyle = "flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8";
-const headerStyle = "flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl";
-const historyStyle = "flex flex-row flex-wrap justify-start w-full";
+const overviewStyle =
+  'flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8';
+const headerStyle =
+  'flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl';
+const historyStyle = 'flex flex-row flex-wrap justify-start w-full';
 
 const Overview: React.FC = () => {
   const courseId = Number(useParams().courseId);
@@ -20,30 +22,30 @@ const Overview: React.FC = () => {
   } // TODO handle error
 
   const history = data?.getCourseOverview?.data;
-  const total = history?.studentTotal;
   const sessions = history?.sessions;
 
   console.log('history: ', history);
   return (
     <div>
       <div className={overviewStyle}>
-        <header>
-          <h3 className={headerStyle}>Students assigned to this course: {total}</h3>
-        </header>
-        <article className="flex flex-col justify-center">
-          <p className="m-auto text-xl">Attendance</p>
+        <article className='flex flex-col justify-center'>
+          <p className='m-auto text-xl'>Attendance</p>
           <section className={historyStyle}>
             {!!sessions &&
               sessions.map((session) => {
                 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">
+                    <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>
+                          <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/Assets/PerfectLogo2.svg

@@ -3,19 +3,16 @@ import StudentsList from './StudentsList';
 import SessionBtn from './SessionBtn';
 import RegisterBtn from './RegisterBtn';
 
-const viewStyle =
-  'flex flex-row justify-between items-left content-center pt-4 w-full px-8 h-full';
-const listStyle = "rounded-sm shadow-xl w-1/2";
-const listHeader = "bg-green p-2 text-white text-bold text-lg rounded-t-sm";
+const viewStyle = 'flex flex-row justify-around';
+const listStyle = 'rounded-sm shadow-xl w-1/2';
 
 const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={viewStyle}>
       <section className={listStyle}>
-        <div className={listHeader}>Students</div>
         <StudentsList courseId={courseId} />
       </section>
-      <article>
+      <article className='w-2/6'>
         <SessionBtn courseId={courseId} />
         <RegisterBtn courseId={courseId} />
       </article>

client/src/Components/Calendar/Overview.tsx

@@ -9,7 +9,10 @@ import Overview from '../Calendar/Overview';
 
 const headerStyle =
   'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
-const attendanceStyle = 'flex justify-center bg-black hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 w-1/3 text-white ';
+const attendanceStyle =
+  'flex justify-center bg-black py-4 rounded-sm font-bold text-lg w-1/3 text-white mb-4';
+const listHeader =
+  'w-1/2 bg-green p-2 text-white text-bold text-lg rounded-t-sm';
 
 const ClassView: React.FC = () => {
   const dispatch = useDispatch();
@@ -25,26 +28,31 @@ const ClassView: React.FC = () => {
 
   if (course && courseId) {
     return (
-      <section className="h-screen flex flex-col justify-start w-3/4">
+      <section className='h-screen flex flex-col justify-start w-3/4'>
         <div className={headerStyle}>
-          <h1 className="font-bold">{course.name?.toUpperCase()}</h1>
-          <Link to="/homepage">
+          <h1 className='font-bold'>{course.name?.toUpperCase()}</h1>
+          <Link to='/homepage'>
             <button onClick={() => dispatch(setSelected(null))}>
-              <CloseBtn className="w-10 h-10" />
+              <CloseBtn className='w-10 h-10' />
             </button>
           </Link>
         </div>
-        <article className="flex self-end">
-          <Link to={link} className={attendanceStyle}>
-            <h3
-              className="text-lg"
-              onClick={() => dispatch(setHistory(history))}
-            >
-              {history ? 'Back to dashboard' : 'Attendance history'}
-            </h3>
-          </Link>
+        <article className='flex flex-col px-10'>
+          <div className='flex flex-row justify-around w-full'>
+            <div className={listHeader}>
+              Students {history && `assigned to this course:`}
+            </div>
+            <Link to={link} className={attendanceStyle}>
+              <h3
+                className='text-lg'
+                onClick={() => dispatch(setHistory(history))}
+              >
+                {history ? 'Back to dashboard' : 'Attendance history'}
+              </h3>
+            </Link>
+          </div>
+          {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
         </article>
-        {history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
       </section>
     );
   }

client/src/Components/ClassView/ClassDashboard.tsx

@@ -37,11 +37,8 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
 
   useEffect(() => {
     const socket = socketIOClient(ENDPOINT);
-    socket.on('ASSIGNMENT_CHANGE', () => {
-      console.log('socket is called');
-      refetchAssigned();
-    });
-  }, [refetchAssigned]);
+    socket.on('ASSIGNMENT_CHANGE', () => refetchAssigned());
+  }, []);
 
   const loadingAnimationOptions = {
     loop: true,
@@ -60,7 +57,7 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
   return (
     <div className={listStyle}>
       {students?.length ? (
-        <div className="flex">
+        <div className='flex'>
           <div>
             {students.map((student) => {
               return (

client/src/Components/ClassView/ClassView.tsx

@@ -1,53 +1,55 @@
-import React from "react";
-import { Link, Outlet } from "react-router-dom";
+import React from 'react';
+import { Link, Outlet } from 'react-router-dom';
 import Lottie from 'react-lottie';
 import animationData from '../Assets/checklist.json';
 import { ReactComponent as QRStamp } from '../../../Assets/thePerfectestLogo2.svg';
 
-
-const linkStyle = "flex text-white w-3/4 h-12 md:h-14 lg:h-20 xl:h-24 border-2 border-white justify-center m-auto my-8 md:my-8 items-center md:text-xl hover:bg-green-light xl:text-2xl";
-const promptStyle = "bg-white flex flex-row rounded-sm w-full sm:w-10/12 h-80 lg:h-96 items-center m-auto my-14";
-const checklistStyle = "invisible sm:visible w-0 sm:w-1/2 h-full";
-const buttonStyle = "bg-green flex rounded-sm h-full w-full sm:w-1/2 lg:w-4/12 justify-center items-center flex-col px-8 lg:px-8 xl:px-16 hover:shadow-2xl";
-const welcomeStyle = "flex rounded-sm justify-center flex-col sm:items-start items-center w-0 sm:w-1/2 sm:p-4 m-auto";
+const promptStyle =
+  'flex flex-col justify-around w-full h-full md:h-3/4 md:self-center';
+const checklistStyle = 'h-auto w-44 md:w-4/6 sm:w-1/2';
+const welcomeStyle =
+  'flex flex-col justify-around items-center sm:w-full md:flex-row';
+const registerStyle =
+  'w-11/12 bg-green text-white text-center mb-6 p-4 sm:m-0 sm:w-5/12';
+const loginStyle =
+  'w-11/12 text-green border-2 border-green text-center p-4 sm:w-5/12';
 
 const Prompt: React.FC = () => {
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animationData,
+    rendererSettings: {},
+  };
 
-    const defaultOptions = {
-        loop: true,
-        autoplay: true,
-        animationData: animationData,
-        rendererSettings: {}
-    };
-
-    return (
-        <div className="w-full">
-            <Outlet />
-            <div className="h-1/3 w-1/3 m-auto my-4 visible sm:invisible sm:my-0 sm:h-2 sm:w-2"><QRStamp /></div>
-            <section className={promptStyle}>
-                <article className={welcomeStyle}>
-                    <div className={checklistStyle}>
-                        <Lottie options={defaultOptions}
-                            height={200}
-                            width={'100%'}
-                        />
-                    </div>
-                    <p className="text-black text-md text-xl md:text-2xl lg:text-3xl xl:text-4xl invisible sm:visible">We help you take attendance quickly, easily, and without hassle.</p>
-                </article>
-                <aside className={buttonStyle}>
-                    <h1 className="text-white text-2xl lg:text-4xl">Welcome</h1>
-                    <ul className="w-full">
-                        <li className="w-full">
-                            <p><Link to={'/register'} className={linkStyle}>Register</Link></p>
-                        </li>
-                        <li>
-                            <p><Link to={'/login'} className={linkStyle}>Login</Link></p>
-                        </li>
-                    </ul>
-                </aside>
-            </section>
-        </div>
-    )
-}
+  return (
+    <div className='flex w-full h-full 2xl:px-32 2xl:w-3/4'>
+      <Outlet />
+      <section className={promptStyle}>
+        <h1 className='text-green font-bold text-5xl md:text-6xl xl:text-7xl text-center'>
+          Welcome to QRCheckd!
+        </h1>
+        <article className={welcomeStyle}>
+          <div className='flex flex-col justify-around w-full sm:h-4/6'>
+            <p className='text-black text-2xl lg:text-3xl xl:text-4xl text-center p-4'>
+              Take attendance quickly, easily, and without hassle.
+            </p>
+            <div className='flex flex-col justify-around items-center sm:flex-row w-full'>
+              <Link to={'/register'} className={registerStyle}>
+                Register
+              </Link>
+              <Link to={'/login'} className={loginStyle}>
+                Login
+              </Link>
+            </div>
+          </div>
+          <div className={checklistStyle}>
+            <Lottie options={defaultOptions} height={'100%'} width={'100%'} />
+          </div>
+        </article>
+      </section>
+    </div>
+  );
+};
 
-export default Prompt;
+export default Prompt;