fix(bookmarks): including url into bookmark db entry

JaleelB · Aug 2, 2024 · 15a75a3 · 15a75a3
1 parent e372220
commit 15a75a3
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 114 deletions.
diff --git a/app/article/article-wrapper.tsx b/app/article/article-wrapper.tsx
@@ -69,7 +69,14 @@ async function ArticleLoader({
     );
   }
 
-  return <Article content={content} user={user} readingHistoryId={data.id} />;
+  return (
+    <Article
+      content={content}
+      user={user}
+      readingHistoryId={data.id}
+      url={url}
+    />
+  );
 }
 
 export async function ArticleWrapper({ url }: { url: string }) {

diff --git a/app/bookmarks/bookmark-wrapper.tsx b/app/bookmarks/bookmark-wrapper.tsx
@@ -11,10 +11,13 @@ import { Icons } from "@/components/icons";
 import { getBookmarksAction } from "./bookmark";
 import { ErrorCard } from "@/components/error-card";
 import { User } from "lucia";
+import { BookmarkButton } from "./components/bookmark-button";
+import Balancer from "react-wrap-balancer";
 
 export type Bookmark = {
   id: number;
 } & z.infer<typeof articleSchema> & {
+    articleUrl: string;
     createdAt: Date;
     updatedAt: Date | null;
   };
@@ -45,26 +48,37 @@ async function BookmarkLoader({ user }: { user: User }) {
   if (!data || data.length === 0) {
     return (
       <div className="flex-1">
-        <Card
-          className={cn(
-            "mx-auto mt-12 w-full max-w-2xl space-y-4 border-none p-8",
-          )}
-        >
-          <Image
-            src="https://illustrations.popsy.co/white/abstract-art-4.svg"
-            alt="Error"
-            className="mx-auto"
-            width={300}
-            height={200}
-          />
-          <div className="flex flex-col items-center justify-center space-y-2">
-            <h3 className="font-heading text-xl">No bookmarked articles</h3>
-            <p className="max-w-md pb-2 text-center text-base text-muted-foreground">
-              You haven&apos;t bookmarked any articles yet. Click the button
-              below to start bookmarking.
-            </p>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <Balancer as="h1" className="font-heading text-3xl font-bold">
+              Bookmarks
+            </Balancer>
+            <Balancer className="text-muted-foreground">
+              Manage your bookmarked articles
+            </Balancer>
           </div>
-        </Card>
+          <Card
+            className={cn(
+              "mx-auto mt-12 w-full max-w-2xl space-y-4 border-2 bg-accent p-8 shadow-none",
+            )}
+          >
+            <Image
+              src="https://illustrations.popsy.co/white/abstract-art-4.svg"
+              alt="Error"
+              className="mx-auto"
+              width={300}
+              height={200}
+            />
+            <div className="flex flex-col items-center justify-center space-y-2">
+              <h3 className="font-heading text-xl">No bookmarked articles</h3>
+              <p className="max-w-md pb-2 text-center text-base text-muted-foreground">
+                You haven&apos;t bookmarked any articles yet. Click the button
+                below to start bookmarking.
+              </p>
+              <BookmarkButton text="Create a new bookmark" />
+            </div>
+          </Card>
+        </div>
       </div>
     );
   }

diff --git a/app/bookmarks/bookmark.ts b/app/bookmarks/bookmark.ts
@@ -28,6 +28,7 @@ export const createBookmarkAction = authenticatedAction
       publicationName: z.string(),
       readTime: z.string(),
       publishDate: z.string(),
+      articleUrl: z.string(),
     }),
   )
   .handler(async ({ input }) => {
@@ -42,6 +43,7 @@ export const createBookmarkAction = authenticatedAction
         publicationName: input.publicationName,
         readTime: input.readTime,
         publishDate: input.publishDate,
+        articleUrl: input.articleUrl,
       });
     }
     revalidatePath(input.path);

