Include dropzone to assignment screen

package-lock.json

@@ -19,6 +19,7 @@
         "html-react-parser": "^3.0.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-dropzone": "^14.2.2",
         "react-number-format": "^5.0.0-beta.4",
         "react-pdf": "^5.7.2",
         "react-router-dom": "^6.3.0",
@@ -4595,6 +4596,14 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.7",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
@@ -7429,6 +7438,17 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -12429,6 +12449,22 @@
         "react": "^18.1.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.2.tgz",
+      "integrity": "sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -18506,6 +18542,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.7",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
@@ -20588,6 +20629,14 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -24067,6 +24116,16 @@
         "scheduler": "^0.22.0"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.2.tgz",
+      "integrity": "sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",

package.json

@@ -14,6 +14,7 @@
     "html-react-parser": "^3.0.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-dropzone": "^14.2.2",
     "react-number-format": "^5.0.0-beta.4",
     "react-pdf": "^5.7.2",
     "react-router-dom": "^6.3.0",

src/screens/Assignment/View.js

@@ -1,9 +1,9 @@
 import parse from 'html-react-parser';
-import { Button, Container, Stack, Typography } from '@mui/material';
+import { Box, Button, Container, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
 
-function View({ assignment, layoutType }) {
+function View({ assignment, dropzone, layoutType }) {
   return assignment === null ? (
     <h1>Loading...</h1>
   ) : (
@@ -60,11 +60,35 @@ function View({ assignment, layoutType }) {
           paddingTop: '30px',
           paddingBottom: '30px',
         }}
-        flexDirection="row"
+        flexDirection="column"
-        justifyContent="flex-end"
+        alignItems="flex-end"
       >
+        {/* TODO: Create a custom component for dropzone */}
+        <Box
+          sx={{
+            width: '100%',
+            height: '150px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '2px dashed black',
+          }}
+          {...dropzone.getRootProps({ className: 'dropzone' })}
+        >
+          <input {...dropzone.getInputProps()} />
+          <Typography variant="body1" component="div">
+            Clique ou arraste um arquivo até aqui
+          </Typography>
+        </Box>
+        <ul>
+          {dropzone.acceptedFiles.map(file => (
+            <li key={file.path}>
+              {file.path} - {file.size} bytes
+            </li>
+          ))}
+        </ul>
         <Button
-          sx={{ width: '30%' }}
+          sx={{ width: '30%', marginTop: '20px' }}
           onClick={() => console.log('clicked')}
           variant="contained"
         >

src/screens/Assignment/index.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 import { useParams } from 'react-router-dom';
 import { useUser } from '../../context/user';
 import useLayoutType from '../../hooks/useLayoutType';
@@ -9,6 +10,7 @@ function Assignment() {
   const layoutType = useLayoutType();
   const { fetchAssignmentById } = useUser();
   const [assignment, setAssignment] = useState(null);
+  const dropzone = useDropzone({ maxFiles: 5 });
 
   useEffect(() => {
     async function getAssignmentById(assignmentId) {
@@ -27,7 +29,9 @@ function Assignment() {
     updateDocumentTitle();
   }, [params, fetchAssignmentById, assignment]);
 
-  return <View assignment={assignment} layoutType={layoutType} />;
+  return (
+    <View assignment={assignment} dropzone={dropzone} layoutType={layoutType} />
+  );
 }
 
 export default Assignment;