sort by last clicked beta

Jcstack · Sep 5, 2023 · 6726294 · 6726294
1 parent 418caba
commit 6726294
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 9 deletions.
diff --git a/app/ui/number.tsx b/app/ui/number.tsx
@@ -8,16 +8,36 @@ export default function Number({
   value,
   unit = "clicks",
   children,
+  lastClicked,
 }: {
   value?: number | null;
   unit?: string;
   children: ReactNode;
+  lastClicked?: Date | null;
 }) {
-  if (!value || value < 1000) {
+  if ((!value || value < 1000) && !lastClicked) {
     return children;
   }
   return (
-    <Tooltip content={`${nFormatter(value, { full: true })} ${unit}`}>
+    <Tooltip
+      content={
+        <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
+          <p className="text-sm font-semibold text-gray-700">
+            {nFormatter(value || 0, { full: true })} {unit}
+          </p>
+          {lastClicked && (
+            <p className="mt-1 text-xs text-gray-500">
+              Last clicked on{" "}
+              {new Date(lastClicked).toLocaleDateString("en-us", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </p>
+          )}
+        </div>
+      }
+    >
       {children}
     </Tooltip>
   );

diff --git a/components/app/links/link-card.tsx b/components/app/links/link-card.tsx
@@ -55,6 +55,7 @@ export default function LinkCard({
     url,
     rewrite,
     createdAt,
+    lastClicked,
     archived,
     tagId,
     comments,
@@ -364,7 +365,7 @@ export default function LinkCard({
         </div>
 
         <div className="flex items-center space-x-2">
-          <Number value={clicks}>
+          <Number value={clicks} lastClicked={lastClicked}>
             <Link
               onClick={(e) => {
                 e.stopPropagation();

diff --git a/components/app/links/link-sort.tsx b/components/app/links/link-sort.tsx
@@ -2,18 +2,25 @@ import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 import IconMenu from "@/components/shared/icon-menu";
 import { Sort, Tick } from "@/components/shared/icons";
-import { ChevronDown, SortDesc } from "lucide-react";
+import { ChevronDown, SortAsc, SortDesc } from "lucide-react";
 import Popover from "#/ui/popover";
 
 const sortOptions = [
   {
     display: "Date Added",
     slug: "createdAt",
+    order: "desc",
   },
   {
     display: "Number of Clicks",
     slug: "clicks",
+    order: "desc",
   },
+  // {
+  //   display: "Last Clicked",
+  //   slug: "lastClicked",
+  //   order: "asc",
+  // },
 ];
 
 export default function LinkSort() {
@@ -29,7 +36,7 @@ export default function LinkSort() {
     <Popover
       content={
         <div className="w-full p-2 md:w-48">
-          {sortOptions.map(({ display, slug }) => (
+          {sortOptions.map(({ display, slug, order }) => (
             <button
               key={slug}
               onClick={() => {
@@ -52,7 +59,13 @@ export default function LinkSort() {
             >
               <IconMenu
                 text={display}
-                icon={<SortDesc className="h-4 w-4" />}
+                icon={
+                  order === "desc" ? (
+                    <SortDesc className="h-4 w-4" />
+                  ) : (
+                    <SortAsc className="h-4 w-4" />
+                  )
+                }
               />
               {selectedSort.slug === slug && (
                 <Tick className="h-4 w-4" aria-hidden="true" />
@@ -68,7 +81,20 @@ export default function LinkSort() {
         onClick={() => setOpenPopover(!openPopover)}
         className="flex w-48 items-center justify-between space-x-2 rounded-md bg-white px-3 py-2.5 shadow transition-all duration-75 hover:shadow-md active:scale-95"
       >
-        <IconMenu text="Sort by" icon={<Sort className="h-4 w-4 shrink-0" />} />
+        <IconMenu
+          text={sort ? selectedSort.display : "Sort by"}
+          icon={
+            sort ? (
+              selectedSort.order === "desc" ? (
+                <SortDesc className="h-4 w-4" />
+              ) : (
+                <SortAsc className="h-4 w-4" />
+              )
+            ) : (
+              <Sort className="h-4 w-4 shrink-0" />
+            )
+          }
+        />
         <ChevronDown
           className={`h-5 w-5 text-gray-400 ${
             openPopover ? "rotate-180 transform" : ""

diff --git a/lib/api/links.ts b/lib/api/links.ts
@@ -22,7 +22,7 @@ export async function getLinksForProject({
   domain?: string;
   tagId?: string;
   search?: string;
-  sort?: "createdAt" | "clicks"; // always descending for both
+  sort?: "createdAt" | "clicks" | "lastClicked"; // descending for "createdAt" and "clicks", ascending for "lastClicked"
   page?: string;
   userId?: string | null;
   showArchived?: boolean;
@@ -52,7 +52,7 @@ export async function getLinksForProject({
       user: true,
     },
     orderBy: {
-      [sort]: "desc",
+      [sort]: sort === "lastClicked" ? "asc" : "desc",
     },
     take: 100,
     ...(page && {

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -215,6 +215,7 @@ model Link {
   @@index(password)
   @@index(createdAt(sort: Desc))
   @@index(clicks(sort: Desc))
+  @@index(lastClicked(sort: Asc))
   @@index(userId)
   @@fulltext([key, url])
 }