Trending bookmarks listing (#20)

* Trending bookmarks listing

* Fix newsletter bookmark

* Fix type on search

* Naming and delete popover style

* Fix draggable id

src/app/(routes)/teams/[teamSlug]/digests/[digestId]/edit/page.tsx

@@ -3,7 +3,7 @@ import { TeamProvider } from '@/contexts/TeamContext';
 import {
   checkUserTeamBySlug,
   getDigest,
-  getTeamBookmarksNotInDigest,
+  getTeamLinks,
   updateDefaultTeam,
 } from '@/lib/queries';
 import { getCurrentUserOrRedirect } from '@/lib/sessions';
@@ -32,17 +32,16 @@ const page = async ({ params, searchParams }: TeamPageProps) => {
 
   const page = Number(searchParams?.page || 1);
   const search = searchParams?.search || '';
-  const dataBookmarks = await getTeamBookmarksNotInDigest(
-    team.id,
+  const teamLinksData = await getTeamLinks(team.id, {
     page,
-    10,
-    search
-  );
+    onlyNotInDigest: true,
+    search,
+  });
 
   return (
     <TeamProvider team={team}>
       <DigestEditPage
-        dataBookmarks={dataBookmarks}
+        teamLinksData={teamLinksData}
         digest={digest}
         team={team}
       />

src/app/(routes)/teams/[teamSlug]/page.tsx

@@ -2,7 +2,7 @@ import Team from '@/components/pages/Team';
 import db from '@/lib/db';
 import {
   checkUserTeamBySlug,
-  getTeamBookmarks,
+  getTeamLinks,
   getTeamDigests,
   updateDefaultTeam,
 } from '@/lib/queries';
@@ -39,7 +39,7 @@ const TeamPage = async ({ params, searchParams }: TeamPageProps) => {
 
   const page = Number(searchParams?.page || 1);
   const search = searchParams?.search || '';
-  const { totalCount, bookmarks } = await getTeamBookmarks(team.id, {
+  const { totalCount, teamLinks } = await getTeamLinks(team.id, {
     page,
     onlyNotInDigest: !searchParams?.all,
     search,
@@ -51,7 +51,7 @@ const TeamPage = async ({ params, searchParams }: TeamPageProps) => {
     <Team
       team={team}
       linkCount={totalCount}
-      bookmarks={bookmarks}
+      teamLinks={teamLinks}
       digests={digests}
       search={search}
     />

src/app/providers.tsx

@@ -3,7 +3,6 @@
 import { Toaster } from 'react-hot-toast';
 import { SessionProvider } from 'next-auth/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import messages from '../messages/en.json';
 
 const locale = 'en';
 

src/components/Input.tsx

@@ -63,7 +63,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps<any>>(
 );
 
 export const Switch = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
-  function Switch({ label, onClick, checked, ...props }, ref) {
+  function Switch({ label, onChange, checked, ...props }, ref) {
     const [isChecked, setIsChecked] = useState(checked);
     return (
       <label className="relative inline-flex  cursor-pointer">
@@ -72,9 +72,9 @@ export const Switch = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
             type="checkbox"
             checked={isChecked}
             className="sr-only peer"
-            onClick={(e) => {
+            onChange={(e) => {
               setIsChecked(!isChecked);
-              onClick && onClick(e);
+              onChange && onChange(e);
             }}
             ref={ref}
             {...props}

src/components/Popover.tsx

@@ -7,6 +7,9 @@ import {
 } from '@radix-ui/react-popover';
 import { ReactElement, cloneElement, forwardRef } from 'react';
 import Button from './Button';
+import { TeamBookmarkedLinkItem } from '@/lib/queries';
+import { getContributor } from './bookmark/BookmarkItem';
+import { TrashIcon } from '@heroicons/react/24/solid';
 
 interface DeletePopoverProps {
   trigger?: ReactElement;
@@ -29,7 +32,7 @@ export const Popover = forwardRef<HTMLButtonElement, PopoverProps & IProps>(
         </Trigger>
         <Portal>
           <Content>
-            <div className="text-sm flex mt-3 items-center justify-between space-x-8 border rounded-md bg-white p-2 text-gray-700 shadow-lg">
+            <div className="text-sm flex mt-3 items-center justify-between space-x-8 border rounded-md bg-white p-2 text-gray-700 shadow-lg z-50">
               {children}
             </div>
           </Content>
@@ -75,3 +78,52 @@ export const DeletePopover = forwardRef<HTMLButtonElement, DeletePopoverProps>(
 );
 
 DeletePopover.displayName = 'DeletePopover';
+
+export const MultipleDeletePopover = forwardRef<
+  HTMLButtonElement,
+  {
+    onDelete: (bookmarkId: string) => void;
+    bookmarks: TeamBookmarkedLinkItem['bookmark'];
+    trigger?: ReactElement;
+    isLoading: boolean;
+  }
+>(function MultipleDeletePopover(props, ref) {
+  const { bookmarks, onDelete, isLoading } = props;
+
+  return (
+    <Popover
+      trigger={
+        props.trigger || (
+          <span
+            ref={ref}
+            className="text-xs font-semibold hover:underline cursor-pointer"
+          >
+            Delete
+          </span>
+        )
+      }
+    >
+      <div className="flex-col z-20">
+        {bookmarks.map((bookmark) => (
+          <div className="flex items-center justify-between" key={bookmark?.id}>
+            <div className="pr-4">{getContributor(bookmark)}</div>
+            <DeletePopover
+              handleDelete={() => onDelete(bookmark?.id)}
+              isLoading={isLoading}
+              trigger={
+                <Button
+                  aria-label="Delete digest"
+                  icon={<TrashIcon />}
+                  variant="destructiveGhost"
+                  isLoading={isLoading}
+                />
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </Popover>
+  );
+});
+
+MultipleDeletePopover.displayName = 'MultipleDeletePopover';

src/components/Tooltip.tsx

@@ -26,7 +26,7 @@ export const Tooltip = ({
           <Content
             side="bottom"
             sideOffset={5}
-            className="shadow-md bg-gray-600 text-xs text-white rounded-md p-2"
+            className="shadow-md bg-gray-600 text-xs text-white rounded-md p-2 z-20"
           >
             {children}
             <Arrow className="fill-gray-600" />

src/components/bookmark/BookmarkAddButton.tsx

@@ -1,20 +1,13 @@
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
-import { getTeamBookmarksNotInDigest } from '@/lib/queries';
-import Link from 'next/link';
+import { TeamBookmarkedLinkItem } from '@/lib/queries';
 import React from 'react';
-import BookmarkImage from '../bookmark/BookmarkImage';
 import { AiOutlineLoading3Quarters as LoadingIcon } from '@react-icons/all-files/ai/AiOutlineLoading3Quarters';
 import { PlusCircleIcon } from '@heroicons/react/24/solid';
-import { getRelativeDate } from '@/utils/date';
-import { getDomainFromUrl } from '@/utils/url';
 import { BookmarkDigestStyle, DigestBlockType } from '@prisma/client';
-import { getEnvHost } from '@/lib/server';
 import { isTwitterLink } from '@/utils/link';
 
 interface Props {
-  bookmark: Awaited<
-    ReturnType<typeof getTeamBookmarksNotInDigest>
-  >['bookmarks'][0];
+  bookmark: TeamBookmarkedLinkItem;
   teamId: string;
   digestId: string;
 }
@@ -39,9 +32,9 @@ export default function BookmarkAddButton({
         onClick={(e) => {
           e.preventDefault();
           add.mutate({
-            bookmarkId: bookmark.id,
+            bookmarkId: bookmark.bookmark[0].id,
             type: DigestBlockType.BOOKMARK,
-            style: isTwitterLink(bookmark.link.url)
+            style: isTwitterLink(bookmark.url)
               ? BookmarkDigestStyle.TWEET_EMBED
               : BookmarkDigestStyle.BLOCK,
           });