Loaders and delete user confirmation

src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -7,9 +7,10 @@ type ConfirmationModalProps = {
   onClose: () => void;
   title: string;
   body: string;
+  onDeleteAction?: () => void;
 };
 
-export const ConfirmationModal = ({ open, onClose, title, body }: ConfirmationModalProps) => {
+export const ConfirmationModal = ({ open, onClose, title, body, onDeleteAction }: ConfirmationModalProps) => {
   const cancelButtonRef = useRef(null);
 
   return (
@@ -67,7 +68,7 @@ export const ConfirmationModal = ({ open, onClose, title, body }: ConfirmationMo
                 <button
                   type="button"
                   className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                  onClick={onClose}
+                  onClick={onDeleteAction}
                 >
                   Delete
                 </button>

src/components/Table/Table.tsx

@@ -9,6 +9,7 @@ export interface ReactTableProps<T extends Record<string, unknown>> {
   pagination?: boolean;
   getSelectedRowIds?(rows: Record<IdType<T>, boolean>): void;
   selectable?: boolean;
+  loading?: boolean;
 }
 
 const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }: any, ref) => {
@@ -38,6 +39,7 @@ export const Table = <T extends Record<string, unknown>>({
   onRowClick,
   getSelectedRowIds,
   selectable = false,
+  loading = false,
 }: ReactTableProps<T>) => {
   const {
     getTableProps,
@@ -121,29 +123,52 @@ export const Table = <T extends Record<string, unknown>>({
           ))}
         </thead>
         <tbody {...getTableBodyProps()}>
-          {rows.map((row: any, rowIndex) => {
+          {!loading ? (
-            prepareRow(row);
+            rows.map((row: any, rowIndex) => {
-            return (
+              prepareRow(row);
-              <tr
+              return (
-                key={row}
+                <tr
-                {...row.getRowProps()}
+                  key={row}
-                className={rowIndex % 2 === 0 ? 'bg-white group' : 'bg-gray-50 group'}
+                  {...row.getRowProps()}
-                onClick={onRowClick ? () => onRowClick(row.original as T) : () => {}}
+                  className={rowIndex % 2 === 0 ? 'bg-white group' : 'bg-gray-50 group'}
-              >
+                  onClick={onRowClick ? () => onRowClick(row.original as T) : () => {}}
-                {row.cells.map((cell: any) => {
+                >
-                  return (
+                  {row.cells.map((cell: any) => {
-                    <td
+                    return (
-                      key={cell}
+                      <td
-                      {...cell.getCellProps()}
+                        key={cell}
-                      className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
+                        {...cell.getCellProps()}
-                    >
+                        className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
-                      {cell.render('Cell')}
+                      >
-                    </td>
+                        {cell.render('Cell')}
-                  );
+                      </td>
-                })}
+                    );
-              </tr>
+                  })}
-            );
+                </tr>
-          })}
+              );
+            })
+          ) : (
+            <td colSpan={4} className="py-24">
+              <div className="flex flex-col justify-center items-center">
+                <div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
+                  <svg
+                    className="animate-spin h-6 w-6 text-primary"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle className="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path
+                      className="opacity-100"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                  </svg>
+                </div>
+                <p className="text-sm text-primary-600 mt-2">Loading users</p>
+              </div>
+            </td>
+          )}
         </tbody>
       </table>
 

src/modules/login/LoginCallback.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { showToast, ToastType } from 'src/common/util/show-toast';
 import { useAuth } from 'src/services/auth';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -7,19 +9,49 @@ export function LoginCallback() {
   const indexOfQuestionMark = currentURL.indexOf('?');
   const params = currentURL.slice(indexOfQuestionMark);
 
+  const navigate = useNavigate();
+
   const { logIn } = useAuth();
 
   useEffect(() => {
-    if (params.length > 2) {
+    async function logInUser() {
-      logIn(params);
+      if (params.length > 2) {
+        const res = await logIn(params);
+
+        // @ts-ignore
+        if (!res.ok) {
+          navigate('/login');
+          showToast('Something went wrong, please try logging in again.', ToastType.Error);
+        }
+      }
     }
+
+    logInUser();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [params]);
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
-        <div className="flex justify-center">Loading . . .</div>
+        <div className="flex flex-col justify-center items-center">
+          <div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
+            <svg
+              className="animate-spin h-10 w-10 text-primary"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle className="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path
+                className="opacity-100"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </div>
+          <p className="text-lg text-primary-600 mt-2">Logging You in, just a moment.</p>
+        </div>
       </div>
     </div>
   );

src/modules/users/Users.tsx

@@ -4,17 +4,15 @@ import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
-import { ConfirmationModal } from 'src/components/Modal';
 import { debounce } from 'lodash';
 import { UserModal } from './components/UserModal';
 
 export const Users: React.FC = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
-  const [deleteModal, setDeleteModal] = useState(false);
   const [configureModal, setConfigureModal] = useState(false);
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
-  const { users, loadUsers } = useUsers();
+  const { users, loadUsers, userTableLoading } = useUsers();
 
   const handleSearch = (event: any) => {
     setSearch(event.target.value);
@@ -34,9 +32,6 @@ export const Users: React.FC = () => {
     return users.filter((item: any) => item.email?.toLowerCase().includes(search.toLowerCase()));
   }, [search, users]);
 
-  const deleteModalOpen = () => setDeleteModal(true);
-  const deleteModalClose = () => setDeleteModal(false);
-
   const configureModalOpen = (id: any) => {
     setUserId(id);
     setConfigureModal(true);
@@ -132,7 +127,7 @@ export const Users: React.FC = () => {
           {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
             <div className="flex items-center">
               <button
-                onClick={deleteModalOpen}
+                onClick={() => {}}
                 type="button"
                 className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
               >
@@ -147,19 +142,17 @@ export const Users: React.FC = () => {
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
               <div className="shadow border-b border-gray-200 sm:rounded-lg overflow-hidden">
-                <Table data={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable />
+                <Table
+                  data={filterSearch as any}
+                  columns={columns}
+                  getSelectedRowIds={selectedRows}
+                  loading={userTableLoading}
+                />
               </div>
             </div>
           </div>
         </div>
 
-        <ConfirmationModal
-          open={deleteModal}
-          onClose={deleteModalClose}
-          title="Delete user"
-          body="Are you sure you want to delete this user? All of your data will be permanently removed. This action cannot be undone."
-        />
-
         <UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
       </div>
     </div>

src/modules/users/components/UserModal/UserModal.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TrashIcon } from '@heroicons/react/outline';
 import { useForm } from 'react-hook-form';
-import { Modal, Banner } from 'src/components';
+import { Modal, Banner, ConfirmationModal } from 'src/components';
 import { Input } from 'src/components/Form';
 import { useUsers } from 'src/services/users';
 import { CurrentUserState } from 'src/services/users/redux';
@@ -10,6 +10,7 @@ import { appAccessList } from './consts';
 import { UserModalProps } from './types';
 
 export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
+  const [deleteModal, setDeleteModal] = useState(false);
   const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
   const { currentUser } = useAuth();
 
@@ -66,128 +67,142 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
     onClose();
   };
 
+  const deleteModalOpen = () => setDeleteModal(true);
+  const deleteModalClose = () => setDeleteModal(false);
+
   const handleDelete = () => {
     if (userId) {
       deleteUserById(userId);
     }
     handleClose();
+    deleteModalClose();
   };
 
   return (
-    <Modal
+    <>
-      onClose={handleClose}
+      <Modal
-      open={open}
+        onClose={handleClose}
-      onSave={handleSave}
+        open={open}
-      isLoading={userModalLoading}
+        onSave={handleSave}
-      leftActions={
+        isLoading={userModalLoading}
-        userId &&
+        leftActions={
-        user.email !== currentUser.email && (
+          userId &&
-          <button
+          user.email !== currentUser.email && (
-            onClick={handleDelete}
+            <button
-            type="button"
+              onClick={deleteModalOpen}
-            className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+              type="button"
-          >
+              className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-            <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+            >
-            Delete
+              <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-          </button>
+              Delete
-        )
+            </button>
-      }
+          )
-      useCancelButton
+        }
-    >
+        useCancelButton
-      <div className="bg-white px-4">
+      >
-        <div className="space-y-4 divide-y divide-gray-200">
+        <div className="bg-white px-4">
-          <div>
+          <div className="space-y-4 divide-y divide-gray-200">
             <div>
-              <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
+              <div>
-            </div>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
-
-            <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-              <div className="sm:col-span-3">
-                <Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
               </div>
 
-              <div className="sm:col-span-3">
+              <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
-                <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
+                <div className="sm:col-span-3">
-              </div>
+                  <Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
-
-              <div className="sm:col-span-6">
-                <Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
-              </div>
-
-              <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
-                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-                  Status
-                </label>
-                <div className="mt-1">
-                  <select
-                    id="status"
-                    name="status"
-                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                  >
-                    <option>Active</option>
-                    <option>Inactive</option>
-                    <option>Banned</option>
-                  </select>
                 </div>
-              </div>
 
-              <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
+                <div className="sm:col-span-3">
-                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                  <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
-                  Role
+                </div>
-                </label>
+
-                <div className="mt-1">
+                <div className="sm:col-span-6">
-                  <select
+                  <Banner title="Editing user status, roles and app access coming soon." titleSm="Comming soon!" />
-                    id="status"
+                </div>
-                    name="status"
+
-                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                  >
+                  {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
-                    <option>User</option>
+                  <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-                    <option>Admin</option>
+                    Status
-                    <option>Super Admin</option>
+                  </label>
-                  </select>
+                  <div className="mt-1">
+                    <select
+                      id="status"
+                      name="status"
+                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                    >
+                      <option>Active</option>
+                      <option>Inactive</option>
+                      <option>Banned</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
+                  <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                    Role
+                  </label>
+                  <div className="mt-1">
+                    <select
+                      id="status"
+                      name="status"
+                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                    >
+                      <option>User</option>
+                      <option>Admin</option>
+                      <option>Super Admin</option>
+                    </select>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div className="opacity-40 cursor-default pointer-events-none select-none">
+            <div className="opacity-40 cursor-default pointer-events-none select-none">
-            <div className="mt-4">
+              <div className="mt-4">
-              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
-            </div>
+              </div>
 
-            <div>
+              <div>
-              <div className="flow-root mt-6">
+                <div className="flow-root mt-6">
-                <ul className="-my-5 divide-y divide-gray-200 ">
+                  <ul className="-my-5 divide-y divide-gray-200 ">
-                  {appAccessList.map((app: any) => {
+                    {appAccessList.map((app: any) => {
-                    return (
+                      return (
-                      <li className="py-4" key={app.name}>
+                        <li className="py-4" key={app.name}>
-                        <div className="flex items-center space-x-4">
+                          <div className="flex items-center space-x-4">
-                          <div className="flex-shrink-0 flex-1 flex items-center">
+                            <div className="flex-shrink-0 flex-1 flex items-center">
-                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
+                              <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
-                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                              <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                            </div>
+                            <div>
+                              <select
+                                id={app.name}
+                                name={app.name}
+                                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                              >
+                                <option>User</option>
+                                <option>Admin</option>
+                                <option>Super Admin</option>
+                              </select>
+                            </div>
                           </div>
-                          <div>
+                        </li>
-                            <select
+                      );
-                              id={app.name}
+                    })}
-                              name={app.name}
+                  </ul>
-                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                </div>
-                            >
-                              <option>User</option>
-                              <option>Admin</option>
-                              <option>Super Admin</option>
-                            </select>
-                          </div>
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Modal>
-    </Modal>
+
+      <ConfirmationModal
+        onDeleteAction={handleDelete}
+        open={deleteModal}
+        onClose={deleteModalClose}
+        title="Delete user"
+        body="Are you sure you want to delete this user? All of the user data will be permanently removed. This action cannot be undone."
+      />
+    </>
   );
 };

src/services/users/hooks/use-users.ts

@@ -1,12 +1,13 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { getUsers, fetchUsers, fetchUserById, updateUserById, createUser, deleteUser } from '../redux';
-import { getUserById, getUserModalLoading } from '../redux/selectors';
+import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
 export function useUsers() {
   const dispatch = useDispatch();
   const users = useSelector(getUsers);
   const user = useSelector(getUserById);
   const userModalLoading = useSelector(getUserModalLoading);
+  const userTableLoading = useSelector(getUserslLoading);
 
   function loadUsers() {
     return dispatch(fetchUsers());
@@ -35,6 +36,7 @@ export function useUsers() {
     loadUsers,
     editUserById,
     userModalLoading,
+    userTableLoading,
     createNewUser,
     deleteUserById,
   };

src/services/users/redux/actions.ts

@@ -10,9 +10,26 @@ export enum UserActionTypes {
   CREATE_USER = 'users/create_user',
   DELETE_USER = 'users/delete_user',
   SET_USER_MODAL_LOADING = 'users/user_modal_loading',
+  SET_USERS_LOADING = 'users/users_loading',
 }
 
+export const setUsersLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.SET_USERS_LOADING,
+    payload: isLoading,
+  });
+};
+
+export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.SET_USER_MODAL_LOADING,
+    payload: isLoading,
+  });
+};
+
 export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
+  dispatch(setUsersLoading(true));
+
   try {
     const { data } = await performApiCall({
       path: '/users',
@@ -26,13 +43,8 @@ export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
   } catch (err) {
     console.error(err);
   }
-};
 
-export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
+  dispatch(setUsersLoading(false));
-  dispatch({
-    type: UserActionTypes.SET_USER_MODAL_LOADING,
-    payload: isLoading,
-  });
 };
 
 export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) => {

src/services/users/redux/reducers.ts

@@ -4,6 +4,7 @@ const initialUsersState: any = {
   users: [],
   user: {},
   userModalLoading: false,
+  usersLoading: false,
 };
 
 const usersReducer = (state: any = initialUsersState, action: any) => {
@@ -18,6 +19,11 @@ const usersReducer = (state: any = initialUsersState, action: any) => {
         ...state,
         userModalLoading: action.payload,
       };
+    case UserActionTypes.SET_USERS_LOADING:
+      return {
+        ...state,
+        usersLoading: action.payload,
+      };
     case UserActionTypes.FETCH_USER:
     case UserActionTypes.UPDATE_USER:
     case UserActionTypes.CREATE_USER:

src/services/users/redux/selectors.ts

@@ -3,3 +3,4 @@ import { State } from 'src/redux';
 export const getUsers = (state: State) => state.users.users;
 export const getUserById = (state: State) => state.users.user;
 export const getUserModalLoading = (state: State) => state.users.userModalLoading;
+export const getUserslLoading = (state: State) => state.users.usersLoading;

src/services/users/redux/types.ts

@@ -11,6 +11,7 @@ export interface UsersState {
   users: User[];
   user: User;
   userModalLoading: boolean;
+  usersLoading: boolean;
 }
 
 export interface CurrentUserUpdateAPI {