feat: Edit User

package.json

@@ -16,6 +16,7 @@
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
     "styled-components": "^6.0.6",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

src/App.js

@@ -5,6 +5,7 @@ import {
   ThemeProvider,
 } from "@mui/material";
 import { RecoilRoot } from "recoil";
+
 import theme from "./theme";
 import { HomeScreen } from "./screens";
 

src/constants/constants.js

@@ -0,0 +1,17 @@
+export const ADMIN = "admin";
+export const USER = "user";
+export const PARTNER = "partner";
+export const ANALYST = "analyst";
+
+export const ROLES = [ADMIN, USER, PARTNER, ANALYST];
+
+export const ACTIVE = "active";
+export const INACTIVE = "inactive";
+
+export const initialUser = {
+  id: "",
+  username: "",
+  role: USER,
+  email: "",
+  status: ACTIVE,
+};

src/dummy_data.json

@@ -0,0 +1,74 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "username": "user1",
+      "role": "admin",
+      "email": "user1@example.com",
+      "status": "active"
+    },
+    {
+      "id": 2,
+      "username": "user2",
+      "role": "user",
+      "email": "user2@example.com",
+      "status": "active"
+    },
+    {
+      "id": 3,
+      "username": "user3",
+      "role": "user",
+      "email": "user3@example.com",
+      "status": "inactive"
+    },
+    {
+      "id": 4,
+      "username": "user4",
+      "role": "user",
+      "email": "user4@example.com",
+      "status": "active"
+    },
+    {
+      "id": 5,
+      "username": "user5",
+      "role": "user",
+      "email": "user5@example.com",
+      "status": "inactive"
+    },
+    {
+      "id": 6,
+      "username": "user6",
+      "role": "user",
+      "email": "user6@example.com",
+      "status": "active"
+    },
+    {
+      "id": 7,
+      "username": "user7",
+      "role": "user",
+      "email": "user7@example.com",
+      "status": "active"
+    },
+    {
+      "id": 8,
+      "username": "user8",
+      "role": "user",
+      "email": "user8@example.com",
+      "status": "inactive"
+    },
+    {
+      "id": 9,
+      "username": "user9",
+      "role": "user",
+      "email": "user9@example.com",
+      "status": "active"
+    },
+    {
+      "id": 10,
+      "username": "user10",
+      "role": "user",
+      "email": "user10@example.com",
+      "status": "inactive"
+    }
+  ]
+}

src/recoil/atoms/editUserState.js

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { initialUser } from "../../constants/constants";
+
+export const editUserState = atom({
+  key: "editUser",
+  default: initialUser,
+});

src/recoil/atoms/usersState.js

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import data from "../../dummy_data.json";
+
+export const usersState = atom({
+  key: "users",
+  default: data.users,
+});

src/recoil/selectors/activeUsersState.js

@@ -0,0 +1,10 @@
+import { selector } from "recoil";
+import { usersState } from "../atoms/usersState";
+import { ACTIVE } from "../../constants/constants";
+
+const activeUsersState = selector({
+  key: "activeUsers",
+  get: ({ get }) => get(usersState).filter((user) => user.status === ACTIVE),
+});
+
+export default activeUsersState;

src/recoil/selectors/inactiveUsersState.js

@@ -0,0 +1,10 @@
+import { selector } from "recoil";
+import { usersState } from "../atoms/usersState";
+import { INACTIVE } from "../../constants/constants";
+
+const inactiveUsersState = selector({
+  key: "inactiveUsers",
+  get: ({ get }) => get(usersState).filter((user) => user.status === INACTIVE),
+});
+
+export default inactiveUsersState;

src/screens/home/ActiveUsers.js

@@ -9,10 +9,21 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
-
 import { Edit as EditIcon, Delete as DeleteIcon } from "@mui/icons-material";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+// recoil state
