feat(AccountsPage): update accounts list after create user

client/src/components/UserCreate.tsx

@@ -10,17 +10,18 @@ import {
   UploadProps,
   message,
   Spin,
-} from 'antd';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useUserSelector } from '@/store/userStore';
-import { UserCreate as NewUserCreate } from '@/types/user';
-import { UserService } from '@/services/userService';
-import { LoadingOutlined } from '@ant-design/icons';
+} from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useUserSelector } from "@/store/userStore";
+import { AllUserResponse, UserCreate as NewUserCreate } from "@/types/user";
+import { UserService } from "@/services/userService";
+import { LoadingOutlined } from "@ant-design/icons";
+import { useSearchParams } from "react-router-dom";
 
 const { Option } = Select;
 
-type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
 
 const getBase64 = (file: FileType): Promise<string> =>
   new Promise((resolve, reject) => {
@@ -32,13 +33,19 @@ const getBase64 = (file: FileType): Promise<string> =>
 
 interface UserCreateProps {
   closeDrawer: () => void;
+  setAccounts: React.Dispatch<React.SetStateAction<AllUserResponse>>;
+  getUsers: () => Promise<void>;
 }
 
-export default function UserCreate({ closeDrawer }: UserCreateProps) {
+export default function UserCreate({
+  closeDrawer,
+  setAccounts,
+  getUsers,
+}: UserCreateProps) {
   const user = useUserSelector();
   const { t } = useTranslation();
   const [previewOpen, setPreviewOpen] = useState(false);
-  const [previewImage, setPreviewImage] = useState('');
+  const [previewImage, setPreviewImage] = useState("");
   const [loading, setLoading] = useState(false);
 
   const [fileList, setFileList] = useState<UploadFile[]>([]);
@@ -52,49 +59,49 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
     setPreviewOpen(true);
   };
 
-  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) =>
     setFileList(newFileList);
 
   const onFinish = async (values: NewUserCreate) => {
     setLoading(true);
     await UserService.createUser(values);
-
+    await getUsers();
     closeDrawer();
     setLoading(false);
-    message.info(t('createdAccountMessage'), 4);
+    message.info(t("createdAccountMessage"), 4);
   };
 
   const customUploadButton = (
     <div>
       <div
         style={{
-          height: '102px',
-          width: '102px',
-          backgroundColor: '#E2E2E2',
-          borderRadius: '50%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          height: "102px",
+          width: "102px",
+          backgroundColor: "#E2E2E2",
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
           marginBottom: 8,
           marginTop: 30,
-          cursor: 'pointer',
+          cursor: "pointer",
         }}
       >
         <img
           src="./icons/drawer/add_photo_alternate.svg"
           alt="add_photo_alternate"
-          style={{ height: '18px', width: '18px' }}
+          style={{ height: "18px", width: "18px" }}
         />
       </div>
 
-      <span style={{ fontSize: '14px', color: '#8c8c8c' }}>
-        {t('selectPhoto')}
+      <span style={{ fontSize: "14px", color: "#8c8c8c" }}>
+        {t("selectPhoto")}
       </span>
     </div>
   );
 
   const photoToUpload = (
-    <div style={{ height: '102px' }}>
+    <div style={{ height: "102px" }}>
       <Upload
         listType="picture-circle"
         fileList={fileList}
@@ -106,11 +113,11 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
       </Upload>
       {previewImage && (
         <Image
-          wrapperStyle={{ display: 'none' }}
+          wrapperStyle={{ display: "none" }}
           preview={{
             visible: previewOpen,
             onVisibleChange: (visible) => setPreviewOpen(visible),
-            afterOpenChange: (visible) => !visible && setPreviewImage(''),
+            afterOpenChange: (visible) => !visible && setPreviewImage(""),
           }}
           src={previewImage}
         />
@@ -121,24 +128,24 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
   return (
     <div
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
       }}
     >
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginBottom: '36px',
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "36px",
         }}
       >
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
           }}
         >
           {photoToUpload}
@@ -149,83 +156,83 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
         layout="vertical"
         onFinish={onFinish}
         initialValues={{
-          name: '',
-          login: '',
-          password: '',
-          email: '',
-          bindTenantId: '',
-          role: '',
-          status: '',
+          name: "",
+          login: "",
+          password: "",
+          email: "",
+          bindTenantId: "",
+          role: "",
+          status: "",
         }}
-        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+        style={{ flex: 1, display: "flex", flexDirection: "column" }}
       >
         <Form.Item
-          label={t('name')}
+          label={t("name")}
           name="name"
-          rules={[{ required: true, message: t('nameMessage') }]}
+          rules={[{ required: true, message: t("nameMessage") }]}
         >
           <Input />
         </Form.Item>
 
         <Form.Item
-          label={t('login')}
+          label={t("login")}
           name="login"
-          rules={[{ required: true, message: t('loginMessage') }]}
+          rules={[{ required: true, message: t("loginMessage") }]}
         >
           <Input />
         </Form.Item>
 
         <Form.Item
