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

Connected users with Kratos

main
Valentino 2021-12-21 14:55:46 +00:00 committed by Maarten de Waard
parent b0af0de05b
commit 8da937d0c5
22 changed files with 479 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -24,7 +24,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.12.1",
"react-hook-form": "^7.22.0",
"react-hot-toast": "^2.0.0",
"react-markdown": "^7.0.1",
"react-redux": "^7.2.4",

45
src/components/Form/Input/Input.tsx 100644
View File

@ -0,0 +1,45 @@
import React from 'react';
import { useController } from 'react-hook-form';
/* eslint-disable react/react-in-jsx-scope */
export const Input = ({ control, name, type = 'text', label, ...props }: InputProps) => {
const {
field,
// fieldState: { invalid, isTouched, isDirty },
// formState: { touchedFields, dirtyFields },
} = useController({
name,
control,
rules: { required: true },
defaultValue: '',
});
return (
<>
{label && (
<label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
{label}
</label>
)}
<input
type={type}
id={name}
onChange={field.onChange} // send value to hook form
onBlur={field.onBlur} // notify when input is touched/blur
value={field.value ? field.value.toString() : ''} // input value
name={name} // send down the input name
ref={field.ref} // send input ref, so we can focus on input when error appear
autoComplete="given-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
{...props}
/>
</>
);
};
type InputProps = {
control: any;
name: string;
type?: string;
label?: string;
} & React.HTMLProps<HTMLInputElement>;

1
src/components/Form/Input/index.ts 100644
View File

@ -0,0 +1 @@
export { Input } from './Input';

48
src/components/Form/Select/Select.tsx 100644
View File

@ -0,0 +1,48 @@
import React from 'react';
import { useController } from 'react-hook-form';
/* eslint-disable react/react-in-jsx-scope */
export const Select = ({ control, name, label, options }: SelectProps) => {
const {
field,
// fieldState: { invalid, isTouched, isDirty },
// formState: { touchedFields, dirtyFields },
} = useController({
name,
control,
rules: { required: true },
defaultValue: '',
});
return (
<>
{label && (
<label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
{label}
</label>
)}
<select
id={name}
onChange={field.onChange} // send value to hook form
onBlur={field.onBlur} // notify when input is touched/blur
value={field.value ? field.value.toString() : ''} // input value
name={name} // send down the input name
ref={field.ref} // send input ref, so we can focus on input when error appear
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
>
{options?.map((value) => (
<option key={value} value={value}>
{value}
</option>
))}
</select>
</>
);
};
type SelectProps = {
control: any;
name: string;
label?: string;
options?: any[];
};

1
src/components/Form/Select/index.ts 100644
View File

@ -0,0 +1 @@
export { Select } from './Select';

2
src/components/Form/index.ts 100644
View File

@ -0,0 +1,2 @@
export { Input } from './Input';
export { Select } from './Select';

55
src/components/Modal/Modal/Modal.tsx
View File