+import activeUsersState from "../../recoil/selectors/activeUsersState";
+import { editUserState } from "../../recoil/atoms/editUserState";
+
+const ActiveUsers = () => {
+  const activeUsers = useRecoilValue(activeUsersState);
+
+  const setEditUser = useSetRecoilState(editUserState);
+
+  const handleOnClickEditBtn = (user) => {
+    setEditUser(user);
+  };
 
-const ActiveUsers = ({ users }) => {
   return (
     <Table>
       <TableHead>
@@ -31,39 +42,37 @@ const ActiveUsers = ({ users }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {users
-          ?.filter((user) => user.status === "active")
-          .map((user) => (
-            <TableRow key={user.id}>
-              <TableCell>
-                <Typography>{user.username}</Typography>
-                <Typography variant="caption" letterSpacing={1}>
-                  {user.email}
-                </Typography>
-              </TableCell>
-              <TableCell>{user.role}</TableCell>
-              <TableCell align="center">
-                <Badge
-                  badgeContent={user.status}
-                  color="primary"
-                  sx={{
-                    textTransform: "capitalize",
-                    ".MuiBadge-badge": { fontWeight: 700 },
-                  }}
-                />
-              </TableCell>
-              <TableCell>
-                <IconButton>
-                  <EditIcon />
-                </IconButton>
-              </TableCell>
-              <TableCell>
-                <IconButton>
-                  <DeleteIcon />
-                </IconButton>
-              </TableCell>
-            </TableRow>
-          ))}
+        {activeUsers.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell>
+              <Typography>{user.username}</Typography>
+              <Typography variant="caption" letterSpacing={1}>
+                {user.email}
+              </Typography>
+            </TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell align="center">
+              <Badge
+                badgeContent={user.status}
+                color="primary"
+                sx={{
+                  textTransform: "capitalize",
+                  ".MuiBadge-badge": { fontWeight: 700 },
+                }}
+              />
+            </TableCell>
+            <TableCell>
+              <IconButton onClick={() => handleOnClickEditBtn(user)}>
+                <EditIcon />
+              </IconButton>
+            </TableCell>
+            <TableCell>
+              <IconButton>
+                <DeleteIcon />
+              </IconButton>
+            </TableCell>
+          </TableRow>
+        ))}
       </TableBody>
     </Table>
   );

src/screens/home/AddUser.js

@@ -1,8 +1,53 @@
-import { Button, Stack, TextField, Typography } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import {
+  Autocomplete,
+  Button,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { v4 as uuidv4 } from "uuid";
+// constants
+import {
+  ACTIVE,
+  INACTIVE,
+  ROLES,
+  initialUser,
+} from "../../constants/constants";
+// recoil state
+import { usersState } from "../../recoil/atoms/usersState";
+import { editUserState } from "../../recoil/atoms/editUserState";
+
+const AddUser = () => {
+  const [users, setUsers] = useRecoilState(usersState);
+
+  const [user, setUser] = useState(initialUser);
+
+  const editUser = useRecoilValue(editUserState);
+
+  const createUser = () => {
+    if (users.some((ele) => ele.email === user.email)) {
+      alert("Email already exist");
+    } else {
+      const uniqueId = uuidv4();
+      setUsers((users) => [...users, { ...user, id: uniqueId }]);
+      setUser(initialUser);
+    }
+  };
+
+  const updateUser = () => {
+    setUsers(users.map((ele) => (ele.id === user.id ? user : ele)));
+    setUser(initialUser);
+  };
+
+  useEffect(() => {
+    setUser(editUser);
+  }, [editUser]);
 
-const AddUser = (props) => {
-  const { id } = props;
   return (
     <Stack spacing={3}>
       <Typography
@@ -13,15 +58,50 @@ const AddUser = (props) => {
         borderBottom={"1px solid #515151"}
         textAlign="center"
       >
-        {id ? "Update" : "Add"} User
+        {user?.id ? "Update" : "Add"} User
       </Typography>
-      <TextField name="username" label="Username" />
-      <TextField name="email" label="Email" />
-      <TextField name="role" label="Role" />
-      <TextField name="status" label="Status" />
-      <Button variant="contained" sx={{ width: 100 }}>
-        {id ? "Update" : "Save"}
-      </Button>
+      <TextField
+        name="username"
+        label="Username"
+        value={user.username}
+        onChange={(e) => setUser({ ...user, username: e.target.value })}
+      />
+      <TextField
+        name="email"
+        label="Email"
+        value={user.email}
+        onChange={(e) => setUser({ ...user, email: e.target.value })}
+      />
+      <Autocomplete
+        options={ROLES}
+        value={user.role}
+        onChange={(e, value) => setUser({ ...user, role: value })}
+        renderInput={(params) => <TextField {...params} label="Role" />}
+        fullWidth
+      />
+      <RadioGroup
+        row
+        aria-labelledby="user-status-group-label"
+        name="user-status-buttons-group"
+        defaultValue={ACTIVE}
+        onChange={(e) => setUser({ ...user, status: e.target.value })}
+      >
+        <FormControlLabel value={ACTIVE} control={<Radio />} label="Active" />
+        <FormControlLabel
+          value={INACTIVE}
+          control={<Radio />}
+          label="Inactive"
+        />
+      </RadioGroup>
+      {user?.id ? (
+        <Button variant="contained" sx={{ width: 100 }} onClick={updateUser}>
+          Update
+        </Button>
+      ) : (
+        <Button variant="contained" sx={{ width: 100 }} onClick={createUser}>
+          Save
+        </Button>
+      )}
     </Stack>
   );
 };