diff --git a/app/bookmarks/components/bookmark-button.tsx b/app/bookmarks/components/bookmark-button.tsx
@@ -12,7 +12,7 @@ import {
 import { SparkleBg } from "@/components/sparkle-bg";
 import { CreateBookmarkForm } from "./create-bookmark-form";
 
-export async function BookmarkButton() {
+export async function BookmarkButton({ text = "New" }: { text?: string }) {
   return (
     <Dialog>
       <DialogTrigger>
@@ -22,7 +22,7 @@ export async function BookmarkButton() {
           )}
         >
           <div className="z-20 flex h-full items-center px-4 py-2 sm:gap-1.5">
-            <span className="mr-1">New</span>
+            <span className="mr-1">{text}</span>
             <Icons.plus className="h-5 w-5 text-white" />
           </div>
           <SparkleBg />

diff --git a/app/bookmarks/components/bookmark-list.tsx b/app/bookmarks/components/bookmark-list.tsx
@@ -8,7 +8,9 @@ import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { AvatarImage } from "@radix-ui/react-avatar";
 import Link from "next/link";
+import Cookies from "js-cookie";
 import { cn, formatDate } from "@/lib/utils";
+import { v4 as uuidv4 } from "uuid";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -56,6 +58,7 @@ export default function BookmarksList({
   bookmarks: Bookmark[];
   userId: number;
 }) {
+  // const id = uuidv4();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -141,7 +144,16 @@ export default function BookmarksList({
               className={cn(
                 `relative flex w-full transform-gpu cursor-pointer flex-col gap-2 rounded-xl border bg-white p-2 shadow-sm transition-all duration-200 ease-in-out [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] hover:scale-[103%] dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]`,
               )}
+              // onClick={() => {
+              //   Cookies.set(id, bookmark.articleUrl, {
+              //     expires: 1 / 288, // Cookie expires in 5 minutes (1/288 of a day)
+              //     secure: true,
+              //     path: "/",
+              //     sameSite: "strict", // Cookie is sent only when the request is coming from the same origin
+              //   });
+              // }}
             >
+              {/* <Link href={`/article/${id}`} aria-label="article-link"> */}
               <CardContent className="p-2">
                 <div className="flex w-full justify-between">
                   <div className="flex w-full gap-3">
@@ -223,6 +235,7 @@ export default function BookmarksList({
                   {extractFirstSentence(bookmark.content)}
                 </CardDescription>
               </CardContent>
+              {/* </Link> */}
             </Card>
           ))
         ) : (

diff --git a/app/bookmarks/components/create-bookmark-form.tsx b/app/bookmarks/components/create-bookmark-form.tsx
@@ -115,6 +115,7 @@ export function CreateBookmarkForm() {
       authorImageURL: scrapedArticle?.authorInformation.authorImageURL || "",
       authorProfileURL:
         scrapedArticle?.authorInformation.authorProfileURL || "",
+      articleUrl: values.url,
       publicationName:
         scrapedArticle?.publicationInformation.publicationName || "",
       readTime: scrapedArticle?.publicationInformation.readTime || "",

diff --git a/components/article-wrapper.tsx b/components/article-wrapper.tsx
diff --git a/components/article.tsx b/components/article.tsx
@@ -29,13 +29,15 @@ export function Article({
   content,
   user,
   readingHistoryId,
+  url,
 }: {
   content: ArticleDetails;
   user: {
     email: string | null;
     id: number;
     emailVerified: Date | null;
   };
+  url: string;
   readingHistoryId: number;
 }) {
   const safeHTMLContent = DOMPurify.sanitize(content?.content || "", {
@@ -228,6 +230,7 @@ export function Article({
                       content?.authorInformation.authorProfileURL || "",
                     publicationName:
                       content?.publicationInformation.publicationName || "",
+                    articleUrl: url,
                     readTime:
                       content?.publicationInformation.readTime ||
                       calculateReadTime(content?.content as string),

diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
diff --git a/data-access/bookmarks.ts b/data-access/bookmarks.ts
@@ -6,13 +6,14 @@ import { z } from "zod";
 
 export async function createBookark(
   userId: number,
-  articleDetails: z.infer<typeof articleSchema>,
+  articleDetails: z.infer<typeof articleSchema> & { articleUrl: string },
 ) {
   const existingBookmark = await db.query.bookmarks.findFirst({
     where:
       eq(bookmarks.userId, userId) &&
       eq(bookmarks.title, articleDetails.title) &&
-      eq(bookmarks.publishDate, articleDetails.publishDate ?? ""),
+      eq(bookmarks.publishDate, articleDetails.publishDate ?? "") &&
+      eq(bookmarks.articleUrl, articleDetails.articleUrl),
   });
 
   if (existingBookmark) {
@@ -31,6 +32,7 @@ export async function createBookark(
       publicationName: articleDetails.publicationName,
       readTime: articleDetails.readTime,
       publishDate: articleDetails.publishDate,
+      articleUrl: articleDetails.articleUrl,
       createdAt: new Date(),
     })
     .onConflictDoNothing()

diff --git a/server/db/schema.ts b/server/db/schema.ts
@@ -83,6 +83,7 @@ export const bookmarks = sqliteTable("bookmark", {
   authorName: text("author_name"),
   authorImageURL: text("author_image_url"),
   authorProfileURL: text("author_profile_url"),
+  articleUrl: text("article_url").notNull(),
   publicationName: text("publication_name"),
   readTime: text("read_time"),
   publishDate: text("publish_date"),

diff --git a/use-cases/bookmarks.ts b/use-cases/bookmarks.ts
@@ -10,7 +10,7 @@ import { z } from "zod";
 
 export async function createBookmarkUseCase(
   userId: number,
-  articleDetails: z.infer<typeof articleSchema>,
+  articleDetails: z.infer<typeof articleSchema> & { articleUrl: string },
 ) {
   const bookmark = await createBookark(userId, articleDetails);