Connected users with Kratos

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