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

pages/search.tsx

@@ -1,23 +1,17 @@
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
 import MainLayout from "@/layouts/MainLayout";
-import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
-import { GridLoader } from "react-spinners";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import LinkListOptions from "@/components/LinkListOptions";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import Links from "@/components/LinkViews/Links";
 
 export default function Search() {
   const { t } = useTranslation();
 
-  const { links } = useLinkStore();
-
   const router = useRouter();
 
   const [searchFilter, setSearchFilter] = useState({
@@ -28,11 +22,13 @@ export default function Search() {
     textContent: false,
   });
 
-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
 
   const [editMode, setEditMode] = useState(false);
 
@@ -40,7 +36,17 @@ export default function Search() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const { isLoading } = useLinks({
+  // const { isLoading } = useLink({
+  //   sort: sortBy,
+  //   searchQueryString: decodeURIComponent(router.query.q as string),
+  //   searchByName: searchFilter.name,
+  //   searchByUrl: searchFilter.url,
+  //   searchByDescription: searchFilter.description,
+  //   searchByTextContent: searchFilter.textContent,
+  //   searchByTags: searchFilter.tags,
+  // });
+
+  const { links, data } = useLinks({
     sort: sortBy,
     searchQueryString: decodeURIComponent(router.query.q as string),
     searchByName: searchFilter.name,
@@ -50,15 +56,6 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -76,7 +73,9 @@ export default function Search() {
           <PageHeader icon={"bi-search"} title={"Search Results"} />
         </LinkListOptions>
 
-        {!isLoading && !links[0] ? (
+        {/* {
+        !isLoading && 
+        !links[0] ? (
           <p>{t("nothing_found")}</p>
         ) : links[0] ? (
           <LinkComponent
@@ -93,7 +92,15 @@ export default function Search() {
               className="m-auto py-10"
             />
           )
-        )}
+        )} */}
+
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
       </div>
     </MainLayout>
   );