85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
import parse from 'html-react-parser';
|
|
import { Box, Button, Container, Stack, Typography } from '@mui/material';
|
|
import dayjs from 'dayjs';
|
|
import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
|
|
|
|
import styles from './styles';
|
|
|
|
function View({ assignment, dropzone, layoutType }) {
|
|
const {
|
|
container,
|
|
headerStack,
|
|
title,
|
|
classroomColorStack,
|
|
classroomColor,
|
|
subHeaderStack,
|
|
subHeaderTypography,
|
|
descriptionStack,
|
|
dropzoneStack,
|
|
dropzoneBox,
|
|
button,
|
|
} = styles[layoutType];
|
|
|
|
return assignment === null ? (
|
|
<h1>Loading...</h1>
|
|
) : (
|
|
<Container sx={container} disableGutters>
|
|
<Stack sx={headerStack}>
|
|
<Typography sx={title} variant="h4">
|
|
{assignment.title}
|
|
</Typography>
|
|
<Stack sx={classroomColorStack}>
|
|
{assignment.classrooms.map(c => (
|
|
<div key={c.id} style={classroomColor(c.color)}></div>
|
|
))}
|
|
<Typography variant="body1">
|
|
{assignment.classrooms.map(c => c.name).join(', ')}
|
|
</Typography>
|
|
</Stack>
|
|
<Stack sx={subHeaderStack}>
|
|
<Typography sx={subHeaderTypography} variant="body1" component="div">
|
|
<strong>Valor: </strong>
|
|
{assignment.scores.map(s => s.value).join(', ')} pts
|
|
</Typography>
|
|
<Typography sx={subHeaderTypography} variant="body1" component="div">
|
|
<strong>Data de entrega: </strong>
|
|
{capitalizeFirstLetter(
|
|
dayjs(assignment.dueDate).format('dddd, DD/MM | HH:mm[h]')
|
|
)}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
<Stack sx={descriptionStack}>
|
|
<div>{parse(assignment.description)}</div>;
|
|
</Stack>
|
|
<Stack sx={dropzoneStack} flexDirection="column" alignItems="flex-end">
|
|
{/* TODO: Create a custom component for dropzone */}
|
|
<Box
|
|
sx={dropzoneBox}
|
|
{...dropzone.getRootProps({ className: 'dropzone' })}
|
|
>
|
|
<input {...dropzone.getInputProps()} />
|
|
<Typography sx={{ padding: '15px' }} 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={button}
|
|
onClick={() => console.log('clicked')}
|
|
variant="contained"
|
|
>
|
|
Entregar
|
|
</Button>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default View;
|