This commit is contained in:
daniel31x13 2024-08-16 13:42:55 -04:00
parent 5d26617251
commit 03f4523d57
3 changed files with 84 additions and 35 deletions

View File

@ -1,6 +1,8 @@
import { dropdownTriggerer } from "@/lib/client/utils"; import { dropdownTriggerer } from "@/lib/client/utils";
import React from "react"; import React, { useEffect } from "react";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { resetInfiniteQueryPagination } from "@/hooks/store/links";
import { useQueryClient } from "@tanstack/react-query";
type Props = { type Props = {
setSearchFilter: Function; setSearchFilter: Function;
@ -18,6 +20,7 @@ export default function FilterSearchDropdown({
searchFilter, searchFilter,
}: Props) { }: Props) {
const { t } = useTranslation(); const { t } = useTranslation();
const queryClient = useQueryClient();
return ( return (
<div className="dropdown dropdown-bottom dropdown-end"> <div className="dropdown dropdown-bottom dropdown-end">
@ -41,9 +44,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox" name="search-filter-checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={searchFilter.name} checked={searchFilter.name}
onChange={() => onChange={() => {
setSearchFilter({ ...searchFilter, name: !searchFilter.name }) resetInfiniteQueryPagination(queryClient, ["links"]);
} setSearchFilter({ ...searchFilter, name: !searchFilter.name });
}}
/> />
<span className="label-text whitespace-nowrap">{t("name")}</span> <span className="label-text whitespace-nowrap">{t("name")}</span>
</label> </label>
@ -59,9 +63,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox" name="search-filter-checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={searchFilter.url} checked={searchFilter.url}
onChange={() => onChange={() => {
setSearchFilter({ ...searchFilter, url: !searchFilter.url }) resetInfiniteQueryPagination(queryClient, ["links"]);
} setSearchFilter({ ...searchFilter, url: !searchFilter.url });
}}
/> />
<span className="label-text whitespace-nowrap">{t("link")}</span> <span className="label-text whitespace-nowrap">{t("link")}</span>
</label> </label>
@ -77,12 +82,13 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox" name="search-filter-checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={searchFilter.description} checked={searchFilter.description}
onChange={() => onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({ setSearchFilter({
...searchFilter, ...searchFilter,
description: !searchFilter.description, description: !searchFilter.description,
}) });
} }}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("description")} {t("description")}
@ -100,9 +106,10 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox" name="search-filter-checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={searchFilter.tags} checked={searchFilter.tags}
onChange={() => onChange={() => {
setSearchFilter({ ...searchFilter, tags: !searchFilter.tags }) resetInfiniteQueryPagination(queryClient, ["links"]);
} setSearchFilter({ ...searchFilter, tags: !searchFilter.tags });
}}
/> />
<span className="label-text whitespace-nowrap">{t("tags")}</span> <span className="label-text whitespace-nowrap">{t("tags")}</span>
</label> </label>
@ -118,12 +125,13 @@ export default function FilterSearchDropdown({
name="search-filter-checkbox" name="search-filter-checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={searchFilter.textContent} checked={searchFilter.textContent}
onChange={() => onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSearchFilter({ setSearchFilter({
...searchFilter, ...searchFilter,
textContent: !searchFilter.textContent, textContent: !searchFilter.textContent,
}) });
} }}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("full_content")} {t("full_content")}

View File

@ -3,6 +3,8 @@ import { Sort } from "@/types/global";
import { dropdownTriggerer } from "@/lib/client/utils"; import { dropdownTriggerer } from "@/lib/client/utils";
import { TFunction } from "i18next"; import { TFunction } from "i18next";
import useLocalSettingsStore from "@/store/localSettings"; import useLocalSettingsStore from "@/store/localSettings";
import { resetInfiniteQueryPagination } from "@/hooks/store/links";
import { useQueryClient } from "@tanstack/react-query";
type Props = { type Props = {
sortBy: Sort; sortBy: Sort;
@ -12,6 +14,7 @@ type Props = {
export default function SortDropdown({ sortBy, setSort, t }: Props) { export default function SortDropdown({ sortBy, setSort, t }: Props) {
const { updateSettings } = useLocalSettingsStore(); const { updateSettings } = useLocalSettingsStore();
const queryClient = useQueryClient();
useEffect(() => { useEffect(() => {
updateSettings({ sortBy }); updateSettings({ sortBy });
@ -39,7 +42,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.DateNewestFirst} checked={sortBy === Sort.DateNewestFirst}
onChange={() => setSort(Sort.DateNewestFirst)} onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DateNewestFirst);
}}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("date_newest_first")} {t("date_newest_first")}
@ -57,7 +63,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.DateOldestFirst} checked={sortBy === Sort.DateOldestFirst}
onChange={() => setSort(Sort.DateOldestFirst)} onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DateOldestFirst);
}}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("date_oldest_first")} {t("date_oldest_first")}
@ -75,7 +84,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.NameAZ} 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> <span className="label-text whitespace-nowrap">{t("name_az")}</span>
</label> </label>
@ -91,7 +103,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.NameZA} 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> <span className="label-text whitespace-nowrap">{t("name_za")}</span>
</label> </label>
@ -107,7 +122,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.DescriptionAZ} checked={sortBy === Sort.DescriptionAZ}
onChange={() => setSort(Sort.DescriptionAZ)} onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DescriptionAZ);
}}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("description_az")} {t("description_az")}
@ -125,7 +143,10 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
name="sort-radio" name="sort-radio"
className="radio checked:bg-primary" className="radio checked:bg-primary"
checked={sortBy === Sort.DescriptionZA} checked={sortBy === Sort.DescriptionZA}
onChange={() => setSort(Sort.DescriptionZA)} onChange={() => {
resetInfiniteQueryPagination(queryClient, ["links"]);
setSort(Sort.DescriptionZA);
}}
/> />
<span className="label-text whitespace-nowrap"> <span className="label-text whitespace-nowrap">
{t("description_za")} {t("description_za")}

View File

@ -159,20 +159,23 @@ const useUpdateLink = () => {
return data.response; return data.response;
}, },
onSuccess: (data) => { onSuccess: (data) => {
queryClient.setQueryData(["dashboardData"], (oldData: any) => { // queryClient.setQueryData(["dashboardData"], (oldData: any) => {
if (!oldData) return undefined; // if (!oldData) return undefined;
return oldData.map((e: any) => (e.id === data.id ? data : e)); // return oldData.map((e: any) => (e.id === data.id ? data : e));
}); // });
queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => { // queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
if (!oldData) return undefined; // if (!oldData) return undefined;
return { // return {
pages: oldData.pages.map((page: any) => // pages: oldData.pages.map((page: any) =>
page.map((item: any) => (item.id === data.id ? data : item)) // page.map((item: any) => (item.id === data.id ? data : item))
), // ),
pageParams: oldData.pageParams, // pageParams: oldData.pageParams,
}; // };
}); // });
queryClient.invalidateQueries({ queryKey: ["links"] }); // Temporary workaround
queryClient.invalidateQueries({ queryKey: ["dashboardData"] }); // Temporary workaround
queryClient.invalidateQueries({ queryKey: ["collections"] }); queryClient.invalidateQueries({ queryKey: ["collections"] });
queryClient.invalidateQueries({ queryKey: ["tags"] }); 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 { export {
useLinks, useLinks,
useAddLink, useAddLink,
@ -434,4 +453,5 @@ export {
useUploadFile, useUploadFile,
useGetLink, useGetLink,
useBulkEditLinks, useBulkEditLinks,
resetInfiniteQueryPagination,
}; };