implemented list view in other components as well

pages/collections/[id].tsx

@@ -1,7 +1,11 @@
 import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  Sort,
+  ViewMode,
+} from "@/types/global";
 import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
@@ -18,6 +22,10 @@ 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 ViewDropdown from "@/components/ViewDropdown";
+import DefaultView from "@/components/LinkViews/DefaultView";
+import GridView from "@/components/LinkViews/GridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -76,6 +84,19 @@ export default function Index() {
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
+
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   return (
     <MainLayout>
       <div
@@ -86,22 +107,78 @@ export default function Index() {
         }}
         className="h-full p-5 flex gap-3 flex-col"
       >
-        <div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
-          {activeCollection && (
-            <div className="flex gap-3 items-center">
-              <div className="flex gap-2">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  style={{ color: activeCollection?.color }}
-                  className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
-                />
-                <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
-                  {activeCollection?.name}
-                </p>
-              </div>
+        {activeCollection && (
+          <div className="flex gap-3 items-start justify-between">
+            <div className="flex gap-2">
+              <FontAwesomeIcon
+                icon={faFolder}
+                style={{ color: activeCollection?.color }}
+                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
+              />
+              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+                {activeCollection?.name}
+              </p>
             </div>
-          )}
-        </div>
+
+            <div className="dropdown dropdown-bottom dropdown-end">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-ghost btn-sm btn-square text-neutral"
+              >
+                <FontAwesomeIcon
+                  icon={faEllipsis}
+                  title="More"
+                  className="w-5 h-5"
+                />
+              </div>
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+                {permissions === true ? (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setEditCollectionModal(true);
+                      }}
+                    >
+                      Edit Collection Info
+                    </div>
+                  </li>
+                ) : undefined}
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setEditCollectionSharingModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Share and Collaborate"
+                      : "View Team"}
+                  </div>
+                </li>
+                <li>
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      setDeleteCollectionModal(true);
+                    }}
+                  >
+                    {permissions === true
+                      ? "Delete Collection"
+                      : "Leave Collection"}
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
 
         {activeCollection ? (
           <div className={`min-w-[15rem]`}>
@@ -158,76 +235,16 @@ export default function Index() {
           <p>Showing {activeCollection?._count?.links} results</p>
           <div className="flex items-center gap-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <div className="relative">
-              <div className="dropdown dropdown-bottom dropdown-end">
-                <div
-                  tabIndex={0}
-                  role="button"
-                  className="btn btn-ghost btn-sm btn-square text-neutral"
-                >
-                  <FontAwesomeIcon
-                    icon={faEllipsis}
-                    title="More"
-                    className="w-5 h-5"
-                  />
-                </div>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
-                  {permissions === true ? (
-                    <li>
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          (document?.activeElement as HTMLElement)?.blur();
-                          setEditCollectionModal(true);
-                        }}
-                      >
-                        Edit Collection Info
-                      </div>
-                    </li>
-                  ) : undefined}
-                  <li>
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        (document?.activeElement as HTMLElement)?.blur();
-                        setEditCollectionSharingModal(true);
-                      }}
-                    >
-                      {permissions === true
-                        ? "Share and Collaborate"
-                        : "View Team"}
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        (document?.activeElement as HTMLElement)?.blur();
-                        setDeleteCollectionModal(true);
-                      }}
-                    >
-                      {permissions === true
-                        ? "Delete Collection"
-                        : "Leave Collection"}
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
-          <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            {links
-              .filter((e) => e.collection.id === activeCollection?.id)
-              .map((e, i) => {
-                return <LinkCard key={i} link={e} count={i} />;
-              })}
-          </div>
+          <LinkComponent
+            links={links.filter(
+              (e) => e.collection.id === activeCollection?.id
+            )}
+          />
         ) : (
           <NoLinksFound />
         )}

pages/collections/index.tsx

