Connected users with Kratos

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;
+  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>
   );
 };

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

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

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