@ -10,8 +10,11 @@ export const Modal: React.FC<ModalProps> = ({
children,
title = '',
useCancelButton = false,
isLoading = false,
leftActions = <></>,
}) => {
const cancelButtonRef = useRef(null);
const saveButtonRef = useRef(null);
return (
<Transition.Root show={open} as={Fragment}>
@ -42,7 +45,25 @@ export const Modal: React.FC<ModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
{isLoading && (
<Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
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>
</Dialog.Overlay>
)}
{!useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
@ -60,24 +81,28 @@ export const Modal: React.FC<ModalProps> = ({
<div className="bg-white px-4 p-6">{children}</div>
{onSave && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
>
Save Changes
</button>
{useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex">
{leftActions}
<div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
ref={saveButtonRef}
>
Cancel
Save Changes
</button>
)}
{useCancelButton && (
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</button>
)}
</div>
</div>
)}
</div>

4
src/components/Modal/Modal/types.ts
View File

@ -1,7 +1,11 @@
import React from 'react';
export type ModalProps = {
open: boolean;
onClose: () => void;
title?: string;
onSave?: () => void;
useCancelButton?: boolean;
isLoading?: boolean;
leftActions?: React.ReactNode;
};

69
src/modules/users/Users.tsx
View File

@ -6,6 +6,7 @@ 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';
const pages = [{ name: 'Users', href: '#', current: true }];
@ -14,37 +15,35 @@ export const Users: React.FC<RouteComponentProps> = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
const [deleteModal, setDeleteModal] = useState(false);
const [configureModal, setConfigureModal] = useState(false);
const [userId, setUserId] = useState(null);
const [search, setSearch] = useState('');
const { loadUsers, users } = useUsers();
const { users, loadUsers } = useUsers();
const handleSearch = useCallback((event: any) => {
const handleSearch = (event: any) => {
setSearch(event.target.value);
}, []);
};
// TODO: Check why it needs any
const allUsers: any = users.items;
const debouncedSearch = useCallback(debounce(handleSearch, 250), []);
useEffect(() => {
const asyncFc = async () => {
try {
await loadUsers();
} catch {
// continue
}
};
loadUsers();
asyncFc();
/* eslint-disable-next-line react-hooks/exhaustive-deps */
return () => {
debouncedSearch.cancel();
};
}, []);
const filterSearch = useMemo(() => {
return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
}, [search, allUsers]);
return users.filter((item: any) => item.email?.toLowerCase().includes(search.toLowerCase()));
}, [search, users]);
const deleteModalOpen = () => setDeleteModal(true);
const deleteModalClose = () => setDeleteModal(false);
const configureModalOpen = () => setConfigureModal(true);
const configureModalOpen = (id: any) => {
setUserId(id);
setConfigureModal(true);
};
const configureModalClose = () => setConfigureModal(false);
const columns: any = React.useMemo(
@ -64,18 +63,15 @@ export const Users: React.FC<RouteComponentProps> = () => {
accessor: 'status',
width: 'auto',
},
{
Header: 'Last Sign-In',
accessor: 'last_login',
width: 'auto',
},
{
Header: ' ',
Cell: () => {
Cell: (props: any) => {
const { row } = props;
return (
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={configureModalOpen}
onClick={() => configureModalOpen(row.original.id)}
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
@ -127,7 +123,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
<div className="mt-3 sm:mt-0 sm:ml-4">
<button
onClick={configureModalOpen}
onClick={() => configureModalOpen(null)}
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
>
@ -139,23 +135,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
<div className="flex justify-between w-100 my-3 items-center mb-5 ">
<div className="flex items-center">
{/* <div className="mr-3 inline-block shadow-sm">
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
Location
</label>
<select
id="location"
name="location"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-200 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
defaultValue="All users"
>
<option>All users</option>
<option>Owner</option>
<option>Admins</option>
<option>Members</option>
</select>
</div> */}
<div className="inline-block">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
Search candidates
@ -171,7 +150,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
id="email"
className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
placeholder="Search Users"
onChange={handleSearch}
onChange={debouncedSearch}
/>
</div>
</div>
@ -196,7 +175,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
<div className="-my-2 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">
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
<Table data={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable />
</div>
</div>
</div>
@ -209,7 +188,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
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} onSave={configureModalClose} />
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
</div>
);
};

118
src/modules/users/components/UserModal/UserModal.tsx
View File

@ -1,11 +1,96 @@
import React from 'react';
import React, { useEffect } from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import { useForm } from 'react-hook-form';
import { Modal } from 'src/components';
import { Input } from 'src/components/Form';
import { useUsers } from 'src/services/users';
import { CurrentUserState } from 'src/services/users/redux';
import { appAccessList } from './consts';
import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps) => {
export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
const { control, reset, handleSubmit } = useForm<CurrentUserState>({
defaultValues: {
name: null,
email: null,
id: null,
status: null,
},
});
useEffect(() => {
if (userId) {
loadUser(userId);
}
reset({ name: null, email: null, id: null, status: null });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId]);
useEffect(() => {
if (user) {
reset(user);
}
return () => {
reset({ name: null, email: null, id: null, status: null });
};
}, [user, reset]);
const handleSave = async () => {
try {
if (userId) {
await handleSubmit((data) => editUserById(data))();
} else {
await handleSubmit((data) => createNewUser(data))();
reset({ name: null, email: null, id: null, status: null });
}
onClose();
} catch (e: any) {
// Continue
}
};
const handleKeyPress = (e: any) => {
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
handleSave();
}
};
const handleClose = () => {
onClose();
};
const handleDelete = () => {
if (userId) {
deleteUserById(userId);
}
handleClose();
};
return (
<Modal onClose={onClose} open={open} onSave={onSave} useCancelButton>
<Modal
onClose={handleClose}
open={open}
onSave={handleSave}
isLoading={userModalLoading}
leftActions={
userId && (
<button
onClick={handleDelete}
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"
>
<TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Delete
</button>
)
}
useCancelButton
>
<div className="bg-white px-4">
<div className="space-y-4 divide-y divide-gray-200">
<div>
@ -15,36 +100,15 @@ export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps)
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Name
</label>
<div className="mt-1">
<input
type="text"
name="name"
id="name"
autoComplete="given-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
<Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
</div>
<div className="sm:col-span-3">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email
</label>
<div className="mt-1">
<input
type="email"
name="email"
id="email"
autoComplete="family-name"
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
<Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
</div>
<div className="sm:col-span-3">
{/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
<label htmlFor="status" className="block text-sm font-medium text-gray-700">
Status
</label>

2
src/modules/users/components/UserModal/types.ts
View File

@ -1,5 +1,5 @@
export type UserModalProps = {
open: boolean;
onClose: () => void;
onSave?: () => void;
userId: string | null;
};

2
src/redux/store.ts
View File

@ -4,8 +4,8 @@ import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { reducer as authReducer } from 'src/services/auth';
import { reducer as usersReducer } from 'src/services/users';
import usersReducer from 'src/services/users/redux/reducers';
import { State } from './types';
const persistConfig = {

27
src/services/users/hooks/use-users.ts
View File

@ -1,16 +1,41 @@
import { useDispatch, useSelector } from 'react-redux';
import { getUsers, fetchUsers } from '../redux';
import { getUsers, fetchUsers, fetchUserById, updateUserById, createUser, deleteUser } from '../redux';
import { getUserById, getUserModalLoading } from '../redux/selectors';
export function useUsers() {
const dispatch = useDispatch();
const users = useSelector(getUsers);
const user = useSelector(getUserById);
const userModalLoading = useSelector(getUserModalLoading);
function loadUsers() {
return dispatch(fetchUsers());
}
function loadUser(id: string) {
return dispatch(fetchUserById(id));
}
function editUserById(data: any) {
return dispatch(updateUserById(data));
}
function createNewUser(data: any) {
return dispatch(createUser(data));
}
function deleteUserById(id: string) {
return dispatch(deleteUser(id));
}
return {
users,
user,
loadUser,
loadUsers,
editUserById,
userModalLoading,
createNewUser,
deleteUserById,
};
}

2
src/services/users/index.ts
View File

@ -1,6 +1,6 @@
export * from './types';
export { reducer, fetchCurrentUser, getCurrentUser } from './redux';
export { reducer } from './redux';
export { useUsers } from './hooks';

182
src/services/users/redux/actions.ts
View File

@ -1,64 +1,132 @@
import { createApiAction, createCrudApiActions } from 'src/services/api';
import { transformUserForApi } from '../transformations';
import { User } from '../types';
import { CurrentUserUpdateAPI } from './types';
import { Dispatch } from 'redux';
import { showToast, ToastType } from 'src/common/util/show-toast';
import { performApiCall } from 'src/services/api';
import { transformRequestUser, transformResponseUser } from '../transformations';
export enum UserActionTypes {
CHANGE_CURRENT_USER_START = 'users/fetch_current_user_start',
CHANGE_CURRENT_USER_FAILURE = 'users/fetch_current_user_failure',
FETCH_CURRENT_USER_SUCCESS = 'users/fetch_current_user_success',
UPDATE_CURRENT_USER_SUCCESS = 'users/update_current_user_success',
CHANGE_USERS_START = 'users/change_users_start',
CHANGE_USERS_FAILURE = 'users/change_users_failure',
FETCH_USERS_SUCCESS = 'users/fetch_users_success',
ADD_ACCOUNT_USER_SUCCESS = 'users/add_account_user_success',
UPDATE_ACCOUNT_USER_SUCCESS = 'users/update_account_user_success',
DELETE_ACCOUNT_USER_SUCCESS = 'users/delete_account_user_success',
CHANGE_USER_ROLES_START = 'users/change_user_roles_start',
CHANGE_USER_ROLES_FAILURE = 'users/change_user_roles_failure',
FETCH_USER_ROLES_SUCCESS = 'users/fetch_user_roles_success',
ADD_USER_ROLE_SUCCESS = 'users/add_user_role_success',
UPDATE_USER_ROLE_SUCCESS = 'users/update_user_role_success',
DELETE_USER_ROLE_SUCCESS = 'users/delete_user_role_success',
FETCH_USERS = 'users/fetch_users',
FETCH_USER = 'users/fetch_user',
UPDATE_USER = 'users/update_user',
CREATE_USER = 'users/create_user',
DELETE_USER = 'users/delete_user',
SET_USER_MODAL_LOADING = 'users/user_modal_loading',
}
export const fetchCurrentUser = () =>
createApiAction(
{
path: '/users/me',
export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
try {
const { data } = await performApiCall({
path: '/users',
method: 'GET',
},
[
UserActionTypes.CHANGE_CURRENT_USER_START,
UserActionTypes.FETCH_CURRENT_USER_SUCCESS,
UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
],
);
});
export const updateCurrentUser = (data: CurrentUserUpdateAPI) =>
createApiAction(
{
path: '/users/me',
method: 'PATCH',
body: data,
},
[
UserActionTypes.CHANGE_CURRENT_USER_START,
UserActionTypes.UPDATE_CURRENT_USER_SUCCESS,
UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
],
);
dispatch({
type: UserActionTypes.FETCH_USERS,
payload: data.map(transformResponseUser),
});
} catch (err) {
console.error(err);
}
};
export const [fetchUsers, addUser, updateUser, deleteUser] = createCrudApiActions<User>(
'/users',
UserActionTypes.CHANGE_USERS_START,
UserActionTypes.CHANGE_USERS_FAILURE,
UserActionTypes.FETCH_USERS_SUCCESS,
UserActionTypes.ADD_ACCOUNT_USER_SUCCESS,
UserActionTypes.UPDATE_ACCOUNT_USER_SUCCESS,
UserActionTypes.DELETE_ACCOUNT_USER_SUCCESS,
transformUserForApi,
);
export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
dispatch({
type: UserActionTypes.SET_USER_MODAL_LOADING,
payload: isLoading,
});
};
export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
const { data } = await performApiCall({
path: `/users/${id}`,
method: 'GET',
});
dispatch({
type: UserActionTypes.FETCH_USER,
payload: transformResponseUser(data),
});
} catch (err) {
console.error(err);
}
dispatch(setUserModalLoading(false));
};
export const updateUserById = (user: any) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
const { data } = await performApiCall({
path: `/users/${user.id}`,
method: 'PUT',
body: transformRequestUser(user),
});
dispatch({
type: UserActionTypes.UPDATE_USER,
payload: transformResponseUser(data),
});
showToast('User updated sucessfully.', ToastType.Success);
dispatch(fetchUsers());
} catch (err) {
console.error(err);
}
dispatch(setUserModalLoading(false));
};
export const createUser = (user: any) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
const { data } = await performApiCall({
path: '/users',
method: 'POST',
body: transformRequestUser(user),
});
dispatch({
type: UserActionTypes.CREATE_USER,
payload: transformResponseUser(data),
});
showToast('User created sucessfully.', ToastType.Success);
dispatch(fetchUsers());
} catch (err: any) {
dispatch(setUserModalLoading(false));
showToast(`${err}`, ToastType.Error);
throw err;
}
dispatch(setUserModalLoading(false));
};
export const deleteUser = (id: string) => async (dispatch: Dispatch<any>) => {
dispatch(setUserModalLoading(true));
try {
await performApiCall({
path: `/users/${id}`,
method: 'DELETE',
});
dispatch({
type: UserActionTypes.DELETE_USER,
payload: {},
});
showToast('User deleted sucessfully.', ToastType.Success);
dispatch(fetchUsers());
} catch (err) {
console.error(err);
}
dispatch(setUserModalLoading(false));
};