@@ -34,14 +34,14 @@ export default function Collections() {
             <div className="flex items-center gap-3">
               <FontAwesomeIcon
                 icon={faFolder}
-                className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+                className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
               />
               <div>
                 <p className="text-3xl capitalize font-thin">
                   Your Collections
                 </p>
 
-                <p>Collections you own</p>
+                <p className="sm:text-sm text-xs">Collections you own</p>
               </div>
             </div>
           </div>
@@ -75,14 +75,16 @@ export default function Collections() {
             <div className="flex items-center gap-3 my-5">
               <FontAwesomeIcon
                 icon={faFolder}
-                className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+                className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
               />
               <div>
                 <p className="text-3xl capitalize font-thin">
                   Other Collections
                 </p>
 
-                <p>Shared collections you&apos;re a member of</p>
+                <p className="sm:text-sm text-xs">
+                  Shared collections you&apos;re a member of
+                </p>
               </div>
             </div>
 

pages/dashboard.tsx

@@ -108,12 +108,12 @@ export default function Dashboard() {
         <div className="flex items-center gap-3">
           <FontAwesomeIcon
             icon={faChartSimple}
-            className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+            className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
           />
           <div>
             <p className="text-3xl capitalize font-thin">Dashboard</p>
 
-            <p>A brief overview of your data</p>
+            <p className="sm:text-sm text-xs">A brief overview of your data</p>
           </div>
         </div>
 

pages/links/index.tsx

@@ -23,14 +23,14 @@ export default function Links() {
 
   useLinks({ sort: sortBy });
 
-  const components = {
+  const linkView = {
     [ViewMode.Default]: DefaultView,
     // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
   };
 
   // @ts-ignore
-  const Component = components[viewMode];
+  const LinkComponent = linkView[viewMode];
 
   return (
     <MainLayout>
@@ -39,22 +39,22 @@ export default function Links() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faLink}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">All Links</p>
 
-              <p>Links from every Collections</p>
+              <p className="sm:text-sm text-xs">Links from every Collections</p>
             </div>
           </div>
 
-          <div className="flex items-center mt-2">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links[0] ? (
-          <Component links={links} />
+          <LinkComponent links={links} />
         ) : (
           <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}

pages/links/pinned.tsx

@@ -3,18 +3,34 @@ import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { Sort } from "@/types/global";
+import { Sort, ViewMode } from "@/types/global";
 import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
+import ViewDropdown from "@/components/ViewDropdown";
+import DefaultView from "@/components/LinkViews/DefaultView";
+import GridView from "@/components/LinkViews/GridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function PinnedLinks() {
   const { links } = useLinkStore();
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({ sort: sortBy, pinnedOnly: true });
 
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -22,25 +38,24 @@ export default function PinnedLinks() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
+              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">Pinned Links</p>
 
-              <p>Pinned Links from your Collections</p>
+              <p className="sm:text-sm text-xs">
+                Pinned Links from your Collections
+              </p>
             </div>
           </div>
 
-          <div className="relative mt-2">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
+          <LinkComponent links={links} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}

pages/search.tsx

@@ -4,11 +4,15 @@ import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { Sort } from "@/types/global";
+import { Sort, ViewMode } from "@/types/global";
 import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useState } from "react";
+import ViewDropdown from "@/components/ViewDropdown";
+import DefaultView from "@/components/LinkViews/DefaultView";
+import GridView from "@/components/LinkViews/GridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -24,6 +28,10 @@ export default function Search() {
   });
 
   const [filterDropdown, setFilterDropdown] = useState(false);
+
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({
@@ -36,15 +44,24 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 items-center justify-between">
-          <div className="flex gap-3 items-center mb-5">
-            <div className="flex gap-2">
+          <div className="flex gap-3 items-center">
+            <div className="flex items-center gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary drop-shadow"
+                className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize font-thin">
                 Search Results
@@ -52,25 +69,17 @@ export default function Search() {
             </div>
           </div>
 
-          <div className="flex gap-2 items-center">
-            <div className="relative">
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-            </div>
-
-            <div className="relative">
-              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            </div>
+          <div className="flex gap-2 items-center mt-2">
+            <FilterSearchDropdown
+              searchFilter={searchFilter}
+              setSearchFilter={setSearchFilter}
+            />
+            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links[0] ? (
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
+          <LinkComponent links={links} />
         ) : (
           <p>
             Nothing found.{" "}

pages/tags/[id].tsx

@@ -12,10 +12,13 @@ import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import useTagStore from "@/store/tags";
 import SortDropdown from "@/components/SortDropdown";
-import { Sort, TagIncludingLinkCount } from "@/types/global";
+import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
 import useLinks from "@/hooks/useLinks";
-import Dropdown from "@/components/Dropdown";
 import { toast } from "react-hot-toast";
+import ViewDropdown from "@/components/ViewDropdown";
+import DefaultView from "@/components/LinkViews/DefaultView";
+import GridView from "@/components/LinkViews/GridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function Index() {
   const router = useRouter();
@@ -25,8 +28,6 @@ export default function Index() {
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
-
   const [renameTag, setRenameTag] = useState(false);
   const [newTagName, setNewTagName] = useState<string>();
 
@@ -97,6 +98,19 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
+
+  const linkView = {
+    [ViewMode.Default]: DefaultView,
+    // [ViewMode.Grid]: GridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const LinkComponent = linkView[viewMode];
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
@@ -105,7 +119,7 @@ export default function Index() {
             <div className="flex gap-2 items-end font-thin">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary"
+                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
               />
               {renameTag ? (
                 <>
@@ -147,7 +161,13 @@ export default function Index() {
                     {activeTag?.name}
                   </p>
                   <div className="relative">
-                    <div className="dropdown dropdown-bottom font-normal">
+                    <div
+                      className={`dropdown dropdown-bottom font-normal ${
+                        activeTag?.name.length && activeTag?.name.length > 8
+                          ? "dropdown-end"
+                          : ""
+                      }`}
+                    >
                       <div
                         tabIndex={0}
                         role="button"
@@ -186,50 +206,22 @@ export default function Index() {
                         </li>
                       </ul>
                     </div>
-
-                    {expandDropdown ? (
-                      <Dropdown
-                        items={[
-                          {
-                            name: "Rename Tag",
-                            onClick: () => {
-                              setRenameTag(true);
-                              setExpandDropdown(false);
-                            },
-                          },
-                          {
-                            name: "Remove Tag",
-                            onClick: () => {
-                              remove();
-                              setExpandDropdown(false);
-                            },
-                          },
-                        ]}
-                        onClickOutside={(e: Event) => {
-                          const target = e.target as HTMLInputElement;
-                          if (target.id !== "expand-dropdown")
-                            setExpandDropdown(false);
-                        }}
-                        className="absolute top-8 left-0 w-36 font-normal"
-                      />
-                    ) : null}
                   </div>
                 </>
               )}
             </div>
           </div>
 
-          <div className="relative">
+          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
-        <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links
-            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
-            .map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-        </div>
+        <LinkComponent
+          links={links.filter((e) =>
+            e.tags.some((e) => e.id === Number(router.query.id))
+          )}
+        />
       </div>
     </MainLayout>
   );