From f7c8743ed994e3195d31ecdb711b47a544f0a714 Mon Sep 17 00:00:00 2001 From: Dilmurod Date: Wed, 6 Aug 2025 15:41:05 +0500 Subject: [PATCH] added local storage for pagination --- src/Components/Accounting/AccountingCurrent.tsx | 9 ++++++++- src/Components/Accounting/AccountingHistory.tsx | 9 ++++++++- src/Components/Accounting/AccountingLast.tsx | 9 ++++++++- src/Components/Accounting/ConfirmedMonths.tsx | 11 +++++++++-- src/Components/CallRequests/Call.tsx | 9 ++++++++- src/Components/Companies/Companies.tsx | 11 +++++++++-- src/Components/Customers/Customers.tsx | 11 +++++++++-- src/Components/Services/Services.tsx | 11 +++++++++-- src/Components/Statistics/Statistic.tsx | 9 ++++++++- src/Components/Tasks/Tasks.tsx | 11 ++++++++++- src/Components/Teams/Teams.tsx | 11 +++++++++-- src/Components/Updates/Update.tsx | 11 +++++++++-- src/Components/Users/Users.tsx | 11 +++++++++-- 13 files changed, 113 insertions(+), 20 deletions(-) diff --git a/src/Components/Accounting/AccountingCurrent.tsx b/src/Components/Accounting/AccountingCurrent.tsx index c73081a..f03023c 100644 --- a/src/Components/Accounting/AccountingCurrent.tsx +++ b/src/Components/Accounting/AccountingCurrent.tsx @@ -66,7 +66,10 @@ const AccountingCurrent: React.FC = () => { const currentInfo = new Date().toLocaleString("default", { month: "long" }); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -75,6 +78,10 @@ const AccountingCurrent: React.FC = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Accounting/AccountingHistory.tsx b/src/Components/Accounting/AccountingHistory.tsx index bf99cc0..e15dacc 100644 --- a/src/Components/Accounting/AccountingHistory.tsx +++ b/src/Components/Accounting/AccountingHistory.tsx @@ -55,7 +55,10 @@ interface SalaryData { const AccountingHistory: React.FC = () => { const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const [open, setOpen] = useState(false); const [userData, setUserData] = useState(null); @@ -88,6 +91,10 @@ const AccountingHistory: React.FC = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Accounting/AccountingLast.tsx b/src/Components/Accounting/AccountingLast.tsx index e52ef09..22fbde9 100644 --- a/src/Components/Accounting/AccountingLast.tsx +++ b/src/Components/Accounting/AccountingLast.tsx @@ -91,7 +91,10 @@ const AccountingCurrent: React.FC = () => { }; const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -100,6 +103,10 @@ const AccountingCurrent: React.FC = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Accounting/ConfirmedMonths.tsx b/src/Components/Accounting/ConfirmedMonths.tsx index 87156a1..e1c16a8 100644 --- a/src/Components/Accounting/ConfirmedMonths.tsx +++ b/src/Components/Accounting/ConfirmedMonths.tsx @@ -2,12 +2,15 @@ import { useConfirmedMonths } from "../../Hooks/Accounting"; import { Button, Input, Select, Space, Table, theme } from "antd"; import tagIcon from "../../assets/tagIcon.svg"; import dayjs from "dayjs"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { LeftOutlined, RightOutlined } from "@ant-design/icons"; function ConfirmedMonths() { const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -16,6 +19,10 @@ function ConfirmedMonths() { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/CallRequests/Call.tsx b/src/Components/CallRequests/Call.tsx index a15bab8..b5d6ad5 100644 --- a/src/Components/CallRequests/Call.tsx +++ b/src/Components/CallRequests/Call.tsx @@ -18,7 +18,10 @@ import { theme } from "antd"; const Call = ({ socketData }: { socketData: TSocket | undefined }) => { const [status, setStatus] = useState("Awaiting"); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const [tableData, setTableData] = useState(); const { data, isLoading, refetch } = useCallData({ @@ -34,6 +37,10 @@ const Call = ({ socketData }: { socketData: TSocket | undefined }) => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + // const theme = localStorage.getItem("theme") === "true" ? true : false; const { token } = theme.useToken(); diff --git a/src/Components/Companies/Companies.tsx b/src/Components/Companies/Companies.tsx index 15ebabc..9528be4 100644 --- a/src/Components/Companies/Companies.tsx +++ b/src/Components/Companies/Companies.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import AddCompany from "./AddCompanies"; import CompanyTable from "./CompaniesTable"; import { @@ -23,7 +23,10 @@ const Company = () => { const [search, setSearch] = useState(); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const { data, isLoading, refetch } = useCompanyPaginated({ name: search, is_active: undefined, @@ -50,6 +53,10 @@ const Company = () => { }, 1000); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Customers/Customers.tsx b/src/Components/Customers/Customers.tsx index 48fc481..eb40c80 100644 --- a/src/Components/Customers/Customers.tsx +++ b/src/Components/Customers/Customers.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import AddCustomer from "./AddCustomer"; import CustomerTable from "./CustomersTable"; import { @@ -20,7 +20,10 @@ import { theme } from "antd"; const Customer = () => { const [open, setOpen] = useState(false); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const showModal = () => { setOpen(true); }; @@ -42,6 +45,10 @@ const Customer = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Services/Services.tsx b/src/Components/Services/Services.tsx index a6080bb..9d34bcf 100644 --- a/src/Components/Services/Services.tsx +++ b/src/Components/Services/Services.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useServiceData } from "../../Hooks/Services"; import AddService from "./AddService"; import ServiceTable from "./ServiceTable"; @@ -11,7 +11,10 @@ import { theme } from "antd"; const Service = () => { const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -28,6 +31,10 @@ const Service = () => { setOpen(true); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Statistics/Statistic.tsx b/src/Components/Statistics/Statistic.tsx index 4dbff43..47bb418 100644 --- a/src/Components/Statistics/Statistic.tsx +++ b/src/Components/Statistics/Statistic.tsx @@ -82,7 +82,10 @@ const Stat = () => { const [startDate, setStartDate] = useState(start_date); const [endDate, setEndDate] = useState(end_date); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const [forSalary, setForSalary] = useState(true); @@ -93,6 +96,10 @@ const Stat = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Tasks/Tasks.tsx b/src/Components/Tasks/Tasks.tsx index d1aaf23..1a30e88 100644 --- a/src/Components/Tasks/Tasks.tsx +++ b/src/Components/Tasks/Tasks.tsx @@ -43,7 +43,12 @@ const Task = ({ const [search, setSearch] = useState(""); const [status, setStatus] = useState(); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); + const [uploadOpen, setUploadOpen] = useState(false); const [errorModal, setErrorModal] = useState(false); const [uncomletedData, setUncomletedData] = useState(); @@ -55,6 +60,10 @@ const Task = ({ setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + useEffect(() => { if ( socketData && diff --git a/src/Components/Teams/Teams.tsx b/src/Components/Teams/Teams.tsx index 1b389ab..cd0d31f 100644 --- a/src/Components/Teams/Teams.tsx +++ b/src/Components/Teams/Teams.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useTeamData } from "../../Hooks/Teams"; import TeamTable from "./TeamTable"; //@ts-ignore @@ -9,7 +9,10 @@ import { LeftOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons"; const Team = () => { const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const { data, isLoading, refetch } = useTeamData({ page: page, @@ -28,6 +31,10 @@ const Team = () => { setPage(1); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Updates/Update.tsx b/src/Components/Updates/Update.tsx index ff97f3d..990aac5 100644 --- a/src/Components/Updates/Update.tsx +++ b/src/Components/Updates/Update.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import AddUpdate from "./AddUpdate"; import { Button, Input, Select, Space, Typography, theme } from "antd"; import { @@ -35,7 +35,10 @@ const Update = () => { const { Option } = Select; const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const pageSizeOptions = [15, 20, 30, 40, 50]; @@ -52,6 +55,10 @@ const Update = () => { const { token } = theme.useToken(); + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a); diff --git a/src/Components/Users/Users.tsx b/src/Components/Users/Users.tsx index 22144af..78dc314 100644 --- a/src/Components/Users/Users.tsx +++ b/src/Components/Users/Users.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useUserData } from "../../Hooks/Users"; import AddUser from "./AddUser"; import UserTable from "./UserTable"; @@ -17,13 +17,20 @@ import { Button, Input, Pagination, Space, Typography } from "antd"; const User = () => { const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(15); + const [pageSize, setPageSize] = useState(() => { + const saved = localStorage.getItem("general_pageSize"); + return saved ? Number(saved) : 15; + }); const [open, setOpen] = useState(false); const [search, setSearch] = useState(""); const showModal = () => { setOpen(true); }; + useEffect(() => { + localStorage.setItem("general_pageSize", String(pageSize)); + }, [pageSize]); + const Next = () => { const a = Number(page) + 1; setPage(a);