client-web/src/pages/Profile/DocumentsCreateModal.tsx
import * as React from "react";
import LoadingButton from "@mui/lab/LoadingButton";
import { IconButton } from "@mui/material";
import { Box } from "@mui/system";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import CloseIcon from "@mui/icons-material/Close";
import TextField from "@mui/material/TextField";
import { useFormik } from "formik";
import * as http from "../../http";
import FormHelperText from "@mui/material/FormHelperText";
type TProps = {
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
setDocuments: (Document: Object) => void;
};
export default function DocumentsCreateModal(props: TProps) {
const [loading, setLoading] = React.useState(false);
const formik = useFormik({
initialValues: {
documentName: "",
file: null,
},
validate: (values) => {
const errors: Record<string, string> = {};
if (!values.documentName) {
errors.documentName = "Required";
}
if (!values.file) {
errors.file = "Required";
}
return errors;
},
onSubmit: async (values) => {
setLoading(true);
try {
console.log(values);
const fd = new FormData();
fd.append("files", values.file);
const fileUploadResp = await http.httpWithAuth().post("/files", fd);
const fileLocation = fileUploadResp.data.results[0].location;
const documentUploadRest = await http.httpWithAuth().post("/docs", {
documentName: values.documentName,
files: [fileLocation],
});
props.setDocuments(documentUploadRest.data);
setLoading(false);
props.setOpen(false);
} catch (e) {
console.log(e);
setLoading(false);
}
},
});
return (
<Dialog onClose={() => {}} maxWidth={false} open={props.open}>
<Box style={{ width: "400px" }}>
<DialogTitle
style={{ display: "flex", justifyContent: "space-between" }}
>
Create New Document
<IconButton onClick={() => props.setOpen(false)}>
<CloseIcon />
</IconButton>
</DialogTitle>
<Box
sx={{
width: "100%",
typography: "body1",
padding: 1,
}}
>
<form style={{ flex: "1" }} onSubmit={formik.handleSubmit}>
<input
onChange={(e) => {
formik.setFieldValue("file", e.target.files[0]);
}}
type="file"
/>
{formik.touched.file && formik.errors.file ? (
<FormHelperText error>
{formik.errors.file as string}
</FormHelperText>
) : null}
<TextField
margin="dense"
inputProps={{
autoComplete: "off",
}}
label="Document Name"
name="documentName"
type="text"
fullWidth
variant="standard"
onChange={(e) => {
formik.handleChange(e);
}}
onBlur={formik.handleBlur}
error={
formik.touched.documentName &&
Boolean(formik.errors.documentName)
}
helperText={
formik.touched.documentName && formik.errors.documentName
? formik.errors.documentName
: ""
}
/>
<Box sx={{ margin: 2, display: "flex", justifyContent: "center" }}>
<LoadingButton
loading={loading}
type="submit"
variant="contained"
>
Create
</LoadingButton>
</Box>
</form>
</Box>
</Box>
</Dialog>
);
}