Layout : Added Edit User Details Dialog & Confirm Delete Dialog

frontend/package.json

@@ -7,6 +7,7 @@
     "@iconify/react": "^3.1.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",

frontend/src/App.js

@@ -16,7 +16,6 @@ function App() {
         <Route exact path="/" component={Map}/>
         <Route exact path="/all" component={AllUsers} />
         <Route exact path="/add" component={AddUser} />
-        <Route exact path="/edit/:id" component={EditUser} />
         <Route component={NotFound} />
       </Switch>
     </BrowserRouter>

frontend/src/Component/AllUsers.jsx

@@ -52,9 +52,10 @@ const AllUsers = () => {
           id={item._id}
           name={item.name}
           lat={item.lat}
-          long={item.lng}
+          lng={item.lng}
           phone={item.phone}
           setUsers={setUsers}
+          category={item.category}
         />
       ))}
     </div>

frontend/src/Component/EditDetailModal.jsx

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import { getUsers, editUser } from '../Service/api';
+import {
+  FormGroup,
+  FormControl,
+  InputLabel,
+  Input,
+  Button,
+  makeStyles,
+  Typography,
+  Modal,
+  Box,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  DialogTitle,
+  TextField,
+} from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+
+const useStyles = makeStyles({
+  heading: {
+    marginTop: '1rem',
+    fontFamily: 'Sora',
+    fontWeight: '600',
+    color: 'black',
+    textAlign: 'center',
+  },
+});
+
+function EditDetailModal({ user, show, setShow, setUsers, userid }) {
+  const classes = useStyles();
+  const [initData, setInitData] = useState(
+    user ? user : { name: '', lat: '', lng: '', phone: '', category: '' }
+  );
+  const [alert, setAlert] = useState({ show: false, text: '' });
+  const [loading, setloading] = useState(false);
+  useEffect(() => {
+    setInitData(user);
+  }, [user]);
+
+  const onValueChange = (k, v) => {
+    let curr = { ...initData };
+    curr[k] = v;
+    setInitData(curr);
+  };
+
+  const submitHandler = async () => {
+    if (
+      initData.name === '' ||
+      initData.lat === '' ||
+      initData.lng === '' ||
+      initData.phone === '' ||
+      initData.category === ''
+    ) {
+      setAlert({ show: true, text: 'Input fields can not be empty' });
+      return;
+    }
+    setAlert({ show: false, text: '' });
+    try {
+      setloading(true);
+      const res = await editUser(userid, initData);
+      let response = await getUsers();
+      setUsers(response.data);
+      setShow(false);
+      setloading(false);
+    } catch (error) {
+      console.log(error);
+      setloading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={show}
+      onClose={() => setShow(false)}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <Typography className={classes.heading} align="center" variant="h5">
+        Edit Details
+      </Typography>
+      <DialogContent>
+        {alert.show ? <Alert severity="error">{alert.text}</Alert> : null}
+        <FormControl fullWidth>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Name"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="name"
+            value={initData.name}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            label="Lat"
+            margin="normal"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="lat"
+            value={initData.lat}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Long"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="lng"
+            value={initData.lng}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Phone"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="phone"
+            value={initData.phone}
+            id="my-input"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            label="Category"
+            onChange={(e) => onValueChange(e.target.name, e.target.value)}
+            name="category"
+            value={initData.category}
+            id="my-input"
+          />
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          disabled={loading}
+          variant="contained"
+          onClick={() => submitHandler()}
+          color="primary"
+        >
+          Submit
+        </Button>
+        <Button
+          disabled={loading}
+          onClick={() => setShow(false)}
+          color="secondary"
+          variant="contained"
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default EditDetailModal;

frontend/src/Component/EditUser.jsx

@@ -1,80 +1,124 @@
 import { useState, useEffect } from 'react';
-import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core';
+import {
+  FormGroup,
+  FormControl,
+  InputLabel,
+  Input,
+  Button,
+  makeStyles,
+  Typography,
+} from '@material-ui/core';
 import { useHistory, useParams } from 'react-router-dom';
 import { getUsers, editUser } from '../Service/api';
 
 const initialValue = {
-    name: '',
-    lat: '',
-    lng:'',
-    phone: '',
-    category:''
-}
+  name: '',
+  lat: '',
+  lng: '',
+  phone: '',
+  category: '',
+};
 
 const useStyles = makeStyles({
-    container: {
-        width: '50%',
-        margin: '5% 0 0 25%',
-        '& > *': {
-            marginTop: 20
-        }
-    }
-})
+  container: {
+    width: '50%',
+    margin: '5% 0 0 25%',
+    '& > *': {
+      marginTop: 20,
+    },
+  },
+});
 
 const EditUser = () => {
-    const [user, setUser] = useState(initialValue);
-    const { name, lat, lng, phone , category} = user;
-    const { id } = useParams();
-    const classes = useStyles();
-    let history = useHistory();
+  const [user, setUser] = useState(initialValue);
+  const { name, lat, lng, phone, category } = user;
+  const { id } = useParams();
+  const classes = useStyles();
+  let history = useHistory();
 
-    useEffect(() => {
-        loadUserDetails();
-    }, []);
+  useEffect(() => {
+    loadUserDetails();
+  }, []);
 
-    const loadUserDetails = async() => {
-        const response = await getUsers(id);
-        setUser(response.data);
-    }
+  const loadUserDetails = async () => {
+    const response = await getUsers(id);
+    setUser(response.data);
+  };
 
-    const editUserDetails = async() => {
-        const response = await editUser(id, user);
-        history.push('/all');
-    }
+  const editUserDetails = async () => {
+    const response = await editUser(id, user);
+    history.push('/all');
+  };
 
-    const onValueChange = (e) => {
-        console.log(e.target.value);
-        setUser({...user, [e.target.name]: e.target.value})
-    }
+  const onValueChange = (e) => {
+    console.log(e.target.value);
+    setUser({ ...user, [e.target.name]: e.target.value });
+  };
 
-    return (
-        <FormGroup className={classes.container}>
-            <Typography variant="h4">Edit Information</Typography>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Name</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='name' value={name} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Username</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='lat' value={lat} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Email</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='lng' value={lng} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Phone</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='phone' value={phone} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <InputLabel htmlFor="my-input">Phone</InputLabel>
-                <Input onChange={(e) => onValueChange(e)} name='category' value={category} id="my-input" aria-describedby="my-helper-text" />
-            </FormControl>
-            <FormControl>
-                <Button variant="contained" color="primary" onClick={() => editUserDetails()}>Edit User</Button>
-            </FormControl>
-        </FormGroup>
-    )
-}
+  return (
+    <FormGroup className={classes.container}>
+      <Typography variant="h4">Edit Information</Typography>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Name</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="name"
+          value={name}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Username</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="lat"
+          value={lat}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Email</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="lng"
+          value={lng}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Phone</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="phone"
+          value={phone}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <InputLabel htmlFor="my-input">Phone</InputLabel>
+        <Input
+          onChange={(e) => onValueChange(e)}
+          name="category"
+          value={category}
+          id="my-input"
+          aria-describedby="my-helper-text"
+        />
+      </FormControl>
+      <FormControl>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => editUserDetails()}
+        >
+          Edit User
+        </Button>
+      </FormControl>
+    </FormGroup>
+  );
+};
 
-export default EditUser;
+export default EditUser;