feat: add loading states to inclusion and exclusion modals

NUS-SoC-TIPS · Jun 2, 2024 · d83d608 · d83d608
1 parent 764442a
commit d83d608
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/routes/admin/windows/ViewWindow.tsx b/src/routes/admin/windows/ViewWindow.tsx
@@ -48,6 +48,8 @@ interface State {
   partnerViewed: StudentBase | null;
   isAutoExclusionModalShown: boolean;
   isPairStudentsModalShown: boolean;
+  isExcluding: boolean;
+  isIncluding: boolean;
   isAutoExcluding: boolean;
   isPairingStudents: boolean;
 }
@@ -62,6 +64,13 @@ export const ViewWindow = (): ReactElement<typeof ViewWindowPage> => {
       studentBeingIncluded: null,
       submissionsViewed: null,
       interviewsViewed: null,
+      partnerViewed: null,
+      isAutoExclusionModalShown: false,
+      isPairStudentsModalShown: false,
+      isExcluding: false,
+      isIncluding: false,
+      isAutoExcluding: false,
+      isPairingStudents: false,
     } as State,
   );
   const toast = useToast();
@@ -301,12 +310,14 @@ export const ViewWindow = (): ReactElement<typeof ViewWindowPage> => {
         window={window}
       />
       <ConfirmExclusion
+        isLoading={state.isExcluding}
         isOpen={studentBeingExcluded != null}
         name={studentBeingExcluded?.name ?? ''}
         onClose={(): void => setState({ studentBeingExcluded: null })}
         onConfirmExclude={onConfirmExclude}
       />
       <ConfirmInclusion
+        isLoading={state.isIncluding}
         isOpen={studentBeingIncluded != null}
         name={studentBeingIncluded?.name ?? ''}
         onClose={(): void => setState({ studentBeingIncluded: null })}

diff --git a/src/routes/admin/windows/modals/ConfirmExclusion.tsx b/src/routes/admin/windows/modals/ConfirmExclusion.tsx
@@ -3,9 +3,11 @@ import { Button, FormControl, FormLabel, Stack, Text } from '@chakra-ui/react';
 
 import { Modal } from '@/components/modal';
 import { Select } from '@/components/select';
+import { emptyFunction } from '@/utils/functionUtils';
 
 interface Props {
   isOpen: boolean;
+  isLoading: boolean;
   onClose: () => void;
   name: string;
   onConfirmExclude: (reason: string) => void | Promise<void>;
@@ -27,6 +29,7 @@ interface ReasonOption {
 
 export const ConfirmExclusion = ({
   isOpen,
+  isLoading,
   onClose,
   name,
   onConfirmExclude,
@@ -50,11 +53,12 @@ export const ConfirmExclusion = ({
     <Modal
       actions={
         <Stack direction="row" spacing={2}>
-          <Button onClick={onClose} variant="secondary">
+          <Button isDisabled={isLoading} onClick={onClose} variant="secondary">
             Cancel
           </Button>
           <Button
             isDisabled={reason == null || reason === ''}
+            isLoading={isLoading}
             onClick={handleExclude}
             variant="primary"
           >
@@ -63,7 +67,7 @@ export const ConfirmExclusion = ({
         </Stack>
       }
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={isLoading ? emptyFunction : onClose}
       size="md"
       title={`Exclude ${name}?`}
     >

diff --git a/src/routes/admin/windows/modals/ConfirmInclusion.tsx b/src/routes/admin/windows/modals/ConfirmInclusion.tsx
@@ -2,16 +2,19 @@ import { ReactElement } from 'react';
 import { Button, Stack, Text } from '@chakra-ui/react';
 
 import { Modal } from '@/components/modal';
+import { emptyFunction } from '@/utils/functionUtils';
 
 interface Props {
   isOpen: boolean;
+  isLoading: boolean;
   onClose: () => void;
   name: string;
   onConfirmInclude: () => void | Promise<void>;
 }
 
 export const ConfirmInclusion = ({
   isOpen,
+  isLoading,
   onClose,
   name,
   onConfirmInclude,
@@ -20,16 +23,20 @@ export const ConfirmInclusion = ({
     <Modal
       actions={
         <Stack direction="row" spacing={2}>
-          <Button onClick={onClose} variant="secondary">
+          <Button isDisabled={isLoading} onClick={onClose} variant="secondary">
             Cancel
           </Button>
-          <Button onClick={onConfirmInclude} variant="primary">
+          <Button
+            isLoading={isLoading}
+            onClick={onConfirmInclude}
+            variant="primary"
+          >
             Include
           </Button>
         </Stack>
       }
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={isLoading ? emptyFunction : onClose}
       title={`Include ${name}?`}
     >
       <Text>Are you sure you wish to include {name}?</Text>