leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Include dropzone to assignment screen

Browse source
This commit is contained in:
Leonardo Murça 2022-09-16 21:17:56 -03:00
parent aca64c62b8
commit c2dbf5b716
4 changed files with 94 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

34
src/screens/Assignment/View.js
View file

@ -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"
justifyContent="flex-end"
flexDirection="column"
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"
>

6
src/screens/Assignment/index.js
View file

@ -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;