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,7 +123,8 @@ export const Table = <T extends Record<string, unknown>>({
           ))}
         </thead>
         <tbody {...getTableBodyProps()}>
-          {rows.map((row: any, rowIndex) => {
+          {!loading ? (
+            rows.map((row: any, rowIndex) => {
               prepareRow(row);
               return (
                 <tr
@@ -143,7 +146,29 @@ export const Table = <T extends Record<string, unknown>>({
                   })}
                 </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(() => {
+    async function logInUser() {
       if (params.length > 2) {
-      logIn(params);
+        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,18 +142,16 @@ 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
-              </div>
+                  data={filterSearch as any}
-            </div>
+                  columns={columns}
-          </div>
+                  getSelectedRowIds={selectedRows}
-        </div>
+                  loading={userTableLoading}
-
-        <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."
                 />
+              </div>
+            </div>
+          </div>
+        </div>
 
         <UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
       </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,14 +67,19 @@ 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}
         open={open}
@@ -83,7 +89,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
           userId &&
           user.email !== currentUser.email && (
             <button
-            onClick={handleDelete}
+              onClick={deleteModalOpen}
               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"
             >
@@ -189,5 +195,14 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
           </div>
         </div>
       </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 {