feat: added users page

frontend/src/components/UserModal/index.js

@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+
+// import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+	},
+	textField: {
+		// marginLeft: theme.spacing(1),
+		marginRight: theme.spacing(1),
+		// width: "25ch",
+		flex: 1,
+	},
+
+	btnWrapper: {
+		// margin: theme.spacing(1),
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+	formControl: {
+		margin: theme.spacing(1),
+		minWidth: 120,
+	},
+}));
+
+const UserSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	password: Yup.string().min(5, "Too Short!").max(50, "Too Long!"),
+	email: Yup.string().email("Invalid email").required("Required"),
+});
+
+const UserModal = ({ open, onClose, userId }) => {
+	const classes = useStyles();
+
+	const initialState = {
+		name: "",
+		email: "",
+		password: "",
+		profile: "user",
+	};
+
+	const [user, setUser] = useState(initialState);
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			if (!userId) return;
+			const { data } = await api.get(`/users/${userId}`);
+			setUser(prevState => {
+				return { ...prevState, ...data };
+			});
+		};
+
+		fetchUser();
+	}, [userId, open]);
+
+	const handleClose = () => {
+		onClose();
+		setUser(initialState);
+	};
+
+	const handleSaveUser = async values => {
+		try {
+			if (userId) {
+				await api.put(`/users/${userId}`, values);
+			} else {
+				await api.post("/users", values);
+			}
+		} catch (err) {
+			alert(JSON.stringify(err.response.data, null, 2));
+			console.log(err);
+		}
+		handleClose();
+	};
+
+	return (
+		<div className={classes.root}>
+			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+				<DialogTitle id="form-dialog-title">
+					{userId ? `Edit User` : `New User`}
+				</DialogTitle>
+				<Formik
+					initialValues={user}
+					enableReinitialize={true}
+					validationSchema={UserSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSaveUser(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ touched, errors, isSubmitting }) => (
+						<Form>
+							<DialogContent dividers>
+								<Field
+									as={TextField}
+									label="Name"
+									name="name"
+									error={touched.name && Boolean(errors.name)}
+									helperText={touched.name && errors.name}
+									variant="outlined"
+									margin="dense"
+									className={classes.textField}
+								/>
+								<Field
+									as={TextField}
+									label="Email"
+									name="email"
+									error={touched.email && Boolean(errors.email)}
+									helperText={touched.email && errors.email}
+									variant="outlined"
+									margin="dense"
+								/>
+								<div>
+									<Field
+										as={TextField}
+										label="New Password"
+										type="password"
+										name="password"
+										error={touched.password && Boolean(errors.password)}
+										helperText={touched.password && errors.password}
+										variant="outlined"
+										margin="dense"
+									/>
+									<FormControl
+										variant="outlined"
+										className={classes.formControl}
+										margin="dense"
+									>
+										<InputLabel id="profile-selection-input-label">
+											Profile
+										</InputLabel>
+										<Field
+											as={Select}
+											label="Profile"
+											name="profile"
+											labelId="profile-selection-label"
+											id="profile-selection"
+											required
+										>
+											<MenuItem value="admin">Admin</MenuItem>
+											<MenuItem value="user">User</MenuItem>
+										</Field>
+									</FormControl>
+								</div>
+							</DialogContent>
+							<DialogActions>
+								<Button
+									onClick={handleClose}
+									color="secondary"
+									disabled={isSubmitting}
+									variant="outlined"
+								>
+									Cancel
+								</Button>
+								<Button
+									type="submit"
+									color="primary"
+									disabled={isSubmitting}
+									variant="contained"
+									className={classes.btnWrapper}
+								>
+									{"Ok"}
+									{isSubmitting && (
+										<CircularProgress
+											size={24}
+											className={classes.buttonProgress}
+										/>
+									)}
+								</Button>
+							</DialogActions>
+						</Form>
+					)}
+				</Formik>
+			</Dialog>
+		</div>
+	);
+};
+
+export default UserModal;