delete localstorage, add query state in input search

open-schools · Jul 12, 2024 · ea2d023 · ea2d023
1 parent 66e7856
commit ea2d023
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 28 deletions.
diff --git a/apps/schools/domains/common/components/table/index.tsx b/apps/schools/domains/common/components/table/index.tsx
@@ -9,6 +9,7 @@ import { typeTable } from '@domains/common/constants/Table'
 import { CustomTableProps } from '@domains/common/components/table/interfaces'
 import { calculateAverageWidth } from '@domains/common/utils/calculateAverageWidth'
 import { ColumnType } from 'antd/lib/table/interface'
+import { useQueryState } from "next-usequerystate";
 
 export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, DataItemType>) => {
     const {
@@ -64,7 +65,7 @@ export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, Da
     ]
 
     const [isTableLoading, setIsTableLoading] = useState(false)
-    const [inputText, setInputText] = useState('')
+    const [inputText, setInputText] = useQueryState('search')
     const [dataSource, setDataSource] = useState<any[]>([])
     const router = useRouter()
 
@@ -134,7 +135,7 @@ export const Table = <RowType, DataItemType>(props: CustomTableProps<RowType, Da
                     }}
                     customType={'inputSearch'}
                     placeholder={'Поиск'}
-                    value={inputText}
+                    value={inputText || ''}
                     children={
                         <>
                             <SearchOutlined className={styles.search} />

diff --git a/apps/schools/domains/employee/components/employeeList/index.tsx b/apps/schools/domains/employee/components/employeeList/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, { useState } from 'react'
 import { Typography } from 'antd'
 import router from 'next/router'
 import styles from './styles/styles.module.scss'
@@ -19,10 +19,6 @@ export function EmployeeList() {
     const { organizationId } = useOrganization()
     const [searchRequest, setSearchRequest] = useQueryState('search')
 
-    useEffect(() => {
-        localStorage.setItem('search', searchRequest)
-    }, [searchRequest]);
-
     const [paginationParams, setPaginationParams] = useState({
         page: defaultPaginationTablePage,
         pageSize: defaultPaginationTablePageSize,
@@ -35,8 +31,6 @@ export function EmployeeList() {
         page_size: paginationParams.pageSize,
     })
 
-    const searchRequestText = localStorage.getItem('search') ? localStorage.getItem('search') : searchRequest;
-
     return (
         <>
             <div className={styles.header}>
@@ -73,7 +67,7 @@ export function EmployeeList() {
                 isLoading={isFetching}
                 mainRoute={RoutePath[AppRoutes.EMPLOYEE_LIST]}
                 searchFields={searchColumns}
-                searchRequestText={searchRequestText || ''}
+                searchRequestText={searchRequest || ''}
                 setSearchRequestText={(text) => setSearchRequest(text)}
             />
         </>

diff --git a/apps/schools/domains/query/components/queryList/index.tsx b/apps/schools/domains/query/components/queryList/index.tsx
@@ -28,12 +28,6 @@ export function QueryList() {
     const [searchRequest, setSearchRequest] = useQueryState('search')
     const [isTableLoading, setIsTableLoading] = useState(false)
 
-    useEffect(() => {
-        localStorage.setItem('search', searchRequest)
-    }, [searchRequest]);
-
-    const searchRequestText = localStorage.getItem('search') ? localStorage.getItem('search') : searchRequest;
-
     const [statuses, setStatuses] = useQueryState(
         'statuses',
         parseAsArrayOf(parseAsString).withOptions({
@@ -83,7 +77,7 @@ export function QueryList() {
 
     const { data: queries, isFetching: isQueriesFetching } = useGetAllJoinCircleQueriesQuery({
         circle__organization__id: organizationId,
-        or_search: createSearchTextForRequest(searchRequestText || '', searchStudentsColumns),
+        or_search: createSearchTextForRequest(searchRequest || '', searchStudentsColumns),
         page: paginationParams.page,
         page_size: paginationParams.pageSize,
     })
@@ -113,7 +107,7 @@ export function QueryList() {
             pageTitle={'Заявки'}
             data={queries}
             isLoading={isQueriesFetching}
-            searchTrigger={searchRequestText || ''}
+            searchTrigger={searchRequest || ''}
         >
             <div className={styles.header}>
                 <Typography.Title level={1}>Заявки</Typography.Title>
@@ -208,7 +202,7 @@ export function QueryList() {
                     },
                 }}
                 sortFields={['created_at']}
-                searchRequestText={searchRequestText || ''}
+                searchRequestText={searchRequest || ''}
                 setSearchRequestText={(text) => setSearchRequest(text)}
                 onChange={(pagination, filters, sorter) => {
                     const localStatuses = [...(filters['status'] ?? [])] as string[]

diff --git a/apps/schools/domains/ticket/components/ticketList/index.tsx b/apps/schools/domains/ticket/components/ticketList/index.tsx
@@ -36,12 +36,6 @@ export function TicketList() {
     const { organizationId } = useOrganization()
     const [searchRequest, setSearchRequest] = useQueryState('search')
 
-    useEffect(() => {
-        localStorage.setItem('search', searchRequest)
-    }, [searchRequest]);
-
-    const searchRequestText = localStorage.getItem('search') ? localStorage.getItem('search') : searchRequest;
-
     const [statuses, setStatuses] = useQueryState(
         'statuses',
         parseAsArrayOf(parseAsString).withOptions({
@@ -83,7 +77,7 @@ export function TicketList() {
 
     const { data: tickets, isFetching: isTicketsFetching } = useGetAllTicketsQuery({
         organization_id: organizationId,
-        or_search: createSearchTextForRequest(searchRequestText || '', searchTicketsColumns),
+        or_search: createSearchTextForRequest(searchRequest || '', searchTicketsColumns),
         page: paginationParams.page,
         page_size: paginationParams.pageSize,
     })
@@ -128,7 +122,7 @@ export function TicketList() {
             pageTitle={'Обращения'}
             data={tickets}
             isLoading={isTicketsFetching}
-            searchTrigger={searchRequestText || ''}
+            searchTrigger={searchRequest || ''}
         >
             <div className={styles.header}>
                 <Typography.Title level={1}>Обращения</Typography.Title>
@@ -215,7 +209,7 @@ export function TicketList() {
                         },
                     }}
                     sortFields={['created_at']}
-                    searchRequestText={searchRequestText || ''}
+                    searchRequestText={searchRequest || ''}
                     setSearchRequestText={(text) => setSearchRequest(text)}
                     onChange={handleChange}
                 />