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

pages/collections/[id].tsx

@@ -1,4 +1,3 @@
-import useLinkStore from "@/store/links";
 import {
   CollectionIncludingMembersAndLinkCount,
   Sort,
@@ -8,7 +7,6 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
 import useLocalSettingsStore from "@/store/localSettings";
@@ -16,16 +14,15 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
-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";
 import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
+import Links from "@/components/LinkViews/Links";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -33,25 +30,29 @@ export default function Index() {
 
   const router = useRouter();
 
-  const { links } = useLinkStore();
-  const { data: collections } = useCollections();
+  const { data: collections = [] } = useCollections();
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const { links, data } = useLinks({
+    sort: sortBy,
+    collectionId: Number(router.query.id),
+  });
 
   const [activeCollection, setActiveCollection] =
     useState<CollectionIncludingMembersAndLinkCount>();
 
   const permissions = usePermissions(activeCollection?.id as number);
 
-  useLinks({ collectionId: Number(router.query.id), sort: sortBy });
-
   useEffect(() => {
     setActiveCollection(
       collections.find((e) => e.id === Number(router.query.id))
     );
   }, [router, collections]);
 
-  const { data: user } = useUser();
+  const { data: user = {} } = useUser();
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null as unknown as number,
@@ -97,19 +98,10 @@ export default function Index() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div
@@ -323,16 +315,14 @@ export default function Index() {
           </p>
         </LinkListOptions>
 
-        {links.some((e) => e.collectionId === Number(router.query.id)) ? (
-          <LinkComponent
-            editMode={editMode}
-            links={links.filter(
-              (e) => e.collection.id === activeCollection?.id
-            )}
-          />
-        ) : (
-          <NoLinksFound />
-        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
+        {!data.isLoading && !links[0] && <NoLinksFound />}
       </div>
       {activeCollection && (
         <>

pages/collections/index.tsx

@@ -13,8 +13,10 @@ import { useCollections } from "@/hooks/store/collections";
 
 export default function Collections() {
   const { t } = useTranslation();
-  const { data: collections } = useCollections();
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const { data: collections = [] } = useCollections();
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
   const [sortedCollections, setSortedCollections] = useState(collections);
 
   const { data } = useSession();