diff --git a/apps/schools/domains/circle/components/circleList/index.tsx b/apps/schools/domains/circle/components/circleList/index.tsx index 9c23ba0d..9cfadbf3 100644 --- a/apps/schools/domains/circle/components/circleList/index.tsx +++ b/apps/schools/domains/circle/components/circleList/index.tsx @@ -15,9 +15,10 @@ import { getVarsForAddressColumn } from '@domains/common/utils/geo' import { AppRoutes, RoutePath } from '@domains/common/constants/routerEnums' import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@domains/common/constants/Table' import { scrollToTop } from '@domains/common/utils/scrollInDirection' +import {useQueryState} from "next-usequerystate"; export function CircleList() { - const [searchRequestText, setSearchRequestText] = useState('') + const [searchRequestText, setSearchRequestText] = useQueryState('search') const { organizationId } = useOrganization() const [paginationParams, setPaginationParams] = useState({ @@ -27,7 +28,7 @@ export function CircleList() { const { data: circles, isFetching: isFetching } = useGetAllCirclesQuery({ organization_id: organizationId, - or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns), + or_search: createSearchTextForRequest(searchRequestText || '', searchStudentsColumns), page: paginationParams.page, page_size: paginationParams.pageSize, }) @@ -41,7 +42,7 @@ export function CircleList() { data={circles} isLoading={isFetching} handleRunTask={() => router.push(RoutePath[AppRoutes.CIRCLE_CREATE])} - searchTrigger={searchRequestText} + searchTrigger={searchRequestText || ''} >
Кружки @@ -94,8 +95,8 @@ export function CircleList() { }, }} customWidths={[60, 25, 15]} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequestText || ''} + setSearchRequestText={(text) => setSearchRequestText(text)} rowClassName={styles.tableRowPointer} /> diff --git a/apps/schools/domains/circle/components/currentCircle/index.tsx b/apps/schools/domains/circle/components/currentCircle/index.tsx index 48cbcb25..bb89ebfd 100644 --- a/apps/schools/domains/circle/components/currentCircle/index.tsx +++ b/apps/schools/domains/circle/components/currentCircle/index.tsx @@ -25,10 +25,11 @@ import { getVarsForAddressColumn } from '@domains/common/utils/geo' import { StatusesEnum } from '@domains/common/constants/Enums' import { ErrorType } from '@store/commonApi' import { AppRoutes, DynamicAppRoutes, DynamicRoutePath, RoutePath } from '@domains/common/constants/routerEnums' +import {useQueryState} from "next-usequerystate"; const CurrentCircle = () => { const [isModalVisible, setIsModalVisible] = useState(false) - const [searchRequestText, setSearchRequestText] = useState('') + const [searchRequestText, setSearchRequestText] = useQueryState('search') const [mutation, isDeleteFinished] = useDeleteCircleMutation() const uuid = getUuidFromUrl() const router = useRouter() @@ -40,7 +41,7 @@ const CurrentCircle = () => { const { data: circle, error: circleError } = useGetCircleQuery({ circle_id: uuid[0] }) const { data: students, isLoading } = useGetCircleStudentsQuery({ circle_id: uuid[0], - or_search: createSearchTextForRequest(searchRequestText, searchColumns), + or_search: createSearchTextForRequest(searchRequestText || '', searchColumns), }) const { data: queryData } = useGetCurrentCircleQuery({ circle_id: uuid[0], organization_id: organizationId }) @@ -135,8 +136,8 @@ const CurrentCircle = () => { isLoading={isLoading} needNumbering={true} searchFields={['student_name', 'student_phone', 'parent_names', 'parent_phones']} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequestText || ''} + setSearchRequestText={(text) => setSearchRequestText(text)} />
diff --git a/apps/schools/domains/common/components/searchInput/index.tsx b/apps/schools/domains/common/components/searchInput/index.tsx index 93986b3c..054a158b 100644 --- a/apps/schools/domains/common/components/searchInput/index.tsx +++ b/apps/schools/domains/common/components/searchInput/index.tsx @@ -1,14 +1,15 @@ -import React, { useState, ChangeEvent } from 'react' +import React, { ChangeEvent } from 'react' import { Input } from '@domains/common/components/input' import { CloseCircleOutlined, SearchOutlined } from '@ant-design/icons' import styles from './styles/styles.module.scss' +import { useQueryState } from 'next-usequerystate' interface SearchInputProps { onSearchChange: (value: string) => void } const SearchInput: React.FC = ({ onSearchChange }) => { - const [inputText, setInputText] = useState('') + const [inputText, setInputText] = useQueryState('search') const handleInputChange = (event: ChangeEvent) => { const value = event.target.value @@ -21,7 +22,7 @@ const SearchInput: React.FC = ({ onSearchChange }) => { onChange={handleInputChange} customType={'inputSearch'} placeholder={'Поиск'} - value={inputText} + value={inputText || ''} children={ <> diff --git a/apps/schools/domains/common/components/table/index.tsx b/apps/schools/domains/common/components/table/index.tsx index 1e7d1ffb..108f962e 100644 --- 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 = (props: CustomTableProps) => { const { @@ -64,7 +65,7 @@ export const Table = (props: CustomTableProps([]) const router = useRouter() @@ -134,7 +135,7 @@ export const Table = (props: CustomTableProps diff --git a/apps/schools/domains/common/components/table/interfaces.ts b/apps/schools/domains/common/components/table/interfaces.ts index 268282eb..332235ab 100644 --- a/apps/schools/domains/common/components/table/interfaces.ts +++ b/apps/schools/domains/common/components/table/interfaces.ts @@ -3,6 +3,7 @@ import { ReturnedData } from '@domains/common/redux/interfaces' import { TableProps } from 'antd' import { ColumnFilterItem } from 'antd/lib/table/interface' import { Key } from 'antd/es/table/interface' +import {Options} from "next-usequerystate"; export interface CustomFieldsProps { [key: string]: React.FC<{ @@ -30,7 +31,10 @@ export interface CustomTableProps extends TableProps customFields?: CustomFieldsProps searchRequestText: string needNumbering?: boolean - setSearchRequestText: React.Dispatch> + setSearchRequestText: ( + value: string | ((old: string | null) => string | null) | null, + options?: Options | undefined, + ) => Promise mainRoute: string sortFields?: string[] customFilterFields?: CustomFilterFieldsProps diff --git a/apps/schools/domains/employee/components/employeeList/index.tsx b/apps/schools/domains/employee/components/employeeList/index.tsx index 7247578b..1621d49e 100644 --- a/apps/schools/domains/employee/components/employeeList/index.tsx +++ b/apps/schools/domains/employee/components/employeeList/index.tsx @@ -13,10 +13,11 @@ import { searchColumns } from '@domains/employee/components/employeeList/constan import { AppRoutes, RoutePath } from '@domains/common/constants/routerEnums' import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@domains/common/constants/Table' import { scrollToTop } from '@domains/common/utils/scrollInDirection' +import { useQueryState } from 'next-usequerystate' export function EmployeeList() { - const [searchRequestText, setSearchRequestText] = useState('') const { organizationId } = useOrganization() + const [searchRequest, setSearchRequest] = useQueryState('search') const [paginationParams, setPaginationParams] = useState({ page: defaultPaginationTablePage, @@ -25,7 +26,7 @@ export function EmployeeList() { const { data, isFetching } = useGetAllEmployeesQuery({ organization: organizationId, - or_search: createSearchTextForRequest(searchRequestText, searchColumns), + or_search: createSearchTextForRequest(searchRequest || '', searchColumns), page: paginationParams.page, page_size: paginationParams.pageSize, }) @@ -58,17 +59,17 @@ export function EmployeeList() { setPaginationParams({ page, pageSize, - }) - scrollToTop() + }); + scrollToTop(); }, }} data={data} isLoading={isFetching} mainRoute={RoutePath[AppRoutes.EMPLOYEE_LIST]} searchFields={searchColumns} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequest || ''} + setSearchRequestText={(text) => setSearchRequest(text)} /> ) -} +} \ No newline at end of file diff --git a/apps/schools/domains/query/components/queryList/index.tsx b/apps/schools/domains/query/components/queryList/index.tsx index e8153aff..b554fe46 100644 --- a/apps/schools/domains/query/components/queryList/index.tsx +++ b/apps/schools/domains/query/components/queryList/index.tsx @@ -25,7 +25,7 @@ import { scrollToTop } from '@domains/common/utils/scrollInDirection' export function QueryList() { const { organizationId } = useOrganization() - const [searchRequestText, setSearchRequestText] = useState('') + const [searchRequest, setSearchRequest] = useQueryState('search') const [isTableLoading, setIsTableLoading] = useState(false) const [statuses, setStatuses] = useQueryState( @@ -77,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, }) @@ -95,9 +95,7 @@ export function QueryList() { const handleSearchChange = useCallback((value: string) => { setIsTableLoading(true) - setTimeout(() => { - setSearchRequestText(value) - }, 1000) + setSearchRequest(value) }, []) return ( @@ -107,7 +105,7 @@ export function QueryList() { pageTitle={'Заявки'} data={queries} isLoading={isQueriesFetching} - searchTrigger={searchRequestText} + searchTrigger={searchRequest || ''} >
Заявки @@ -202,8 +200,8 @@ export function QueryList() { }, }} sortFields={['created_at']} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequest || ''} + setSearchRequestText={(text) => setSearchRequest(text)} onChange={(pagination, filters, sorter) => { const localStatuses = [...(filters['status'] ?? [])] as string[] setStatuses(localStatuses.length === 0 ? null : localStatuses) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index f035c9a2..619998ab 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react' +import React, { useCallback, useState } from 'react' import { Typography } from 'antd' import router from 'next/router' import styles from './styles/styles.module.scss' @@ -17,6 +17,7 @@ import { scrollToTop } from '@domains/common/utils/scrollInDirection' import { handlePaginationChange } from '@domains/common/handlers/paginationChange' import { calculateResults } from '@domains/student/handlers/resultsCalculate' import { getTotalPages } from '@domains/common/utils/getTotalPages' +import { useQueryState } from "next-usequerystate" export function StudentList() { const [queryPaginationParams, setQueryPaginationParams] = useState({ @@ -30,20 +31,20 @@ export function StudentList() { }, }) - const [searchRequestText, setSearchRequestText] = useState('') + const [searchRequestText, setSearchRequestText] = useQueryState('search') const { organizationId } = useOrganization() const { data: invites, isLoading: isLoadingInvites } = useGetAllStudentInvitationsQuery({ circle__organization__id: organizationId, status: StatusesEnum.SENT, - or_search: createSearchTextForRequest(searchRequestText, searchInvitesColumns), + or_search: createSearchTextForRequest(searchRequestText || '', searchInvitesColumns), page: queryPaginationParams.invites.page, page_size: queryPaginationParams.invites.pageSize, }) const { data: students, isFetching: isFetchingStudents } = useGetAllStudentsQuery({ circle__organization: organizationId, - or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns), + or_search: createSearchTextForRequest(searchRequestText || '', searchStudentsColumns), page: queryPaginationParams.students.page, page_size: queryPaginationParams.students.pageSize, }) @@ -90,7 +91,7 @@ export function StudentList() { data={data} isLoading={isFetchingStudents || isLoadingInvites} handleRunTask={() => router.push(RoutePath[AppRoutes.STUDENT_CREATE])} - searchTrigger={searchRequestText} + searchTrigger={searchRequestText || ''} >
Обучающиеся @@ -127,9 +128,9 @@ export function StudentList() { isLoading={isLoadingInvites || isFetchingStudents} mainRoute={RoutePath[AppRoutes.STUDENT_LIST]} searchFields={['student_name', 'student_phone', 'parent_phone', 'circle_name']} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequestText || ''} + setSearchRequestText={(text) => setSearchRequestText(text)} /> ) -} +} \ No newline at end of file diff --git a/apps/schools/domains/ticket/components/ticketList/index.tsx b/apps/schools/domains/ticket/components/ticketList/index.tsx index c8fbfc49..f74acbc3 100644 --- a/apps/schools/domains/ticket/components/ticketList/index.tsx +++ b/apps/schools/domains/ticket/components/ticketList/index.tsx @@ -32,9 +32,9 @@ type HandleChange = ( export function TicketList() { const [inputText, setInputText] = useState('') - const [searchRequestText, setSearchRequestText] = useState('') const [isTableLoading, setIsTableLoading] = useState(false) const { organizationId } = useOrganization() + const [searchRequest, setSearchRequest] = useQueryState('search') const [statuses, setStatuses] = useQueryState( 'statuses', @@ -77,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, }) @@ -93,18 +93,14 @@ export function TicketList() { if (typeof text === 'string') { setIsTableLoading(true) setInputText(text) - setTimeout(() => { - setSearchRequestText(text) - }, 1000) + setSearchRequest(text) } else { setIsTableLoading(true) setInputText(text.target.value) - setTimeout(() => { - setSearchRequestText(text.target.value) - }, 1000) + setSearchRequest(text.target.value) } }, - [setIsTableLoading, setInputText, setSearchRequestText], + [setIsTableLoading, setInputText, setSearchRequest], ) const handleChange: HandleChange = useCallback( @@ -122,7 +118,7 @@ export function TicketList() { pageTitle={'Обращения'} data={tickets} isLoading={isTicketsFetching} - searchTrigger={searchRequestText} + searchTrigger={searchRequest || ''} >
Обращения @@ -209,8 +205,8 @@ export function TicketList() { }, }} sortFields={['created_at']} - searchRequestText={searchRequestText} - setSearchRequestText={setSearchRequestText} + searchRequestText={searchRequest || ''} + setSearchRequestText={(text) => setSearchRequest(text)} onChange={handleChange} />