From ad312d4ff8f7068e5988c0f1b9bf8bd38ee2c7a8 Mon Sep 17 00:00:00 2001
From: Vladislav Syrochkin <vlad.dev@heado.ru>
Date: Mon, 30 Jun 2025 12:19:29 +0500
Subject: [PATCH] feat(AccountsPage): loading with search params

---
 client/src/pages/AccountsPage.tsx | 123 +++++++++++++++---------------
 1 file changed, 62 insertions(+), 61 deletions(-)

diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx
index 0cda60b..b5a9963 100644
--- a/client/src/pages/AccountsPage.tsx
+++ b/client/src/pages/AccountsPage.tsx
@@ -1,19 +1,20 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AccountStatus, AllUser, AllUserResponse } from '@/types/user';
-import Header from '@/components/Header';
-import ContentDrawer from '@/components/ContentDrawer';
-import UserCreate from '@/components/UserCreate';
-import { Avatar, Table } from 'antd';
-import { TableProps } from 'antd/lib';
-import { UserService } from '@/services/userService';
-import UserEdit from '@/components/UserEdit';
-import { useSearchParams } from 'react-router-dom';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AccountStatus, AllUser, AllUserResponse } from "@/types/user";
+import Header from "@/components/Header";
+import ContentDrawer from "@/components/ContentDrawer";
+import UserCreate from "@/components/UserCreate";
+import { Avatar, Table } from "antd";
+import { TableProps } from "antd/lib";
+import { UserService } from "@/services/userService";
+import UserEdit from "@/components/UserEdit";
+import { useSearchParams } from "react-router-dom";
 
 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
@@ -45,8 +46,8 @@ export default function AccountsPage() {
       const data = await UserService.getUsers();
       setAccounts(data);
       setSearchParams({
-        page: data.currentPage.toString(),
-        limit: data.limit.toString(),
+        page: searchParams.get("page") || "1",
+        limit: searchParams.get("limit") || "10",
       });
     }
 
@@ -54,22 +55,22 @@ export default function AccountsPage() {
   }, []);
 
   const statusColor = {
-    ACTIVE: '#27AE60',
-    DISABLED: '#606060',
-    BLOCKED: '#FF0000',
-    DELETED: '#B30000',
+    ACTIVE: "#27AE60",
+    DISABLED: "#606060",
+    BLOCKED: "#FF0000",
+    DELETED: "#B30000",
   };
 
-  const columns: TableProps<AllUser>['columns'] = [
+  const columns: TableProps<AllUser>["columns"] = [
     {
-      title: '#',
-      dataIndex: 'id',
-      key: 'id',
+      title: "#",
+      dataIndex: "id",
+      key: "id",
     },
     {
-      title: t('nameLogin'),
-      dataIndex: 'nameLogin',
-      key: 'nameLogin',
+      title: t("nameLogin"),
+      dataIndex: "nameLogin",
+      key: "nameLogin",
       render: (text, record) => (
         <div
           onClick={() => {
@@ -77,24 +78,24 @@ export default function AccountsPage() {
               login: record.login,
               id: record.id,
               name: record.name,
-              email: record.email || '',
+              email: record.email || "",
             });
             showEditDrawer();
           }}
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '16px',
-            cursor: 'pointer',
+            display: "flex",
+            alignItems: "center",
+            gap: "16px",
+            cursor: "pointer",
           }}
         >
           <div
             style={{
-              height: '32px',
-              width: '32px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
+              height: "32px",
+              width: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
             <Avatar
@@ -102,47 +103,47 @@ export default function AccountsPage() {
               src={`https://gamma.heado.ru/go/ava?name=${record.login}`}
             />
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div style={{ display: "flex", flexDirection: "column" }}>
             <div>{record.name}</div>
-            <div style={{ color: '#606060' }}>{record.login}</div>
+            <div style={{ color: "#606060" }}>{record.login}</div>
           </div>
         </div>
       ),
     },
     {
-      title: 'E-mail',
-      dataIndex: 'email',
-      key: 'email',
+      title: "E-mail",
+      dataIndex: "email",
+      key: "email",
     },
     {
-      title: t('tenant'),
-      dataIndex: 'bindTenantId',
-      key: 'tenant',
+      title: t("tenant"),
+      dataIndex: "bindTenantId",
+      key: "tenant",
     },
     {
-      title: t('role'),
-      dataIndex: 'role',
-      key: 'role',
+      title: t("role"),
+      dataIndex: "role",
+      key: "role",
       render: (text) => <div>{t(text)}</div>,
     },
     {
-      title: t('createdAt'),
-      dataIndex: 'createdAt',
-      key: 'createdAt',
+      title: t("createdAt"),
+      dataIndex: "createdAt",
+      key: "createdAt",
       render: (text) => (
         <div>
-          {new Date(text).toLocaleString('ru', {
-            year: '2-digit',
-            month: '2-digit',
-            day: '2-digit',
+          {new Date(text).toLocaleString("ru", {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
           })}
         </div>
       ),
     },
     {
-      title: t('status'),
-      dataIndex: 'status',
-      key: 'status',
+      title: t("status"),
+      dataIndex: "status",
+      key: "status",
       render: (text) => (
         <div style={{ color: statusColor[text as AccountStatus] }}>
           {t(text)}
@@ -151,7 +152,7 @@ export default function AccountsPage() {
     },
   ];
 
-  const onTableChange: TableProps<AllUser>['onChange'] = (pagination) => {
+  const onTableChange: TableProps<AllUser>["onChange"] = (pagination) => {
     console.log(pagination);
     UserService.getUsers(
       pagination.current as number,
@@ -168,15 +169,15 @@ export default function AccountsPage() {
   return (
     <>
       <Header
-        title={t('accounts')}
+        title={t("accounts")}
         additionalContent={
           <img
             src="./icons/header/add_2.svg"
             alt="add"
             style={{
-              height: '18px',
-              width: '18px',
-              cursor: 'pointer',
+              height: "18px",
+              width: "18px",
+              cursor: "pointer",
             }}
             onClick={showCreateDrawer}
           />
@@ -192,7 +193,7 @@ export default function AccountsPage() {
           current: accounts.currentPage,
           total: accounts.amountCount,
         }}
-        rowKey={'id'}
+        rowKey={"id"}
       />
 
       <ContentDrawer