From fb1869ca7a9d4abd6ad812a36f2a3e397e05fb6d Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 10 Sep 2024 00:09:33 -0400
Subject: [PATCH] fix dashboard bug

---
 .../LinkViews/LinkComponents/LinkActions.tsx  | 14 +++--
 .../LinkViews/LinkComponents/LinkList.tsx     |  7 ++-
 components/ViewDropdown.tsx                   | 56 ++++++++++---------
 hooks/store/dashboardData.tsx                 |  7 +--
 .../dashboard/getDashboardDataV2.ts           |  4 +-
 pages/dashboard.tsx                           | 32 +++++------
 6 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index 65ebf59..2076932 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -12,14 +12,16 @@ import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import LinkModal from "@/components/ModalContent/LinkModal";
 import { useRouter } from "next/router";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   className?: string;
+  btnStyle?: string;
 };
 
-export default function LinkActions({ link, className }: Props) {
+export default function LinkActions({ link, className, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
@@ -85,13 +87,17 @@ export default function LinkActions({ link, className }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={`absolute ${className || "top-3 right-3"} z-20`}
+          className={clsx(
+            className || "top-3 right-3",
+            "absolute z-20",
+            btnStyle
+          )}
           tabIndex={0}
           role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
-          <div className="btn btn-ghost btn-sm btn-square text-neutral">
+          <div className="btn btn-sm btn-square text-neutral">
             <i title="More" className="bi-three-dots text-xl" />
           </div>
         </div>
@@ -105,7 +111,7 @@ export default function LinkActions({ link, className }: Props) {
             tabIndex={0}
             role="button"
             onMouseDown={dropdownTriggerer}
-            className="btn btn-sm btn-square text-neutral"
+            className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
           >
             <i title="More" className="bi-three-dots text-xl" />
           </div>
diff --git a/components/LinkViews/LinkComponents/LinkList.tsx b/components/LinkViews/LinkComponents/LinkList.tsx
index 4433fdc..da301b4 100644
--- a/components/LinkViews/LinkComponents/LinkList.tsx
+++ b/components/LinkViews/LinkComponents/LinkList.tsx
@@ -93,7 +93,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
   return (
     <>
       <div
-        className={`${selectedStyle} rounded-md border relative items-center flex ${
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${
           !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
         } duration-200 w-full`}
         onClick={() =>
@@ -137,7 +137,10 @@ export default function LinkCardCompact({ link, editMode }: Props) {
         <LinkActions
           link={link}
           collection={collection}
-          className="top-3 right-3"
+          className={
+            "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          }
+          btnStyle="btn-ghost"
         />
       </div>
       <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx
index eaa5bdb..ce2a368 100644
--- a/components/ViewDropdown.tsx
+++ b/components/ViewDropdown.tsx
@@ -114,32 +114,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
               </label>
             </li>
           ))}
-        <p className="mb-1 mt-2 text-sm text-neutral">
-          {t("columns")}:{" "}
-          {settings.columns === 0 ? t("default") : settings.columns}
-        </p>
-        <div>
-          <input
-            type="range"
-            min={0}
-            max="8"
-            value={settings.columns}
-            onChange={(e) => onColumnsChange(e)}
-            className="range range-xs range-primary"
-            step="1"
-          />
-          <div className="flex w-full justify-between px-2 text-xs text-neutral">
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-            <span>|</span>
-          </div>
-        </div>
+        {settings.viewMode !== ViewMode.List && (
+          <>
+            <p className="mb-1 mt-2 text-sm text-neutral">
+              {t("columns")}:{" "}
+              {settings.columns === 0 ? t("default") : settings.columns}
+            </p>
+            <div>
+              <input
+                type="range"
+                min={0}
+                max="8"
+                value={settings.columns}
+                onChange={(e) => onColumnsChange(e)}
+                className="range range-xs range-primary"
+                step="1"
+              />
+              <div className="flex w-full justify-between px-2 text-xs text-neutral">
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+              </div>
+            </div>
+          </>
+        )}
       </ul>
     </div>
   );
diff --git a/hooks/store/dashboardData.tsx b/hooks/store/dashboardData.tsx
index d808ffd..bea733a 100644
--- a/hooks/store/dashboardData.tsx
+++ b/hooks/store/dashboardData.tsx
@@ -1,4 +1,3 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useQuery } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 
@@ -7,11 +6,11 @@ const useDashboardData = () => {
 
   return useQuery({
     queryKey: ["dashboardData"],
-    queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => {
-      const response = await fetch("/api/v1/dashboard");
+    queryFn: async () => {
+      const response = await fetch("/api/v2/dashboard");
       const data = await response.json();
 
-      return data.response;
+      return data.data;
     },
     enabled: status === "authenticated",
   });
diff --git a/lib/api/controllers/dashboard/getDashboardDataV2.ts b/lib/api/controllers/dashboard/getDashboardDataV2.ts
index fa952c5..0f93ec6 100644
--- a/lib/api/controllers/dashboard/getDashboardDataV2.ts
+++ b/lib/api/controllers/dashboard/getDashboardDataV2.ts
@@ -48,7 +48,7 @@ export default async function getDashboardData(
   });
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       AND: [
         {
@@ -80,7 +80,7 @@ export default async function getDashboardData(
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 16,
     where: {
       collection: {
         OR: [
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 0bdb525..eaebd34 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -16,17 +16,21 @@ import { useCollections } from "@/hooks/store/collections";
 import { useTags } from "@/hooks/store/tags";
 import { useDashboardData } from "@/hooks/store/dashboardData";
 import Links from "@/components/LinkViews/Links";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Dashboard() {
   const { t } = useTranslation();
   const { data: collections = [] } = useCollections();
-  const dashboardData = useDashboardData();
+  const { data: { links = [] } = { links: [] }, ...dashboardData } =
+    useDashboardData();
   const { data: tags = [] } = useTags();
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
   const [showLinks, setShowLinks] = useState(3);
 
+  const { settings } = useLocalSettingsStore();
+
   useEffect(() => {
     setNumberOfLinks(
       collections.reduce(
@@ -52,8 +56,10 @@ export default function Dashboard() {
   const { width } = useWindowDimensions();
 
   useEffect(() => {
-    handleNumberOfLinksToShow();
-  }, [width]);
+    settings.columns === 0
+      ? handleNumberOfLinksToShow()
+      : setShowLinks(settings.columns);
+  }, [width, settings.columns]);
 
   const importBookmarks = async (
     e: React.ChangeEvent<HTMLInputElement>,
@@ -160,10 +166,7 @@ export default function Dashboard() {
 
         <div
           style={{
-            flex:
-              dashboardData.data || dashboardData.isLoading
-                ? "0 1 auto"
-                : "1 1 auto",
+            flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
           }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
@@ -175,14 +178,9 @@ export default function Dashboard() {
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data &&
-            dashboardData.data[0] &&
-            !dashboardData.isLoading ? (
+          ) : links && links[0] && !dashboardData.isLoading ? (
             <div className="w-full">
-              <Links
-                links={dashboardData.data.slice(0, showLinks)}
-                layout={viewMode}
-              />
+              <Links links={links.slice(0, showLinks)} layout={viewMode} />
             </div>
           ) : (
             <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
@@ -317,11 +315,11 @@ export default function Dashboard() {
                 useData={dashboardData}
               />
             </div>
-          ) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          ) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
               <Links
-                links={dashboardData.data
-                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
+                links={links
+                  .filter((e: any) => e.pinnedBy && e.pinnedBy[0])
                   .slice(0, showLinks)}
                 layout={viewMode}
               />