-          label={t('password')}
+          label={t("password")}
           name="password"
-          rules={[{ required: true, message: t('passwordMessage') }]}
+          rules={[{ required: true, message: t("passwordMessage") }]}
         >
           <Input.Password />
         </Form.Item>
 
         <Form.Item
-          label={t('email')}
+          label={t("email")}
           name="email"
           rules={[
-            { required: true, message: t('emailMessage') },
-            { type: 'email', message: t('emailErrorMessage') },
+            { required: true, message: t("emailMessage") },
+            { type: "email", message: t("emailErrorMessage") },
           ]}
         >
           <Input />
         </Form.Item>
 
         <Form.Item
-          label={t('tenant')}
+          label={t("tenant")}
           name="bindTenantId"
-          rules={[{ required: true, message: t('tenantMessage') }]}
+          rules={[{ required: true, message: t("tenantMessage") }]}
         >
           <Input />
         </Form.Item>
 
         <Form.Item
-          label={t('role')}
+          label={t("role")}
           name="role"
-          rules={[{ required: true, message: t('roleMessage') }]}
+          rules={[{ required: true, message: t("roleMessage") }]}
         >
-          <Select placeholder={t('roleMessage')}>
-            {user && user.role === 'OWNER' ? (
-              <Option value="ADMIN">{t('ADMIN')}</Option>
+          <Select placeholder={t("roleMessage")}>
+            {user && user.role === "OWNER" ? (
+              <Option value="ADMIN">{t("ADMIN")}</Option>
             ) : undefined}
-            <Option value="EDITOR">{t('EDITOR')}</Option>
-            <Option value="VIEWER">{t('VIEWER')}</Option>
+            <Option value="EDITOR">{t("EDITOR")}</Option>
+            <Option value="VIEWER">{t("VIEWER")}</Option>
           </Select>
         </Form.Item>
 
         <Form.Item
-          label={t('status')}
+          label={t("status")}
           name="status"
-          rules={[{ required: true, message: t('statusMessage') }]}
+          rules={[{ required: true, message: t("statusMessage") }]}
         >
-          <Select placeholder={t('statusMessage')}>
-            <Option value="ACTIVE">{t('ACTIVE')}</Option>
-            <Option value="DISABLED">{t('DISABLED')}</Option>
-            <Option value="BLOCKED">{t('BLOCKED')}</Option>
-            <Option value="DELETED">{t('DELETED')}</Option>
+          <Select placeholder={t("statusMessage")}>
+            <Option value="ACTIVE">{t("ACTIVE")}</Option>
+            <Option value="DISABLED">{t("DISABLED")}</Option>
+            <Option value="BLOCKED">{t("BLOCKED")}</Option>
+            <Option value="DELETED">{t("DELETED")}</Option>
           </Select>
         </Form.Item>
 
@@ -236,21 +243,21 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
             type="primary"
             htmlType="submit"
             block
-            style={{ color: '#000' }}
+            style={{ color: "#000" }}
           >
             {loading ? (
               <>
-                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{' '}
-                {t('saving')}
+                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{" "}
+                {t("saving")}
               </>
             ) : (
               <>
                 <img
                   src="/icons/drawer/reg.svg"
                   alt="save"
-                  style={{ height: '18px', width: '18px' }}
-                />{' '}
-                {t('addAccount')}
+                  style={{ height: "18px", width: "18px" }}
+                />{" "}
+                {t("addAccount")}
               </>
             )}
           </Button>

client/src/pages/AccountsPage.tsx

@@ -14,7 +14,6 @@ export default function AccountsPage() {
   const { t } = useTranslation();
   const [openCreate, setOpenCreate] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
-  console.log("searchParams", searchParams);
 
   const [activeAccount, setActiveAccount] = useState<
     { login: string; id: number; name: string; email: string } | undefined
@@ -41,16 +40,20 @@ export default function AccountsPage() {
     limit: 10,
   });
 
-  useEffect(() => {
-    async function getUsers() {
-      const data = await UserService.getUsers();
-      setAccounts(data);
-      setSearchParams({
-        page: searchParams.get("page") || "1",
-        limit: searchParams.get("limit") || "10",
-      });
-    }
+  async function getUsers() {
+    setSearchParams({
+      page: searchParams.get("page") || "1",
+      limit: searchParams.get("limit") || "10",
+    });
+    const data = await UserService.getUsers(
+      Number(searchParams.get("page")),
+      Number(searchParams.get("limit"))
+    );
+    console.log("searchParams", searchParams);
+    setAccounts(data);
+  }
 
+  useEffect(() => {
     getUsers();
   }, []);
 
@@ -201,7 +204,11 @@ export default function AccountsPage() {
         closeDrawer={closeCreateDrawer}
         type="create"
       >
-        <UserCreate closeDrawer={closeCreateDrawer} />
+        <UserCreate
+          getUsers={getUsers}
+          setAccounts={setAccounts}
+          closeDrawer={closeCreateDrawer}
+        />
       </ContentDrawer>
       <ContentDrawer
         login={activeAccount?.login}