Finished contact CRUD and frontend with websockets

frontend/src/pages/Contacts/ContactModal.js

@@ -12,6 +12,8 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { green } from "@material-ui/core/colors";
 
 import { makeStyles } from "@material-ui/core/styles";
 
@@ -34,6 +36,20 @@ const useStyles = makeStyles(theme => ({
 		justifyContent: "center",
 		alignItems: "center",
 	},
+
+	btnWrapper: {
+		// margin: theme.spacing(1),
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
 }));
 
 const ContactModal = ({
@@ -82,17 +98,12 @@ const ContactModal = ({
 		handleClose();
 	};
 
-	console.log(contact);
-	console.log("id", contactId);
-
 	return (
 		<div className={classes.root}>
 			<Dialog
 				open={modalOpen}
 				onClose={handleClose}
-				aria-labelledby="form-dialog-title"
 				maxWidth="lg"
-				// maxHeight="xs"
 				scroll="paper"
 				className={classes.modal}
 			>
@@ -117,7 +128,7 @@ const ContactModal = ({
 					}) => (
 						<>
 							<DialogTitle id="form-dialog-title">
-								Adicionar contato
+								{contactId ? "Editar contato" : "Adicionar contato"}
 							</DialogTitle>
 							<DialogContent dividers>
 								<Typography variant="subtitle1" gutterBottom>
@@ -215,11 +226,28 @@ const ContactModal = ({
 								</FieldArray>
 							</DialogContent>
 							<DialogActions>
-								<Button onClick={handleClose} color="secondary">
+								<Button
+									onClick={handleClose}
+									color="secondary"
+									disabled={isSubmitting}
+									variant="outlined"
+								>
 									Cancelar
 								</Button>
-								<Button onClick={handleSubmit} color="primary">
-									Adicionar
+								<Button
+									onClick={handleSubmit}
+									color="primary"
+									disabled={isSubmitting}
+									variant="contained"
+									className={classes.btnWrapper}
+								>
+									{contactId ? "Salvar" : "Adicionar"}
+									{isSubmitting && (
+										<CircularProgress
+											size={24}
+											className={classes.buttonProgress}
+										/>
+									)}
 								</Button>
 							</DialogActions>
 						</>

frontend/src/pages/Contacts/ContactsList.js

@@ -25,6 +25,9 @@ import EditIcon from "@material-ui/icons/Edit";
 import PaginationActions from "./PaginationActions";
 import api from "../../util/api";
 import ContactModal from "./ContactModal";
+import ContactsSekeleton from "./ContactsSekeleton";
+
+import ConfirmationModal from "../../components/ConfirmationModal/ConfirmationModal";
 
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
@@ -68,7 +71,7 @@ const Contacts = () => {
 	const classes = useStyles();
 
 	const token = localStorage.getItem("token");
-	const userId = localStorage.getItem("userId");
+	// const userId = localStorage.getItem("userId");
 
 	const [loading, setLoading] = useState(true);
 	const [page, setPage] = useState(0);
@@ -80,6 +83,9 @@ const Contacts = () => {
 
 	const [modalOpen, setModalOpen] = useState(false);
 
+	const [deletingContact, setDeletingContact] = useState(null);
+	const [confirmOpen, setConfirmOpen] = useState(false);
+
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
@@ -108,6 +114,10 @@ const Contacts = () => {
 			if (data.action === "update" || data.action === "create") {
 				updateContacts(data.contact);
 			}
+
+			if (data.action === "delete") {
+				deleteContact(data.contactId);
+			}
 		});
 
 		return () => {
@@ -128,6 +138,18 @@ const Contacts = () => {
 		});
 	};
 
+	const deleteContact = contactId => {
+		setContacts(prevState => {
+			const contactIndex = prevState.findIndex(c => c.id === +contactId);
+
+			if (contactIndex === -1) return prevState;
+
+			const aux = [...prevState];
+			aux.splice(contactIndex, 1);
+			return aux;
+		});
+	};
+
 	const handleChangePage = (event, newPage) => {
 		setPage(newPage);
 	};
@@ -156,6 +178,11 @@ const Contacts = () => {
 		setModalOpen(true);
 	};
 
+	const handleDeleteContact = async contactId => {
+		await api.delete(`/contacts/${contactId}`);
+		setDeletingContact(null);
+	};
+
 	return (
 		<Container className={classes.mainContainer}>
 			<ContactModal
@@ -165,6 +192,15 @@ const Contacts = () => {
 				aria-labelledby="form-dialog-title"
 				contactId={selectedContactId}
 			></ContactModal>
+			<ConfirmationModal
+				title={deletingContact && `Deletar ${deletingContact.name}`}
+				open={confirmOpen}
+				setOpen={setConfirmOpen}
+				onConfirm={e => handleDeleteContact(deletingContact.id)}
+			>
+				Tem certeza que deseja deletar este contato? Todos os tickets
+				relacionados serão perdidos.
+			</ConfirmationModal>
 			<div className={classes.contactsHeader}>
 				<Typography variant="h5" gutterBottom>
 					Contatos
@@ -204,27 +240,40 @@ const Contacts = () => {
 						</TableRow>
 					</TableHead>
 					<TableBody>
-						{contacts.map(contact => (
-							<TableRow key={contact.id}>
-								<TableCell style={{ paddingRight: 0 }}>
-									{<Avatar src={contact.profilePicUrl} />}
-								</TableCell>
-								<TableCell>{contact.name}</TableCell>
-								<TableCell>{contact.number}</TableCell>
-								<TableCell>{contact.updatedAt}</TableCell>
-								<TableCell align="right">
-									<IconButton
-										size="small"
-										onClick={() => hadleEditContact(contact.id)}
-									>
-										<EditIcon />
-									</IconButton>
-									<IconButton size="small">
-										<DeleteOutlineIcon />
-									</IconButton>
-								</TableCell>
-							</TableRow>
-						))}
+						{loading ? (
+							<ContactsSekeleton />
+						) : (
+							<>
+								{contacts.map(contact => (
+									<TableRow key={contact.id}>
+										<TableCell style={{ paddingRight: 0 }}>
+											{<Avatar src={contact.profilePicUrl} />}
+										</TableCell>
+										<TableCell>{contact.name}</TableCell>
+										<TableCell>{contact.number}</TableCell>
+										<TableCell>{contact.email}</TableCell>
+										<TableCell align="right">
+											<IconButton
+												size="small"
+												onClick={() => hadleEditContact(contact.id)}
+											>
+												<EditIcon />
+											</IconButton>
+
+											<IconButton
+												size="small"
+												onClick={e => {
+													setConfirmOpen(true);
+													setDeletingContact(contact);
+												}}
+											>
+												<DeleteOutlineIcon />
+											</IconButton>
+										</TableCell>
+									</TableRow>
+								))}
+							</>
+						)}
 					</TableBody>
 					<TableFooter>
 						<TableRow>

frontend/src/pages/Contacts/ContactsSekeleton.js

@@ -0,0 +1,163 @@
+import React from "react";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Skeleton from "@material-ui/lab/Skeleton";
+
+const ContactsSekeleton = () => {
+	return (
+		<>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={90} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={55} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={60} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={100} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={90} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={55} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={60} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={100} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={90} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={55} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={60} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={100} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={90} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={55} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={60} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={100} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={80} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={70} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={90} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell style={{ paddingRight: 0 }}>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={55} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={60} />
+				</TableCell>
+				<TableCell>
+					<Skeleton animation="wave" height={20} width={100} />
+				</TableCell>
+				<TableCell align="right"></TableCell>
+			</TableRow>
+		</>
+	);
+};
+
+export default ContactsSekeleton;