fix search

This commit is contained in:
karimaldeen 2024-09-15 17:13:37 +03:00
parent cd6e47903b
commit 9655e7da41
6 changed files with 26 additions and 4 deletions

View File

@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useFilterStateState } from "../../zustand/Filter"; import { useFilterStateState } from "../../zustand/Filter";
import { useDebounce } from "../../utils/useDebounce"; import { useDebounce } from "../../utils/useDebounce";
import { PaginationParams } from "../../api/utils/PaginationParams";
interface Props { interface Props {
placeholder: string; placeholder: string;
@ -14,12 +15,16 @@ const SearchField: React.FC<Props> = ({ placeholder, searchBy }) => {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const { setFilter,Filter } = useFilterStateState(); const { setFilter,Filter } = useFilterStateState();
const { page } = PaginationParams(location);
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
setSearchQuery(value); setSearchQuery(value);
}; };
const handleInputChangeWithDebounce = useDebounce((value: string) => { const handleInputChangeWithDebounce = useDebounce((value: string) => {
if(Number(page) > 1){
}
setFilter({ setFilter({
[searchBy]: value, [searchBy]: value,
}); });

View File

@ -3,13 +3,20 @@ import { useTranslation } from "react-i18next";
import { Divider, Select } from "antd"; import { Divider, Select } from "antd";
import usePagination from "../../Layout/Dashboard/usePagination"; import usePagination from "../../Layout/Dashboard/usePagination";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useFilterStateState } from "../../zustand/Filter";
const PaginationColumn = () => { const PaginationColumn = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const { Filter ,setFilter } = useFilterStateState();
const handleChange = (value: string) => { const handleChange = (value: string) => {
navigate(`?per_page=${value}`); navigate(`?per_page=${value}`);
setFilter({
per_page:value
})
}; };
return ( return (

View File

@ -1,6 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { PaginationAntd, PaginationMeta } from "../../types/Table"; import { PaginationAntd, PaginationMeta } from "../../types/Table";
import { useFilterStateState } from "../../zustand/Filter";
interface Data { interface Data {
meta: PaginationMeta; meta: PaginationMeta;
@ -9,6 +10,7 @@ interface Data {
const usePagination = (data: Data) => { const usePagination = (data: Data) => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const { Filter ,setFilter } = useFilterStateState();
const [pagination, setPagination] = useState<PaginationAntd>({ const [pagination, setPagination] = useState<PaginationAntd>({
current: data?.meta?.current_page || 1, current: data?.meta?.current_page || 1,
@ -27,7 +29,11 @@ const usePagination = (data: Data) => {
}, [data]); }, [data]);
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
navigate(`?page=${page}`); // navigate(`?page=${page}`);
setFilter({
...Filter,
page:page
})
}; };
return { pagination, handlePageChange }; return { pagination, handlePageChange };

View File

@ -14,6 +14,7 @@ const App: React.FC = () => {
console.log(filterState,"filterState"); console.log(filterState,"filterState");
const response = useGetAllQuestion({ const response = useGetAllQuestion({
nullable_parent:"null",
pagination: true, pagination: true,
...filterState, ...filterState,
content:Filter?.content, content:Filter?.content,

View File

@ -15,6 +15,7 @@ const App: React.FC = () => {
const content = Filter?.content ; const content = Filter?.content ;
const response = useGetAllQuestion({ const response = useGetAllQuestion({
nullable_parent:"null",
lessonsIds: [lesson_id], lessonsIds: [lesson_id],
pagination: true, pagination: true,
...filterState, ...filterState,

View File

@ -3,6 +3,7 @@ import useAxios from "./useAxios";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { PaginationParams } from "../utils/PaginationParams"; import { PaginationParams } from "../utils/PaginationParams";
import { filterParams } from "../utils/filterParams"; import { filterParams } from "../utils/filterParams";
import { useFilterStateState } from "../../zustand/Filter";
function useGetQuery( function useGetQuery(
KEY: string | string[], KEY: string | string[],
url: string, url: string,
@ -13,10 +14,11 @@ function useGetQuery(
const { show, pagination, ...remainingParams } = params; const { show, pagination, ...remainingParams } = params;
const location = useLocation(); const location = useLocation();
const { Filter ,setFilter } = useFilterStateState();
const { page, per_page } = PaginationParams(location); const page = Filter?.page ;
const per_page = Filter?.per_page ;
// const { per_page } = PaginationParams(location);
console.log(remainingParams)
const paramToSend = pagination const paramToSend = pagination