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,
};