Connected users with Kratos

package.json

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

src/components/Form/Input/Input.tsx

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

src/components/Form/Input/index.ts

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

src/components/Form/Select/Select.tsx

@@ -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[];
+};

src/components/Form/Select/index.ts

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

src/components/Form/index.ts

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

src/components/Modal/Modal/Modal.tsx

@@ -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,11 +81,14 @@ 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">
+                <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="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}
                     >
                       Save Changes
                     </button>
@@ -79,6 +103,7 @@ export const Modal: React.FC<ModalProps> = ({
                       </button>
                     )}
                   </div>
+                </div>
               )}
             </div>
           </Transition.Child>

src/components/Modal/Modal/types.ts

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

src/modules/users/Users.tsx

@@ -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;
-
-  useEffect(() => {
-    const asyncFc = async () => {
-      try {
-        await loadUsers();
-      } catch {
-        // continue
-      }
   };
 
-    asyncFc();
+  const debouncedSearch = useCallback(debounce(handleSearch, 250), []);
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+
+  useEffect(() => {
+    loadUsers();
+
+    return () => {
+      debouncedSearch.cancel();
+    };
   }, []);
 
   const filterSearch = useMemo(() => {
-    return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
+    return users.filter((item: any) => item.email?.toLowerCase().includes(search.toLowerCase()));
-  }, [search, allUsers]);
+  }, [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>
   );
 };

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

@@ -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">
+                <Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
-                  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>
               </div>
 
               <div className="sm:col-span-3">
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
-                  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>
               </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>

src/modules/users/components/UserModal/types.ts

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

src/redux/store.ts

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

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

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

src/services/users/index.ts

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

src/services/users/redux/actions.ts

@@ -1,64 +1,132 @@
-import { createApiAction, createCrudApiActions } from 'src/services/api';
+import { Dispatch } from 'redux';
-import { transformUserForApi } from '../transformations';
+import { showToast, ToastType } from 'src/common/util/show-toast';
-
+import { performApiCall } from 'src/services/api';
-import { User } from '../types';
+import { transformRequestUser, transformResponseUser } from '../transformations';
-import { CurrentUserUpdateAPI } from './types';
 
 export enum UserActionTypes {
-  CHANGE_CURRENT_USER_START = 'users/fetch_current_user_start',
+  FETCH_USERS = 'users/fetch_users',
-  CHANGE_CURRENT_USER_FAILURE = 'users/fetch_current_user_failure',
+  FETCH_USER = 'users/fetch_user',
-  FETCH_CURRENT_USER_SUCCESS = 'users/fetch_current_user_success',
+  UPDATE_USER = 'users/update_user',
-  UPDATE_CURRENT_USER_SUCCESS = 'users/update_current_user_success',
+  CREATE_USER = 'users/create_user',
-
+  DELETE_USER = 'users/delete_user',
-  CHANGE_USERS_START = 'users/change_users_start',
+  SET_USER_MODAL_LOADING = 'users/user_modal_loading',
-  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',
 }
 
-export const fetchCurrentUser = () =>
+export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
-  createApiAction(
+  try {
-    {
+    const { data } = await performApiCall({
-      path: '/users/me',
+      path: '/users',
       method: 'GET',
-    },
+    });
-    [
-      UserActionTypes.CHANGE_CURRENT_USER_START,
-      UserActionTypes.FETCH_CURRENT_USER_SUCCESS,
-      UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
-    ],
-  );
 
-export const updateCurrentUser = (data: CurrentUserUpdateAPI) =>
+    dispatch({
-  createApiAction(
+      type: UserActionTypes.FETCH_USERS,
-    {
+      payload: data.map(transformResponseUser),
-      path: '/users/me',
+    });
-      method: 'PATCH',
+  } catch (err) {
-      body: data,
+    console.error(err);
-    },
+  }
-    [
+};
-      UserActionTypes.CHANGE_CURRENT_USER_START,
-      UserActionTypes.UPDATE_CURRENT_USER_SUCCESS,
-      UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
-    ],
-  );
 
-export const [fetchUsers, addUser, updateUser, deleteUser] = createCrudApiActions<User>(
+export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
-  '/users',
+  dispatch({
-  UserActionTypes.CHANGE_USERS_START,
+    type: UserActionTypes.SET_USER_MODAL_LOADING,
-  UserActionTypes.CHANGE_USERS_FAILURE,
+    payload: isLoading,
-  UserActionTypes.FETCH_USERS_SUCCESS,
+  });
-  UserActionTypes.ADD_ACCOUNT_USER_SUCCESS,
+};
-  UserActionTypes.UPDATE_ACCOUNT_USER_SUCCESS,
+
-  UserActionTypes.DELETE_ACCOUNT_USER_SUCCESS,
+export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) => {
-  transformUserForApi,
+  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));
+};

src/services/users/redux/index.ts

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

src/services/users/redux/reducers.ts

@@ -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(
+const initialUsersState: any = {
-  [AuthActionTypes.SIGN_IN_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.SIGN_IN_FAILURE],
+  users: [],
-  transformUser,
+  user: {},
-  (data) => data,
+  userModalLoading: false,
-);
+};
 
-const fetchCurrentUserReducer = createApiReducer(
+const usersReducer = (state: any = initialUsersState, action: any) => {
-  [
+  switch (action.type) {
-    UserActionTypes.CHANGE_CURRENT_USER_START,
+    case UserActionTypes.FETCH_USERS:
-    UserActionTypes.FETCH_CURRENT_USER_SUCCESS,
+      return {
-    UserActionTypes.CHANGE_CURRENT_USER_FAILURE,
+        ...state,
-  ],
+        users: action.payload,
-  transformUser,
+      };
-  (data) => data,
+    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(
+export default usersReducer;
-  [
-    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,
-});

src/services/users/redux/selectors.ts

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

src/services/users/redux/types.ts

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

src/services/users/transformations.ts

@@ -1,14 +1,17 @@
 import _ from 'lodash';
 
-import { FormUser, User, UserApiRequest } from './types';
+import { User } from './types';
 
-export const transformUserForApi = (user: FormUser): UserApiRequest => ({
+export const transformResponseUser = (response: any): User => {
-  id: user.id,
+  const userResponse = _.get(response, 'user', response);
-  email: user.email,
+
-  name: user.name,
+  return {
-  status: user.status,
+    id: userResponse.id,
-  last_login: user.last_login,
+    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,
+  };
+};

src/services/users/types.ts

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

yarn.lock

@@ -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:
+react-hook-form@^7.22.0:
-  version "7.12.1"
+  version "7.22.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.12.1.tgz#dc6adbbd78a3c8817129672a6367d45479e9ca3e"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.22.0.tgz#391f0827d487d133333789b60ad7a00e70ad1bdf"
-  integrity sha512-JBu5TZK3IXzDKw9SuNFwyQFdIx5uGZSmN9QTDsNsDSYdccU/O+43jBUh0zKG4jDc4hiNYYgDw34lLt7qLSeusA==
+  integrity sha512-0gPE29N0wdd/5ZMD+TaAq5LF4NTguLnPaTqdSiWyu1QiSkB6jmWY1q0550JYu2BSgfOHecA7pxky9q+zWAwMqg==
 
 react-hot-toast@^2.0.0:
   version "2.0.0"