2
src/services/users/redux/index.ts
View File

@ -1,4 +1,4 @@
export * from './actions';
export { default as reducer } from './reducers';
export { getCurrentUser, getUsers } from './selectors';
export { getUsers } from './selectors';
export * from './types';

92
src/services/users/redux/reducers.ts
View File

@ -1,61 +1,39 @@
import { combineReducers } from 'redux';
import { createApiReducer, chainReducers, INITIAL_API_STATE, createCrudApiReducer } from 'src/services/api';
import { AuthActionTypes } from 'src/services/auth/redux/actions';
import { transformUser } from '../transformations';
import { User } from '../types';
import { UserActionTypes } from './actions';
const signInReducer = createApiReducer(
[AuthActionTypes.SIGN_IN_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.SIGN_IN_FAILURE],
transformUser,
(data) => data,
);
const initialUsersState: any = {
users: [],
user: {},
userModalLoading: false,
};
const fetchCurrentUserReducer = createApiReducer(
[
UserActionTypes.CHANGE_CURRENT_USER_START,
UserActionTypes.FETCH_CURRENT_USER_SUCCESS,
UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
],
transformUser,
(data) => data,
);
const usersReducer = (state: any = initialUsersState, action: any) => {
switch (action.type) {
case UserActionTypes.FETCH_USERS:
return {
...state,
users: action.payload,
};
case UserActionTypes.SET_USER_MODAL_LOADING:
return {
...state,
userModalLoading: action.payload,
};
case UserActionTypes.FETCH_USER:
case UserActionTypes.UPDATE_USER:
case UserActionTypes.CREATE_USER:
return {
...state,
isModalVisible: false,
user: action.payload,
};
case UserActionTypes.DELETE_USER:
return {
...state,
user: {},
};
default:
return state;
}
};
const updateCurrentUserReducer = createApiReducer(
[
UserActionTypes.CHANGE_CURRENT_USER_START,
UserActionTypes.UPDATE_CURRENT_USER_SUCCESS,
UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
],
transformUser,
(data) => data,
);
const signOutReducer = createApiReducer(
['', AuthActionTypes.SIGN_OUT, ''],
() => INITIAL_API_STATE,
() => INITIAL_API_STATE,
);
const usersReducer = createCrudApiReducer<User>(
UserActionTypes.CHANGE_USERS_START,
UserActionTypes.CHANGE_USERS_FAILURE,
UserActionTypes.FETCH_USERS_SUCCESS,
UserActionTypes.ADD_ACCOUNT_USER_SUCCESS,
UserActionTypes.UPDATE_ACCOUNT_USER_SUCCESS,
UserActionTypes.DELETE_ACCOUNT_USER_SUCCESS,
transformUser,
);
export default combineReducers({
currentUser: chainReducers(
INITIAL_API_STATE,
signInReducer,
fetchCurrentUserReducer,
updateCurrentUserReducer,
signOutReducer,
),
users: usersReducer,
});
export default usersReducer;

