Merge branch 'dev' into bootstrap-icons

2023-12-17 10:00:44 +03:30
parent ef33f2c948 f7d8ff9881
commit c28c73ce18
22 changed files with 936 additions and 473 deletions
@@ -1,7 +1,11 @@
-import LinkCard from "@/components/LinkCard";
+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 />
        )}
@@ -62,7 +62,9 @@ export default function Collections() {
                  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>

@@ -3,6 +3,7 @@ import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
 import LinkCard from "@/components/LinkCard";
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import { useEffect, useState } from "react";
 import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
@@ -95,7 +96,6 @@ export default function Dashboard() {
    <MainLayout>
      <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"} />
-
        <div>
          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
            <DashboardItem
@@ -1,4 +1,4 @@
-import LinkCard from "@/components/LinkCard";
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import NoLinksFound from "@/components/NoLinksFound";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
@@ -7,14 +7,35 @@ import useLinkStore from "@/store/links";
 import { Sort } from "@/types/global";
 import React, { useState } from "react";
 import PageHeader from "@/components/PageHeader";
+import { Sort, ViewMode } from "@/types/global";
+import { faLink } 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 Links() {
  const { links } = useLinkStore();

+  const [viewMode, setViewMode] = useState<string>(
+    localStorage.getItem("viewMode") || ViewMode.Default
+  );
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

  useLinks({ sort: sortBy });

+  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">
@@ -23,19 +44,15 @@ export default function Links() {
          title={"All Links"}
          description={"Links from every Collections"}
        />
-
        <div className="flex gap-3 justify-end">
          <div className="relative mt-2">
            <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} />
        ) : (
          <NoLinksFound text="You Haven't Created Any Links Yet" />
        )}
@@ -1,4 +1,4 @@
-import LinkCard from "@/components/LinkCard";
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
@@ -6,14 +6,34 @@ import useLinkStore from "@/store/links";
 import { Sort } from "@/types/global";
 import React, { useState } from "react";
 import PageHeader from "@/components/PageHeader";
+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">
@@ -25,14 +45,11 @@ export default function PinnedLinks() {
        <div className="flex gap-3 justify-end">
          <div className="relative 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" }}
@@ -1,14 +1,18 @@
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import LinkCard from "@/components/LinkCard";
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 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.{" "}
@@ -1,4 +1,4 @@
-import LinkCard from "@/components/LinkCard";
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import useLinkStore from "@/store/links";
 import {
  faCheck,
@@ -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>
  );