Merge pull request #108 from uwblueprint/david/fix-file-upload-for-events

Fix File Upload for Absences

Author: ChinemeremChigbo

src/components/DeclareAbsenceForm.tsx

@@ -271,7 +271,12 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
           <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
         </FormControl>
 
-        <FileUpload lessonPlan={lessonPlan} setLessonPlan={setLessonPlan} />
+        <FormControl>
+          <Text textStyle="h4" mb={2}>
+            Lesson Plan
+          </Text>
+          <FileUpload lessonPlan={lessonPlan} setLessonPlan={setLessonPlan} />
+        </FormControl>
 
         <FormControl>
           <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>

src/components/EditAbsenceForm.tsx

@@ -274,11 +274,16 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
           <FormErrorMessage>{errors.reasonOfAbsence}</FormErrorMessage>
         </FormControl>
 
-        <FileUpload
-          lessonPlan={lessonPlan}
-          setLessonPlan={setLessonPlan}
-          existingFile={existingLessonPlan}
-        />
+        <FormControl>
+          <Text textStyle="h4" mb={2}>
+            Lesson Plan
+          </Text>
+          <FileUpload
+            lessonPlan={lessonPlan}
+            setLessonPlan={setLessonPlan}
+            existingFile={existingLessonPlan}
+          />
+        </FormControl>
 
         <FormControl>
           <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>

src/components/FileUpload.tsx

@@ -1,26 +1,19 @@
-import {
-  Box,
-  FormControl,
-  Image,
-  Input,
-  Text,
-  useToast,
-} from '@chakra-ui/react';
+import { Box, Image, Input, Text, useToast } from '@chakra-ui/react';
 import { LessonPlanFile } from '@utils/types';
 import { useRef, useState } from 'react';
 
 interface FileUploadProps {
   lessonPlan: File | null;
   setLessonPlan: (file: File | null) => void;
   existingFile?: LessonPlanFile | null;
-  label?: string;
+  isDisabled?: boolean;
 }
 
 export const FileUpload: React.FC<FileUploadProps> = ({
   lessonPlan,
   setLessonPlan,
   existingFile,
-  label = 'Lesson Plan',
+  isDisabled,
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -34,51 +27,63 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         title: 'Invalid File Type',
         description: 'Please upload a valid PDF file.',
         status: 'error',
-        duration: 4000,
+        duration: 5000,
         isClosable: true,
       });
     }
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const file = e.target.files[0];
+    if (isDisabled) return;
+
+    const file = e.target.files?.[0];
+    if (file) {
       validateAndSetFile(file);
     }
   };
 
   const handleDragOver = (e: React.DragEvent) => {
+    if (isDisabled) return;
     e.preventDefault();
     setIsDragging(true);
   };
 
   const handleDragLeave = () => {
+    if (isDisabled) return;
     setIsDragging(false);
   };
 
   const handleDrop = (e: React.DragEvent) => {
+    if (isDisabled) return;
     e.preventDefault();
     setIsDragging(false);
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      const file = e.dataTransfer.files[0];
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
       validateAndSetFile(file);
     }
   };
 
   return (
-    <FormControl>
-      <Text textStyle="h4" mb={2}>
-        {label}
-      </Text>
+    <>
       <Box
         as="label"
         htmlFor="fileUpload"
         border="1px dashed"
-        borderColor={isDragging ? 'primaryBlue.300' : 'outline'}
+        borderColor={
+          isDisabled
+            ? 'neutralGray.300'
+            : isDragging
+              ? 'primaryBlue.300'
+              : 'outline'
+        }
+        bg={isDisabled ? 'neutralGray.50' : 'transparent'}
+        opacity={isDisabled ? 0.6 : 1}
+        pointerEvents={isDisabled ? 'none' : 'auto'}
         borderRadius="10px"
         p={5}
         textAlign="center"
-        cursor="pointer"
+        cursor={isDisabled ? 'not-allowed' : 'pointer'}
         display="flex"
         flexDirection="column"
         alignItems="center"
@@ -105,7 +110,8 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         onChange={handleFileChange}
         accept="application/pdf"
         display="none"
+        disabled={isDisabled}
       />
-    </FormControl>
+    </>
   );
 };

src/components/LessonPlanView.tsx

@@ -13,6 +13,7 @@ import { LessonPlanFile } from '@utils/types';
 import { uploadFile } from '@utils/uploadFile';
 import { useEffect, useRef, useState } from 'react';
 import { FiFileText } from 'react-icons/fi';
+import { FileUpload } from './FileUpload';
 
 const formatFileSize = (sizeInBytes: number) => {
   if (sizeInBytes === 0) return '0 B';
@@ -127,21 +128,6 @@ const NoLessonPlanViewingDisplay = ({
   );
 };
 
-const NoLessonPlanDeclaredDisplay = () => {
-  const theme = useTheme();
-
-  return (
-    <Flex width="100%">
-      <Text
-        fontSize={theme.textStyles.body.fontSize}
-        color={theme.colors.neutralGray[500]}
-      >
-        Upload PDF component
-      </Text>
-    </Flex>
-  );
-};
-
 const LessonPlanView = ({
   lessonPlan,
   absentTeacherFirstName,
@@ -168,8 +154,7 @@ const LessonPlanView = ({
     fileInputRef.current?.click();
   };
 
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
+  const handleFileUpload = async (file: File) => {
     if (!file || file.type !== 'application/pdf') return;
 
     setIsUploading(true);
@@ -248,11 +233,21 @@ const LessonPlanView = ({
         ref={fileInputRef}
         display="none"
         accept="application/pdf"
-        onChange={handleFileChange}
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            handleFileUpload(file);
+          }
+        }}
       />
     </>
   ) : isUserAbsentTeacher && !isAdminMode ? (
-    <NoLessonPlanDeclaredDisplay />
+    <FileUpload
+      lessonPlan={null}
+      setLessonPlan={handleFileUpload}
+      existingFile={null}
+      isDisabled={isUploading}
+    />
   ) : (
     <NoLessonPlanViewingDisplay
       absentTeacherFirstName={absentTeacherFirstName}