From 03f4523d57ce6632b0de15939fa6cf5663f91854 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Fri, 16 Aug 2024 13:42:55 -0400 Subject: [PATCH] bug fix --- components/FilterSearchDropdown.tsx | 40 +++++++++++++++---------- components/SortDropdown.tsx | 33 +++++++++++++++++---- hooks/store/links.tsx | 46 +++++++++++++++++++++-------- 3 files changed, 84 insertions(+), 35 deletions(-) diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx index a0adc37..70f0aca 100644 --- a/components/FilterSearchDropdown.tsx +++ b/components/FilterSearchDropdown.tsx @@ -1,6 +1,8 @@ import { dropdownTriggerer } from "@/lib/client/utils"; -import React from "react"; +import React, { useEffect } from "react"; import { useTranslation } from "next-i18next"; +import { resetInfiniteQueryPagination } from "@/hooks/store/links"; +import { useQueryClient } from "@tanstack/react-query"; type Props = { setSearchFilter: Function; @@ -18,6 +20,7 @@ export default function FilterSearchDropdown({ searchFilter, }: Props) { const { t } = useTranslation(); + const queryClient = useQueryClient(); return (
@@ -41,9 +44,10 @@ export default function FilterSearchDropdown({ name="search-filter-checkbox" className="checkbox checkbox-primary" checked={searchFilter.name} - onChange={() => - setSearchFilter({ ...searchFilter, name: !searchFilter.name }) - } + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSearchFilter({ ...searchFilter, name: !searchFilter.name }); + }} /> {t("name")} @@ -59,9 +63,10 @@ export default function FilterSearchDropdown({ name="search-filter-checkbox" className="checkbox checkbox-primary" checked={searchFilter.url} - onChange={() => - setSearchFilter({ ...searchFilter, url: !searchFilter.url }) - } + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSearchFilter({ ...searchFilter, url: !searchFilter.url }); + }} /> {t("link")} @@ -77,12 +82,13 @@ export default function FilterSearchDropdown({ name="search-filter-checkbox" className="checkbox checkbox-primary" checked={searchFilter.description} - onChange={() => + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); setSearchFilter({ ...searchFilter, description: !searchFilter.description, - }) - } + }); + }} /> {t("description")} @@ -100,9 +106,10 @@ export default function FilterSearchDropdown({ name="search-filter-checkbox" className="checkbox checkbox-primary" checked={searchFilter.tags} - onChange={() => - setSearchFilter({ ...searchFilter, tags: !searchFilter.tags }) - } + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSearchFilter({ ...searchFilter, tags: !searchFilter.tags }); + }} /> {t("tags")} @@ -118,12 +125,13 @@ export default function FilterSearchDropdown({ name="search-filter-checkbox" className="checkbox checkbox-primary" checked={searchFilter.textContent} - onChange={() => + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); setSearchFilter({ ...searchFilter, textContent: !searchFilter.textContent, - }) - } + }); + }} /> {t("full_content")} diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx index 7dee461..af9ed5f 100644 --- a/components/SortDropdown.tsx +++ b/components/SortDropdown.tsx @@ -3,6 +3,8 @@ import { Sort } from "@/types/global"; import { dropdownTriggerer } from "@/lib/client/utils"; import { TFunction } from "i18next"; import useLocalSettingsStore from "@/store/localSettings"; +import { resetInfiniteQueryPagination } from "@/hooks/store/links"; +import { useQueryClient } from "@tanstack/react-query"; type Props = { sortBy: Sort; @@ -12,6 +14,7 @@ type Props = { export default function SortDropdown({ sortBy, setSort, t }: Props) { const { updateSettings } = useLocalSettingsStore(); + const queryClient = useQueryClient(); useEffect(() => { updateSettings({ sortBy }); @@ -39,7 +42,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.DateNewestFirst} - onChange={() => setSort(Sort.DateNewestFirst)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.DateNewestFirst); + }} /> {t("date_newest_first")} @@ -57,7 +63,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.DateOldestFirst} - onChange={() => setSort(Sort.DateOldestFirst)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.DateOldestFirst); + }} /> {t("date_oldest_first")} @@ -75,7 +84,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.NameAZ} - onChange={() => setSort(Sort.NameAZ)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.NameAZ); + }} /> {t("name_az")} @@ -91,7 +103,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.NameZA} - onChange={() => setSort(Sort.NameZA)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.NameZA); + }} /> {t("name_za")} @@ -107,7 +122,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.DescriptionAZ} - onChange={() => setSort(Sort.DescriptionAZ)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.DescriptionAZ); + }} /> {t("description_az")} @@ -125,7 +143,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) { name="sort-radio" className="radio checked:bg-primary" checked={sortBy === Sort.DescriptionZA} - onChange={() => setSort(Sort.DescriptionZA)} + onChange={() => { + resetInfiniteQueryPagination(queryClient, ["links"]); + setSort(Sort.DescriptionZA); + }} /> {t("description_za")} diff --git a/hooks/store/links.tsx b/hooks/store/links.tsx index f8a2c75..abd5624 100644 --- a/hooks/store/links.tsx +++ b/hooks/store/links.tsx @@ -159,20 +159,23 @@ const useUpdateLink = () => { return data.response; }, onSuccess: (data) => { - queryClient.setQueryData(["dashboardData"], (oldData: any) => { - if (!oldData) return undefined; - return oldData.map((e: any) => (e.id === data.id ? data : e)); - }); + // queryClient.setQueryData(["dashboardData"], (oldData: any) => { + // if (!oldData) return undefined; + // return oldData.map((e: any) => (e.id === data.id ? data : e)); + // }); - queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => { - if (!oldData) return undefined; - return { - pages: oldData.pages.map((page: any) => - page.map((item: any) => (item.id === data.id ? data : item)) - ), - pageParams: oldData.pageParams, - }; - }); + // queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => { + // if (!oldData) return undefined; + // return { + // pages: oldData.pages.map((page: any) => + // page.map((item: any) => (item.id === data.id ? data : item)) + // ), + // pageParams: oldData.pageParams, + // }; + // }); + + queryClient.invalidateQueries({ queryKey: ["links"] }); // Temporary workaround + queryClient.invalidateQueries({ queryKey: ["dashboardData"] }); // Temporary workaround queryClient.invalidateQueries({ queryKey: ["collections"] }); queryClient.invalidateQueries({ queryKey: ["tags"] }); @@ -425,6 +428,22 @@ const useBulkEditLinks = () => { }); }; +const resetInfiniteQueryPagination = async ( + queryClient: any, + queryKey: any +) => { + queryClient.setQueriesData({ queryKey }, (oldData: any) => { + if (!oldData) return undefined; + + return { + pages: oldData.pages.slice(0, 1), + pageParams: oldData.pageParams.slice(0, 1), + }; + }); + + await queryClient.invalidateQueries(queryKey); +}; + export { useLinks, useAddLink, @@ -434,4 +453,5 @@ export { useUploadFile, useGetLink, useBulkEditLinks, + resetInfiniteQueryPagination, };