Merge pull request #48 from ApprenticeofEnder/dev

QoL fixes and linting

Author: ApprenticeofEnder

client/@coursefull/index.d.ts

@@ -16,7 +16,7 @@ export interface SemesterProgressType {
     num_graded_courses: number;
     goal: number;
     status: ItemStatus;
-    grade_colour?: string;
+    grade_colour?: GradeColours;
 }
 
 export interface BasicUserData {
@@ -29,4 +29,9 @@ export interface BasicUserData {
 
 export interface AuthHeaders {
     Authorization: string;
+}
+
+export interface GradeColours {
+    bgColour: string;
+    textColour: string;
 }

client/app/dashboard/courses/page.tsx

@@ -108,7 +108,7 @@ function CoursePage({ session }: SessionProps) {
         }
         return deliverables.at(currentDeliverableIndex) || null;
     }, [deliverables, currentDeliverableIndex]);
-    
+
     const totalWeight = useMemo(() => {
         return deliverables?.reduce((totalWeight, deliverable) => {
             return totalWeight + deliverable.weight;
@@ -210,7 +210,7 @@ function CoursePage({ session }: SessionProps) {
             <div className="flex flex-col md:flex-row gap-4 my-4 md:h-screen">
                 <div className="w-full md:basis-1/3 order-2 md:order-1 flex flex-col gap-4">
                     <Button
-                        className="top-2 order-last md:order-first"
+                        className="top-2 order-last md:order-first flex-shrink-0"
                         endContent={<PlusIcon className="h-6 w-6" />}
                         onPressEnd={createDeliverableModal.onOpen}
                         buttonType="confirm"
@@ -259,7 +259,7 @@ function CoursePage({ session }: SessionProps) {
                                     You need{' '}
                                     <strong>
                                         {courseQuery.data?.deliverable_goal &&
-                                            courseQuery.data?.deliverable_goal.toFixed(
+                                            courseQuery.data.deliverable_goal.toFixed(
                                                 1
                                             )}
                                         %
@@ -285,6 +285,8 @@ function CoursePage({ session }: SessionProps) {
             <Modal
                 isOpen={createDeliverableModal.isOpen}
                 onOpenChange={createDeliverableModal.onOpenChange}
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 className="bg-sky-100"
                 scrollBehavior="inside"
             >
@@ -297,6 +299,8 @@ function CoursePage({ session }: SessionProps) {
             <Modal
                 isOpen={updateDeliverableModal.isOpen}
                 onOpenChange={updateDeliverableModal.onOpenChange}
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 className="bg-sky-100"
                 scrollBehavior="inside"
             >
@@ -308,15 +312,16 @@ function CoursePage({ session }: SessionProps) {
                         ) as Updated<Deliverable>) || null
                     }
                     totalWeight={
-                        totalWeight! -
-                        (currentDeliverable?.weight || 0)
+                        totalWeight! - (currentDeliverable?.weight || 0)
                     }
                 />
             </Modal>
             <Modal
                 isOpen={updateCourseModal.isOpen}
                 onOpenChange={updateCourseModal.onOpenChange}
                 className="bg-sky-100"
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 scrollBehavior="inside"
             >
                 <UpdateCourseModal

client/app/dashboard/semesters/page.tsx

@@ -27,15 +27,8 @@ import Link from '@components/Link';
 import CreateCourseModal from '@components/Modal/CreateCourse';
 import UpdateCourseModal from '@components/Modal/UpdateCourse';
 import UpdateSemesterModal from '@components/Modal/UpdateSemester';
-import {
-    Course,
-    Endpoints,
-    SessionProps,
-    Updated,
-} from '@coursefull';
-import {
-    classNames,
-} from '@lib/helpers';
+import { Course, Endpoints, SessionProps, Updated } from '@coursefull';
+import { classNames } from '@lib/helpers';
 import { useProtectedEndpoint, useSession } from '@lib/supabase/SessionContext';
 import { deleteSemester, getSemester } from '@services/semesterService';
 import CourseCard from '@components/Card/Course';
@@ -277,6 +270,8 @@ function SemesterPage({ session }: SessionProps) {
             <Modal
                 isOpen={createCourseModal.isOpen}
                 onOpenChange={createCourseModal.onOpenChange}
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 className="bg-sky-100"
             >
                 <CreateCourseModal
@@ -287,6 +282,8 @@ function SemesterPage({ session }: SessionProps) {
             <Modal
                 isOpen={updateCourseModal.isOpen}
                 onOpenChange={updateCourseModal.onOpenChange}
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 className="bg-sky-100"
             >
                 <UpdateCourseModal
@@ -299,13 +296,14 @@ function SemesterPage({ session }: SessionProps) {
             <Modal
                 isOpen={updateSemesterModal.isOpen}
                 onOpenChange={updateSemesterModal.onOpenChange}
+                isDismissable={false}
+                isKeyboardDismissDisabled={true}
                 className="bg-sky-100"
             >
                 <UpdateSemesterModal
                     session={session}
                     semester={semesterData!}
                 />
-                <></>
             </Modal>
         </Fragment>
     );

client/components/Dashboard/Dashboard.tsx

@@ -1,34 +1,18 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
-import {
-    Chip,
-    Listbox,
-    ListboxItem,
-    Modal,
-    Spinner,
-    useDisclosure,
-} from '@nextui-org/react';
+import { cn, Listbox, ListboxItem, Modal, useDisclosure } from '@nextui-org/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { useMemo } from 'react';
 
-import {
-    classNames,
-    determineGradeBGColour,
-    ReadableStatus,
-    semesterURL,
-} from '@lib/helpers';
+import { classNames, determineGradeBGColour, semesterURL } from '@lib/helpers';
 import Button from '@components/Button/Button';
 import LinkButton from '@components/Button/LinkButton';
 import CreateSemesterModal from '@components/Modal/CreateSemester';
-import {
-    ItemStatus,
-    SemesterProgressType,
-    SessionProps,
-    User,
-} from '@coursefull';
+import { ItemStatus, SemesterProgressType, SessionProps } from '@coursefull';
 import { getProgress, getUserData } from '@services/userService';
 import Loading from '@app/loading';
 import StatusChip from '@components/Chip/StatusChip';
+import { useGradeColours, useProgressColours } from '@lib/hooks/ui';
 
 function renderAverage(item: SemesterProgressType | null | undefined): string {
     if (!item) {
@@ -41,17 +25,6 @@ function renderAverage(item: SemesterProgressType | null | undefined): string {
     return average;
 }
 
-function getChipColour(status: ItemStatus) {
-    switch (status) {
-        case ItemStatus.NOT_STARTED:
-            return 'default';
-        case ItemStatus.ACTIVE:
-            return 'primary';
-        case ItemStatus.COMPLETE:
-            return 'success';
-    }
-}
-
 function renderSemester(item: SemesterProgressType) {
     return (
         <ListboxItem
@@ -73,11 +46,7 @@ function renderSemester(item: SemesterProgressType) {
                 </div>
             }
             className={
-                (item.status === ItemStatus.ACTIVE ||
-                    item.status === ItemStatus.COMPLETE) &&
-                item.average
-                    ? determineGradeBGColour(item.goal, item.average)
-                    : ''
+                cn(Object.values(item.grade_colour!))
             }
             textValue={`${item.average} % out of ${item.goal} %`}
         >
@@ -89,37 +58,39 @@ function renderSemester(item: SemesterProgressType) {
 }
 
 export default function Dashboard({ session }: SessionProps) {
-    const progressResult = useQuery({
+    const {
+        data: progressData,
+        isLoading: loadingProgress,
+        error: progressError,
+    } = useQuery({
         queryKey: ['progress'],
         queryFn: () => {
             return getProgress(session);
         },
     });
 
-    const progress: SemesterProgressType[] | undefined = progressResult.data;
-    const loadingProgress: boolean = progressResult.isLoading;
-    const progressError: Error | null = progressResult.error;
     if (progressError) {
         throw progressError;
     }
 
     const activeSemester = useMemo(
         () =>
-            progress
+            progressData
                 ?.filter((semester) => semester.status === ItemStatus.ACTIVE)
                 .shift() || null,
-        [progress]
+        [progressData]
     );
 
-    const userResult = useQuery({
+    const {
+        data: userData,
+        isLoading: loadingUserData,
+        error: userError,
+    } = useQuery({
         queryKey: ['user'],
         queryFn: () => {
             return getUserData(session);
         },
     });
-    const userData: User | undefined = userResult.data;
-    const loadingUserData: boolean = userResult.isLoading;
-    const userError: Error | null = userResult.error;
     if (userError) {
         throw progressError;
     }
@@ -128,6 +99,10 @@ export default function Dashboard({ session }: SessionProps) {
 
     const router = useRouter();
 
+    const colorizedSemesters = useProgressColours(progressData);
+
+    const { bgColour, textColour } = useGradeColours(activeSemester?.goal, activeSemester?.average);   
+
     return (
         <div className="h-full">
             <h1>Hey, {session.user.user_metadata.first_name}!</h1>
@@ -138,12 +113,8 @@ export default function Dashboard({ session }: SessionProps) {
                     <div
                         className={classNames(
                             'basis-1/2 border-2 border-primary-600/15 rounded-lg p-4 flex flex-col justify-between gap-4',
-                            activeSemester?.average
-                                ? determineGradeBGColour(
-                                      activeSemester?.goal,
-                                      activeSemester.average
-                                  )
-                                : 'bg-primary-800'
+                            bgColour,
+                            textColour
                         )}
                     >
                         <h3 className="text-left">Active Semester</h3>
@@ -185,7 +156,7 @@ export default function Dashboard({ session }: SessionProps) {
                         </div>
 
                         <Listbox
-                            items={progress}
+                            items={colorizedSemesters}
                             aria-label="Semesters"
                             className="my-4"
                             itemClasses={{
@@ -199,12 +170,13 @@ export default function Dashboard({ session }: SessionProps) {
                             }}
                             emptyContent={
                                 <div className="text-center">
-                                    You don&apos;t have any semesters. Start by
-                                    adding some!
+                                    {
+                                        "You don't have any semesters. Start by adding some!"
+                                    }
                                 </div>
                             }
                         >
-                            {(item) => renderSemester(item)}
+                            {(item: SemesterProgressType) => renderSemester(item)}
                         </Listbox>
                     </div>
                 </div>
@@ -216,6 +188,8 @@ export default function Dashboard({ session }: SessionProps) {
                     onOpenChange={onOpenChange}
                     className="bg-sky-100"
                     scrollBehavior="inside"
+                    isDismissable={false}
+                    isKeyboardDismissDisabled={true}
                     classNames={{ footer: 'justify-between' }}
                 >
                     <CreateSemesterModal

client/components/Form/LoginForm.tsx

@@ -83,12 +83,12 @@ export default function LoginForm() {
                         });
                         submitForm();
                     }}
-                    isLoading={loginMutation.isPending}
+                    isLoading={loginMutation.isPending || isNavigating}
                     isDisabled={!isValid}
                     buttonType="confirm"
                     data-testid="login-button"
                 >
-                    {loginMutation.isPending ? 'Logging in...' : 'Log In'}
+                    {(loginMutation.isPending || isNavigating) ? 'Logging in...' : 'Log In'}
                 </Button>
             </div>
         </Fragment>

client/components/Modal/CreateDeliverable.tsx

@@ -31,7 +31,7 @@ export default function CreateDeliverableModal({
         mark: 0,
         notes: '',
         start_date: now(getLocalTimeZone()),
-        deadline: now(getLocalTimeZone()),
+        deadline: now(getLocalTimeZone()).set({hour: 23, minute: 59}),
     });
 
     const queryClient = useQueryClient();