Refactor users page and users

trento-project · Apr 25, 2024 · f476d16 · f476d16
1 parent d248360
commit f476d16
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 102 deletions.
diff --git a/assets/js/common/Button/Button.jsx b/assets/js/common/Button/Button.jsx
@@ -28,10 +28,6 @@ const getButtonClasses = (type) => {
       return 'bg-white hover:opacity-75 focus:outline-none text-red-500 border border-red-500 transition ease-in duration-200 text-center font-semibold rounded shadow';
     case 'danger-bold':
       return 'bg-red-500 hover:opacity-75 focus:outline-none text-white border border-red-500 transition ease-in duration-200 text-center font-semibold rounded shadow';
-    case 'danger-no-border':
-      return 'bg-none hover:opacity-75 focus:outline-none text-red-500 border border-none transition ease-in duration-200 text-center font-semibold';
-    case 'danger-op-50-no-border':
-      return 'text-red-500  opacity-50';
     default:
       return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-full transition ease-in duration-200 text-center font-semibold rounded shadow disabled:bg-gray-400 disabled:text-gray-200';
   }

diff --git a/assets/js/lib/api/users.js b/assets/js/lib/api/users.js
@@ -2,4 +2,4 @@ import { networkClient } from '@lib/network';
 
 export const listUsers = () => networkClient.get('/users');
 
-export const deleteUser = (userId) => networkClient.delete(`/users/${userId}`);
+export const deleteUser = (userID) => networkClient.delete(`/users/${userID}`);
diff --git a/assets/js/lib/test-utils/factories/users.js b/assets/js/lib/test-utils/factories/users.js
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
 

diff --git a/assets/js/pages/Layout/Layout.jsx b/assets/js/pages/Layout/Layout.jsx
@@ -48,7 +48,11 @@ const navigation = [
     href: '/catalog',
     icon: EOS_LIST,
   },