3
src/services/users/redux/selectors.ts
View File

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

7
src/services/users/redux/types.ts
View File

@ -1,4 +1,4 @@
import { ApiState, ApiStatus } from 'src/services/api/redux';
import { ApiStatus } from 'src/services/api/redux';
import { User } from '../types';
@ -8,10 +8,13 @@ export interface CurrentUserState extends User {
export interface UsersState {
currentUser: CurrentUserState;
users: ApiState<User>;
users: User[];
user: User;
userModalLoading: boolean;
}
export interface CurrentUserUpdateAPI {
id: number;
phoneNumber?: string;
email?: string;
language?: string;

27
src/services/users/transformations.ts
View File

@ -1,14 +1,17 @@
import _ from 'lodash';
import { FormUser, User, UserApiRequest } from './types';
import { User } from './types';
export const transformUserForApi = (user: FormUser): UserApiRequest => ({
id: user.id,
email: user.email,
name: user.name,
status: user.status,
last_login: user.last_login,
});
export const transformResponseUser = (response: any): User => {
const userResponse = _.get(response, 'user', response);
return {
id: userResponse.id,
email: userResponse.traits.email,
name: userResponse.traits.name ?? null,
status: userResponse.state,
};
};
export const transformUser = (response: any): User => {
const userResponse = _.get(response, 'user', response);
@ -17,7 +20,13 @@ export const transformUser = (response: any): User => {
id: userResponse.id,
email: userResponse.email,
name: userResponse.name,
last_login: userResponse.last_login,
status: userResponse.status,
};
};
export const transformRequestUser = (data: any) => {
return {
email: data.email,
name: data.name,
};
};

8
src/services/users/types.ts
View File

@ -1,9 +1,8 @@
export interface User {
id: number | null;
email: string;
name: string;
last_login: string;
status: string;
email: string | null;
name: string | null;
status: string | null;
}
export interface FormUser extends User {
@ -21,6 +20,5 @@ export interface UserApiRequest {
id: number | null;
email: string;
name: string;
last_login: string;
status: string;
}

8
yarn.lock
View File

@ -10331,10 +10331,10 @@ react-helmet@^6.1.0:
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-hook-form@^7.12.1:
version "7.12.1"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.12.1.tgz#dc6adbbd78a3c8817129672a6367d45479e9ca3e"
integrity sha512-JBu5TZK3IXzDKw9SuNFwyQFdIx5uGZSmN9QTDsNsDSYdccU/O+43jBUh0zKG4jDc4hiNYYgDw34lLt7qLSeusA==
react-hook-form@^7.22.0:
version "7.22.0"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.22.0.tgz#391f0827d487d133333789b60ad7a00e70ad1bdf"
integrity sha512-0gPE29N0wdd/5ZMD+TaAq5LF4NTguLnPaTqdSiWyu1QiSkB6jmWY1q0550JYu2BSgfOHecA7pxky9q+zWAwMqg==
react-hot-toast@^2.0.0:
version "2.0.0"