refactored public page endpoints

2023-11-15 13:12:06 -05:00
parent 09ee81bf11
commit 59815f47d8
18 changed files with 262 additions and 128 deletions
@@ -1,12 +1,13 @@
 "use client";
 import LinkCard from "@/components/PublicPage/LinkCard";
-import useDetectPageBottom from "@/hooks/useDetectPageBottom";
 import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
-import { PublicCollectionIncludingLinks } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { motion, Variants } from "framer-motion";
 import Head from "next/head";
+import useLinks from "@/hooks/useLinks";
+import useLinkStore from "@/store/links";

 const cardVariants: Variants = {
  offscreen: {
@@ -23,20 +24,42 @@ const cardVariants: Variants = {
 };

 export default function PublicCollections() {
-  const router = useRouter();
-  const { reachedBottom, setReachedBottom } = useDetectPageBottom();
+  const { links } = useLinkStore();

-  const [data, setData] = useState<PublicCollectionIncludingLinks>();
+  const router = useRouter();
+
+  const [searchFilter, setSearchFilter] = useState({
+    name: true,
+    url: true,
+    description: true,
+    textContent: true,
+    tags: true,
+  });
+
+  const [filterDropdown, setFilterDropdown] = useState(false);
+  const [sortDropdown, setSortDropdown] = useState(false);
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  useLinks({
+    sort: sortBy,
+    searchQueryString: router.query.q
+      ? decodeURIComponent(router.query.q as string)
+      : undefined,
+    searchByName: searchFilter.name,
+    searchByUrl: searchFilter.url,
+    searchByDescription: searchFilter.description,
+    searchByTextContent: searchFilter.textContent,
+    searchByTags: searchFilter.tags,
+  });
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();

  document.body.style.background = "white";

  useEffect(() => {
    if (router.query.id) {
-      getPublicCollectionData(
-        Number(router.query.id),
-        data as PublicCollectionIncludingLinks,
-        setData
-      );
+      getPublicCollectionData(Number(router.query.id), setCollection);
    }

    // document
@@ -49,26 +72,14 @@ export default function PublicCollections() {
    //   );
  }, []);

-  useEffect(() => {
-    if (reachedBottom && router.query.id) {
-      getPublicCollectionData(
-        Number(router.query.id),
-        data as PublicCollectionIncludingLinks,
-        setData
-      );
-    }
-
-    setReachedBottom(false);
-  }, [reachedBottom]);
-
-  return data ? (
+  return collection ? (
    <div className="max-w-4xl mx-auto p-5 bg">
-      {data ? (
+      {collection ? (
        <Head>
-          <title>{data.name} | Linkwarden</title>
+          <title>{collection.name} | Linkwarden</title>
          <meta
            property="og:title"
-            content={`${data.name} | Linkwarden`}
+            content={`${collection.name} | Linkwarden`}
            key="title"
          />
        </Head>
@@ -76,31 +87,33 @@ export default function PublicCollections() {
      <div
        className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
      >
-        <p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
+        <p className="text-5xl text-black mb-5 capitalize">{collection.name}</p>

-        {data.description && (
+        {collection.description && (
          <>
            <hr className="mt-5 max-w-[30rem] mx-auto border-1 border-slate-400" />
-            <p className="mt-2 text-gray-500">{data.description}</p>
+            <p className="mt-2 text-gray-500">{collection.description}</p>
          </>
        )}
      </div>

      <div className="flex flex-col gap-5 my-8">
-        {data?.links?.map((e, i) => {
-          return (
-            <motion.div
-              key={i}
-              initial="offscreen"
-              whileInView="onscreen"
-              viewport={{ once: true, amount: 0.8 }}
-            >
-              <motion.div variants={cardVariants}>
-                <LinkCard link={e} count={i} />
+        {links
+          ?.filter((e) => e.collectionId === Number(router.query.id))
+          .map((e, i) => {
+            return (
+              <motion.div
+                key={i}
+                initial="offscreen"
+                whileInView="onscreen"
+                viewport={{ once: true, amount: 0.8 }}
+              >
+                <motion.div variants={cardVariants}>
+                  <LinkCard link={e as any} count={i} />
+                </motion.div>
              </motion.div>
-            </motion.div>
-          );
-        })}
+            );
+          })}
      </div>

      {/* <p className="text-center font-bold text-gray-500">