refactored link state management + a lot of other changes...

components/LinkViews/Layouts/CardView.tsx

@@ -1,6 +1,8 @@
 import LinkCard from "@/components/LinkViews/LinkCard";
+import { useLinks } from "@/hooks/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { link } from "fs";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 import { GridLoader } from "react-spinners";
 
 export default function CardView({
@@ -12,6 +14,16 @@ export default function CardView({
   editMode?: boolean;
   isLoading?: boolean;
 }) {
+  const { ref, inView } = useInView();
+
+  const { data } = useLinks();
+
+  useEffect(() => {
+    if (inView) {
+      data.fetchNextPage();
+    }
+  }, [data.fetchNextPage, inView]);
+
   return (
     <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
       {links.map((e, i) => {
@@ -26,6 +38,15 @@ export default function CardView({
         );
       })}
 
+      {data.hasNextPage && (
+        <div className="flex flex-col gap-4" ref={ref}>
+          <div className="skeleton h-32 w-full"></div>
+          <div className="skeleton h-4 w-28"></div>
+          <div className="skeleton h-4 w-full"></div>
+          <div className="skeleton h-4 w-full"></div>
+        </div>
+      )}
+
       {isLoading && links.length > 0 && (
         <GridLoader
           color="oklch(var(--p))"

components/LinkViews/LinkCard.tsx

@@ -21,6 +21,7 @@ import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,12 +34,16 @@ type Props = {
 export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const { t } = useTranslation();
 
-  const viewMode = localStorage.getItem("viewMode") || "card";
-  const { data: collections } = useCollections();
+  const { data: collections = [] } = useCollections();
 
-  const { data: user } = useUser();
+  const { data: user = {} } = useUser();
 
-  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const {
+    data: { data: links = [] },
+  } = useLinks();
+  const getLink = useGetLink();
 
   useEffect(() => {
     if (!editMode) {
@@ -94,7 +99,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink(link.id as number);
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -7,11 +7,10 @@ import usePermissions from "@/hooks/usePermissions";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
 import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
-import useLinkStore from "@/store/links";
-import { toast } from "react-hot-toast";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
+import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -39,41 +38,18 @@ export default function LinkActions({
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
   const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
-  const { data: user } = useUser();
+  const { data: user = {} } = useUser();
 
-  const { removeLink, updateLink } = useLinkStore();
+  const updateLink = useUpdateLink();
+  const deleteLink = useDeleteLink();
 
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
 
-    const load = toast.loading(t("applying"));
-
-    const response = await updateLink({
+    await updateLink.mutateAsync({
       ...link,
       pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
     });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
-    } else {
-      toast.error(response.data as string);
-    }
-  };
-
-  const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
-
-    const response = await removeLink(link.id as number);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("deleted"));
-    } else {
-      toast.error(response.data as string);
-    }
   };
 
   return (
@@ -157,9 +133,11 @@ export default function LinkActions({
               <div
                 role="button"
                 tabIndex={0}
-                onClick={(e) => {
+                onClick={async (e) => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                  e.shiftKey
+                    ? await deleteLink.mutateAsync(link.id as number)
+                    : setDeleteLinkModal(true);
                 }}
               >
                 {t("delete")}

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -3,7 +3,6 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import React from "react";
 
 export default function LinkCollection({
@@ -13,22 +12,22 @@ export default function LinkCollection({
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
 }) {
-  const router = useRouter();
-
   return (
-    <Link
-      href={`/collections/${link.collection.id}`}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
-      title={collection?.name}
-    >
-      <i
-        className="bi-folder-fill text-lg drop-shadow"
-        style={{ color: collection?.color }}
-      ></i>
-      <p className="truncate capitalize">{collection?.name}</p>
-    </Link>
+    <>
+      <Link
+        href={`/collections/${link.collection.id}`}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
+        title={collection?.name}
+      >
+        <i
+          className="bi-folder-fill text-lg drop-shadow"
+          style={{ color: collection?.color }}
+        ></i>
+        <p className="truncate capitalize">{collection?.name}</p>
+      </Link>
+    </>
   );
 }

components/LinkViews/LinkList.tsx

@@ -17,6 +17,7 @@ import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,10 +34,12 @@ export default function LinkCardCompact({
 }: Props) {
   const { t } = useTranslation();
 
-  const { data: collections } = useCollections();
+  const { data: collections = [] } = useCollections();
 
-  const { data: user } = useUser();
-  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { data: user = {} } = useUser();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const { links } = useLinks();
 
   useEffect(() => {
     if (!editMode) {

components/LinkViews/LinkMasonry.tsx

@@ -21,6 +21,7 @@ import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,10 +34,13 @@ type Props = {
 export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
   const { t } = useTranslation();
 
-  const { data: collections } = useCollections();
-  const { data: user } = useUser();
+  const { data: collections = [] } = useCollections();
+  const { data: user = {} } = useUser();
 
-  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const { links } = useLinks();
+  const getLink = useGetLink();
 
   useEffect(() => {
     if (!editMode) {
@@ -92,7 +96,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink(link.id as number);
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 

components/LinkViews/Links.tsx

@@ -0,0 +1,226 @@
+import LinkCard from "@/components/LinkViews/LinkCard";
+import { useLinks } from "@/hooks/store/links";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ViewMode,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { GridLoader } from "react-spinners";
+import LinkMasonry from "@/components/LinkViews/LinkMasonry";
+import Masonry from "react-masonry-css";
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "../../tailwind.config.js";
+import { useMemo } from "react";
+import LinkList from "@/components/LinkViews/LinkList";
+
+export function CardView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  return (
+    <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
+      {links?.map((e, i) => {
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {(hasNextPage || isLoading) &&
+        placeholders?.map((e, i) => {
+          return (
+            <div
+              className="flex flex-col gap-4"
+              ref={e === 1 ? placeHolderRef : undefined}
+              key={i}
+            >
+              <div className="skeleton h-40 w-full"></div>
+              <div className="skeleton h-3 w-2/3"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-1/3"></div>
+            </div>
+          );
+        })}
+
+      {/* {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )} */}
+    </div>
+  );
+}
+
+export function ListView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  return (
+    <div className="flex gap-1 flex-col">
+      {links?.map((e, i) => {
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {/* {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )} */}
+    </div>
+  );
+}
+
+export function MasonryView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  const fullConfig = resolveConfig(tailwindConfig as any);
+
+  const breakpointColumnsObj = useMemo(() => {
+    return {
+      default: 5,
+      1900: 4,
+      1500: 3,
+      880: 2,
+      550: 1,
+    };
+  }, []);
+
+  return (
+    <Masonry
+      breakpointCols={breakpointColumnsObj}
+      columnClassName="flex flex-col gap-5 !w-full"
+      className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5"
+    >
+      {links?.map((e, i) => {
+        return (
+          <LinkMasonry
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {/* {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )} */}
+    </Masonry>
+  );
+}
+
+export default function Links({
+  layout,
+  links,
+  editMode,
+  placeholderCount,
+  useData,
+}: {
+  layout: ViewMode;
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  placeholderCount?: number;
+  useData?: any;
+}) {
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    if (inView && useData?.fetchNextPage && useData?.hasNextPage) {
+      useData.fetchNextPage();
+    }
+  }, [useData, inView]);
+
+  if (layout === ViewMode.List) {
+    return (
+      <ListView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+      />
+    );
+  } else if (layout === ViewMode.Masonry) {
+    return (
+      <MasonryView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+      />
+    );
+  } else {
+    // Default to card view
+    return (
+      <CardView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+        placeholders={placeholderCountToArray(placeholderCount)}
+        hasNextPage={useData?.hasNextPage}
+        placeHolderRef={ref}
+      />
+    );
+  }
+}
+
+const placeholderCountToArray = (num?: number) =>
+  num ? Array.from({ length: num }, (_, i) => i + 1) : [];