refactor collections store

2024-07-30 14:57:09 -04:00
parent cd82083e09
commit 05c5bdf63c
26 changed files with 585 additions and 253 deletions
@@ -11,7 +11,10 @@ import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
 // import useInitialData from "@/hooks/useInitialData";
 import { appWithTranslation } from "next-i18next";
-import nextI18nextConfig from "../next-i18next.config";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();

 function App({
  Component,
@@ -29,72 +32,75 @@ function App({
  }, []);

  return (
-    <SessionProvider
-      session={pageProps.session}
-      refetchOnWindowFocus={false}
-      basePath="/api/v1/auth"
-    >
-      <Head>
-        <title>Linkwarden</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/site.webmanifest" />
-      </Head>
-      <AuthRedirect>
-        {/* <GetData> */}
-        <Toaster
-          position="top-center"
-          reverseOrder={false}
-          toastOptions={{
-            className:
-              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
-          }}
-        >
-          {(t) => (
-            <ToastBar toast={t}>
-              {({ icon, message }) => (
-                <div
-                  className="flex flex-row"
-                  data-testid="toast-message-container"
-                  data-type={t.type}
-                >
-                  {icon}
-                  <span data-testid="toast-message">{message}</span>
-                  {t.type !== "loading" && (
-                    <button
-                      className="btn btn-xs outline-none btn-circle btn-ghost"
-                      data-testid="close-toast-button"
-                      onClick={() => toast.dismiss(t.id)}
-                    >
-                      <i className="bi bi-x"></i>
-                    </button>
-                  )}
-                </div>
-              )}
-            </ToastBar>
-          )}
-        </Toaster>
-        <Component {...pageProps} />
-        {/* </GetData> */}
-      </AuthRedirect>
-    </SessionProvider>
+    <QueryClientProvider client={queryClient}>
+      <SessionProvider
+        session={pageProps.session}
+        refetchOnWindowFocus={false}
+        basePath="/api/v1/auth"
+      >
+        <Head>
+          <title>Linkwarden</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="theme-color" content="#000000" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest" />
+        </Head>
+        <AuthRedirect>
+          {/* <GetData> */}
+          <Toaster
+            position="top-center"
+            reverseOrder={false}
+            toastOptions={{
+              className:
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
+            }}
+          >
+            {(t) => (
+              <ToastBar toast={t}>
+                {({ icon, message }) => (
+                  <div
+                    className="flex flex-row"
+                    data-testid="toast-message-container"
+                    data-type={t.type}
+                  >
+                    {icon}
+                    <span data-testid="toast-message">{message}</span>
+                    {t.type !== "loading" && (
+                      <button
+                        className="btn btn-xs outline-none btn-circle btn-ghost"
+                        data-testid="close-toast-button"
+                        onClick={() => toast.dismiss(t.id)}
+                      >
+                        <i className="bi bi-x"></i>
+                      </button>
+                    )}
+                  </div>
+                )}
+              </ToastBar>
+            )}
+          </Toaster>
+          <Component {...pageProps} />
+          {/* </GetData> */}
+        </AuthRedirect>
+      </SessionProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
  );
 }

@@ -1,4 +1,3 @@
-import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import {
  CollectionIncludingMembersAndLinkCount,
@@ -26,6 +25,7 @@ import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useCollections } from "@/hooks/store/collections";

 export default function Index() {
  const { t } = useTranslation();
@@ -34,7 +34,8 @@ export default function Index() {
  const router = useRouter();

  const { links } = useLinkStore();
-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();

  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

@@ -1,4 +1,3 @@
-import useCollectionStore from "@/store/collections";
 import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -10,10 +9,12 @@ import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import PageHeader from "@/components/PageHeader";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";

 export default function Collections() {
  const { t } = useTranslation();
-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
  const [sortedCollections, setSortedCollections] = useState(collections);

@@ -1,5 +1,4 @@
 import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
 import { useEffect, useState } from "react";
@@ -19,10 +18,12 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";

 export default function Dashboard() {
  const { t } = useTranslation();
-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();
  const { links } = useLinkStore();
  const { tags } = useTagStore();

@@ -23,8 +23,8 @@ import ListView from "@/components/LinkViews/Layouts/ListView";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
-import useCollectionStore from "@/store/collections";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useCollections } from "@/hooks/store/collections";

 export default function PublicCollections() {
  const { t } = useTranslation();
@@ -32,7 +32,8 @@ export default function PublicCollections() {

  const { settings } = useLocalSettingsStore();

-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();

  const router = useRouter();