Merge pull request #707 from linkwarden/dev

bug fix

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 (
     <div className="dropdown dropdown-bottom dropdown-end">
@@ -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 });
+              }}
             />
             <span className="label-text whitespace-nowrap">{t("name")}</span>
           </label>
@@ -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 });
+              }}
             />
             <span className="label-text whitespace-nowrap">{t("link")}</span>
           </label>
@@ -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,
-                })
-              }
+                });
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {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 });
+              }}
             />
             <span className="label-text whitespace-nowrap">{t("tags")}</span>
           </label>
@@ -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,
-                })
-              }
+                });
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {t("full_content")}

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);
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {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);
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {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);
+              }}
             />
             <span className="label-text whitespace-nowrap">{t("name_az")}</span>
           </label>
@@ -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);
+              }}
             />
             <span className="label-text whitespace-nowrap">{t("name_za")}</span>
           </label>
@@ -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);
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {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);
+              }}
             />
             <span className="label-text whitespace-nowrap">
               {t("description_za")}

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