local-it/dashboard
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Loaders and delete user confirmation

Browse source
This commit is contained in:
Valentino Kozinec 2022-02-11 12:45:22 +01:00
parent 9f734ec474
commit f034706bbb
10 changed files with 240 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Modal/ConfirmationModal/ConfirmationModal.tsx
View file

@ -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>

29
src/components/Table/Table.tsx
View file

@ -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>

36
src/modules/login/LoginCallback.tsx
View file

@ -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>
);

29
src/modules/users/Users.tsx
View file

@ -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 />
</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."
<Table
data={filterSearch as any}
columns={columns}
getSelectedRowIds={selectedRows}
loading={userTableLoading}
/>
</div>
</div>
</div>
</div>
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
</div>

21
src/modules/users/components/UserModal/UserModal.tsx
View file

@ -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."
/>
</>
);
};

4
src/services/users/hooks/use-users.ts
View file

@ -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,
};

24
src/services/users/redux/actions.ts
View file

@ -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({
type: UserActionTypes.SET_USER_MODAL_LOADING,
payload: isLoading,
});
dispatch(setUsersLoading(false));
};
export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) => {

6
src/services/users/redux/reducers.ts
View file

@ -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:

1
src/services/users/redux/selectors.ts
View file

@ -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;

1
src/services/users/redux/types.ts
View file

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