-  { name: 'Users', href: '/users', icon: EOS_SUPERVISED_USER_CIRCLE_OUTLINED },
+  {
+    name: 'Users',
+    href: '/users',
+    icon: EOS_SUPERVISED_USER_CIRCLE_OUTLINED,
+  },
   {
     name: 'Settings',
     href: '/settings',

diff --git a/assets/js/pages/Users/Users.jsx b/assets/js/pages/Users/Users.jsx
@@ -1,25 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { noop, find } from 'lodash';
+import { format, parseISO } from 'date-fns';
+
 import Button from '@common/Button';
 import Table from '@common/Table';
 import PageHeader from '@common/PageHeader';
 import Modal from '@common/Modal';
 import Tooltip from '@common/Tooltip';
 import Banner from '@common/Banners/Banner';
-import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
-const USER_CREATE_ROUTE = '/users/new';
+const defaultUsers = [];
+
+function getUserByID(users, userID) {
+  return find(users, { id: userID }) || null;
+}
 
 function Users({
-  handleDeleteUser = () => {},
-  navigate = () => {},
-  setModalOpen = () => {},
-  setDeleteUserId = () => {},
-  deleteUserId = 0,
-  modalOpen = false,
-  users = [],
+  onDeleteUser = noop,
+  navigate = noop,
+  users = defaultUsers,
   loading = false,
 }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deleteUserID, setDeleteUserID] = useState(null);
+
   const usersTableConfig = {
     pagination: true,
     usePadding: false,
@@ -47,79 +52,44 @@ function Users({
       {
         title: 'Status',
         key: 'enabled',
+        render: (content, item) => (item.enabled ? 'Enabled' : 'Disabled'),
       },
       {
         title: 'Created',
-        key: 'created',
+        key: 'created_at',
+        render: (content, item) =>
+          format(parseISO(item.created_at), 'MMMM dd, yyyy'),
       },
-
       {
         title: 'Actions',
         key: 'actions',
         render: (content, item) => (
-          <>
-            {item.id !== 1 ? (
+          <div>
+            <Tooltip
+              content="Admin user can not be deleted"
+              isEnabled={item.id === 1}
+            >
               <Button
-                type="danger-no-border"
+                className="text-red-500"
+                size="small"
+                type="transparent"
+                disabled={item.id === 1}
                 onClick={() => {
                   setModalOpen(true);
-                  setDeleteUserId(item.id);
+                  setDeleteUserID(item.id);
                 }}
               >
                 Delete
               </Button>
-            ) : (
-              <Tooltip content="Admin user can not be deleted">
-                <Button type="danger-op-50-no-border">Delete</Button>
-              </Tooltip>
-            )}
-
-            {modalOpen && deleteUserId === item.id && (
-              <Modal
-                open={modalOpen}
-                className="!w-3/4 !max-w-3xl"
-                onClose={() => setModalOpen(false)}
-                title="Delete User"
-              >
-                <div className="flex flex-col my-2">
-                  <Banner type="warning">
-                    <span className="text-sm">
-                      This Action cannot be undone
-                    </span>
-                  </Banner>
-                  <span className="my-1  text-gray-500">
-                    Are you sure you want to delete the following user account?
-                  </span>
-                  <span className="my-1 mb-4 text-gray-600">
-                    {item.username}
-                  </span>
-
-                  <div className="w-1/6 h-4/5 flex">
-                    <Button
-                      type="danger-bold"
-                      className=" mr-4"
-                      onClick={() => handleDeleteUser(deleteUserId)}
-                    >
-                      Delete
-                    </Button>
-
-                    <Button
-                      type="primary-white"
-                      className="w-1/6"
-                      onClick={() => setModalOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                </div>
-              </Modal>
-            )}
-          </>
+            </Tooltip>
+          </div>
         ),
       },
     ],
   };
 
+  const user = getUserByID(users, deleteUserID);
+
   return (
     <div className="flex flex-wrap">
       <div className="flex w-1/2 h-auto overflow-hidden overflow-ellipsis break-words">
@@ -130,23 +100,60 @@ function Users({
           <Button
             className="inline-block mx-1 border-green-500 border"
             size="small"
-            onClick={() => navigate(USER_CREATE_ROUTE)}
+            onClick={() => navigate('/users/new')}
           >
             Create User
           </Button>
         </div>
       </div>
-      {loading ? (
-        <div className="flex flex-col items-center justify-center w-full">
-          <EOS_LOADING_ANIMATED
-            size="xxl"
-            className="inline align-bottom fill-green-400"
-          />
-          Loading...
-        </div>
-      ) : (
-        <Table config={usersTableConfig} data={users} />
+      {modalOpen && (
+        <Modal
+          open={modalOpen}
+          className="!w-3/4 !max-w-3xl"
+          onClose={() => setModalOpen(false)}
+          title="Delete User"
+        >
+          <div className="flex flex-col my-2">
+            <Banner type="warning">
+              <span className="text-sm">This Action cannot be undone</span>
+            </Banner>
+            <span className="my-1  text-gray-500">
+              Are you sure you want to delete the following user account?
+            </span>
+            {user ? (
+              <span className="my-1 mb-4 text-gray-600">{user.username}</span>
+            ) : (
+              <span className="my-1 mb-4 text-gray-600">User not found</span>
+            )}
+
+            <div className="w-1/6 h-4/5 flex">
+              <Button
+                type="danger-bold"
+                className=" mr-4"
+                onClick={() => {
+                  onDeleteUser(deleteUserID);
+                  setModalOpen(false);
+                }}
+              >
+                Delete
+              </Button>
+
+              <Button
+                type="primary-white"
+                className="w-1/6"
+                onClick={() => setModalOpen(false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </Modal>
       )}
+      <Table
+        config={usersTableConfig}
+        data={users}
+        emptyStateText={loading ? 'Loading...' : 'No data available'}
+      />
     </div>
   );
 }

diff --git a/assets/js/pages/Users/Users.stories.jsx b/assets/js/pages/Users/Users.stories.jsx
@@ -22,10 +22,10 @@ export default {
     },
   },
   argTypes: {
-    handleDeleteUser: {
+    onDeleteUser: {
       description: 'Function to handle deleting a user',
       control: { type: 'function' },
-      action: 'handleDeleteUser',
+      action: 'onDeleteUser',
     },
     navigate: {
       description: 'Function to navigate pages',

diff --git a/assets/js/pages/Users/UsersPage.jsx b/assets/js/pages/Users/UsersPage.jsx
@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { listUsers, deleteUser } from '@lib/api/users';
-import { format, parseISO } from 'date-fns';
 
 import { toast } from 'react-hot-toast';
 
 import Users from './Users';
 
+const successDeleteMessage = 'User deleted successfully';
+const errorLoadingMessage = 'An error occurred during loading users';
+const errorDeletingMessage = 'An error occurred during deleting user';
+
 function UsersPage() {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [deleteUserId, setDeleteUserId] = useState(null);
-  const [userUpdateTrigger, setUserUpdateTrigger] = useState(false);
   const [loading, setLoading] = useState(false);
   const [userData, setUserData] = useState([]);
   const [error, setError] = useState(null);
@@ -22,29 +22,30 @@ function UsersPage() {
     listUsers()
       .then((response) => {
         setUserData(response.data);
-        setLoading(false);
       })
       .catch((_error) => {
-        setError('An error occurred during loading users');
+        setError(errorLoadingMessage);
         setUserData([]);
+      })
+      .finally(() => {
         setLoading(false);
       });
   };
 
-  const handleDeleteUser = (userId) => {
+  const onDeleteUser = (userId) => {
     deleteUser(userId)
       .then(() => {
-        setUserUpdateTrigger(true);
+        fetchUsers();
+        toast.success(successDeleteMessage);
       })
       .catch((_error) => {
-        setError('An error occurred during deleting user');
+        setError(errorDeletingMessage);
       });
   };
 
   useEffect(() => {
     fetchUsers();
-    setUserUpdateTrigger(false);
-  }, [userUpdateTrigger]);
+  }, []);
 
   useEffect(() => {
     if (error) {
@@ -57,22 +58,17 @@ function UsersPage() {
     ({ id, username, created_at, enabled, fullname, email }) => ({
       id,
       username,
-      created: format(parseISO(created_at), 'MMMM dd, yyyy'),
-      actions: 'Delete',
-      enabled: enabled ? 'Enabled' : 'Disabled',
+      created_at,
+      enabled,
       fullname,
       email,
     })
   );
 
   return (
     <Users
-      handleDeleteUser={handleDeleteUser}
+      onDeleteUser={onDeleteUser}
       navigate={navigate}
-      setModalOpen={setModalOpen}
-      setDeleteUserId={setDeleteUserId}
-      deleteUserId={deleteUserId}
-      modalOpen={modalOpen}
       users={usersTableData}
       loading={loading}
     />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@ import { networkClient } from '@lib/network';

		export const listUsers = () => networkClient.get('/users');

		export const deleteUser = (userId) => networkClient.delete(`/users/${userId}`);
		export const deleteUser = (userID) => networkClient.delete(`/users/${userID}`);