Merge branch 'main' into feat/inbox

components/PDFViewer.tsx

@@ -1,6 +1,12 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
 import { Document, Page, pdfjs } from "react-pdf";
+import Download from "@/components/shared/icons/download";
+import { Button } from "./ui/button";
+import { useSession } from "next-auth/react";
+import { toast } from "sonner";
+
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -117,7 +123,7 @@ export default function PDFViewer(props: any) {
 
   return (
     <>
-      <Nav pageNumber={pageNumber} numPages={numPages} />
+      <Nav pageNumber={pageNumber} numPages={numPages} linkId={props.linkId} />
       <div
         hidden={loading}
         style={{ height: "calc(100vh - 64px)" }}
@@ -170,22 +176,67 @@ export default function PDFViewer(props: any) {
 }
 
 
-function Nav({pageNumber, numPages}: {pageNumber: number, numPages: number}) {
+function Nav({pageNumber, numPages, linkId}: {pageNumber: number, numPages: number, linkId: string}) {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const path = router.asPath;
+
+  const saveToInbox = async () => {
+    if (!session) {
+      router.push(`/login?next=${encodeURIComponent(path)}`);
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/links/save", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ linkId }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Failed to save the link.");
+      }
+
+      toast.success("Document saved to inbox")
+
+      // Handle success, maybe show a success message or update local state
+    } catch (error) {
+      // Handle error, maybe show an error message to the user
+      console.error(error);
+    }
+  }
+
   return (
     <nav className="bg-black">
-      <div className="mx-auto px-2 sm:px-6 lg:px-8">
+      <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
-          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+          <div className="flex flex-1 items-stretch sm:justify-start">
             <div className="flex flex-shrink-0 items-center">
               <p className="text-2xl font-bold tracking-tighter text-white">
                 Papermark
               </p>
             </div>
           </div>
-          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-            <div className="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium">
-              <span>{pageNumber}</span>
-              <span className="text-gray-400"> / {numPages}</span>
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center">
+              <Button
+                onClick={saveToInbox}
+                variant="secondary"
+                className="px-3 py-2 h-full"
+              >
+                <Download className="h-5 w-5" />
+              </Button>
+            </div>
+            <div className="flex items-center">
+              <div className="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium">
+                <span>{pageNumber}</span>
+                <span className="text-gray-400"> / {numPages}</span>
+              </div>
             </div>
           </div>
         </div>

components/Sidebar.tsx

@@ -1,11 +1,13 @@
 import { Fragment, useState } from "react";
 import { Menu, Dialog, Transition } from "@headlessui/react";
 import { signOut, useSession } from "next-auth/react";
-import {
-  Bars3Icon,
-  ChevronUpIcon,
-} from "@heroicons/react/20/solid";
-import { FolderIcon, HomeIcon, XMarkIcon, ChartBarIcon  } from "@heroicons/react/24/outline";
+import X from "@/components/shared/icons/x";
+import Home from "@/components/shared/icons/home";
+import Files from "@/components/shared/icons/files";
+import Inbox from "@/components/shared/icons/inbox";
+import BarChart2 from "@/components/shared/icons/bar-chart-2";
+import MenuIcon from "@/components/shared/icons/menu";
+import ChevronUp from "@/components/shared/icons/chevron-up";
 import Link from "next/link";
 import { classNames } from "@/lib/utils";
 import { useRouter } from "next/router";
@@ -19,21 +21,28 @@ export default function Sidebar() {
     {
       name: "Overview",
       href: "/overview",
-      icon: HomeIcon,
+      icon: Home,
       current: router.pathname.includes("overview"),
       disabled: true,
     },
     {
       name: "Documents",
       href: "/documents",
-      icon: FolderIcon,
+      icon: Files,
       current: router.pathname.includes("documents"),
       disabled: false,
     },
+    {
+      name: "Inbox",
+      href: "/inbox",
+      icon: Inbox,
+      current: router.pathname.includes("inbox"),
+      disabled: false,
+    },
     {
       name: "Analytics",
       href: "/analytics",
-      icon: ChartBarIcon,
+      icon: BarChart2,
       current: router.pathname.includes("analytics"),
       disabled: true,
     },
@@ -86,8 +95,8 @@ export default function Sidebar() {
                       onClick={() => setSidebarOpen(false)}
                     >
                       <span className="sr-only">Close sidebar</span>
-                      <XMarkIcon
-                        className="h-6 w-6 text-white"
+                      <X
+                        className="h-6 w-6"
                         aria-hidden="true"
                       />
                     </button>
@@ -181,10 +190,7 @@ export default function Sidebar() {
                     <span className="flex items-center w-full justify-between">
                       <span className="sr-only">Your profile</span>
                       <span aria-hidden="true">{session?.user?.name}</span>
-                      <ChevronUpIcon
-                        className="ml-2 h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
+                      <ChevronUp />
                     </span>
                   </Menu.Button>
                   <Transition
@@ -237,7 +243,7 @@ export default function Sidebar() {
             onClick={() => setSidebarOpen(true)}
           >
             <span className="sr-only">Open sidebar</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+            <MenuIcon className="h-6 w-6" aria-hidden="true" />
           </button>
 
           {/* Separator */}

components/shared/icons/bar-chart-2.tsx

@@ -0,0 +1,20 @@
+export default function BarChart2({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      shapeRendering="geometricPrecision"
+      className={className}
+    >
+      <line x1="18" x2="18" y1="20" y2="10" />
+      <line x1="12" x2="12" y1="20" y2="4" />
+      <line x1="6" x2="6" y1="20" y2="14" />
+    </svg>
+  );
+}

components/shared/icons/chevron-up.tsx

@@ -0,0 +1,19 @@
+export default function ChevronUp({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      shapeRendering="geometricPrecision"
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}
+

components/shared/icons/download.tsx

@@ -0,0 +1,21 @@
+export default function Download({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" x2="12" y1="15" y2="3" />
+    </svg>
+  );
+}
+

components/shared/icons/external-link.tsx

@@ -0,0 +1,21 @@
+export default function ExternalLink({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" x2="21" y1="14" y2="3" />
+    </svg>
+  );
+}
+

components/shared/icons/files.tsx

@@ -0,0 +1,20 @@
+export default function Files({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      shapeRendering="geometricPrecision"
+      className={className}
+    >
+      <path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z" />
+      <path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8" />
+      <path d="M15 2v5h5" />
+    </svg>
+  );
+}

components/shared/icons/home.tsx

@@ -0,0 +1,19 @@
+export default function Home({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      shapeRendering="geometricPrecision"
+      className={className}
+    >
+      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+      <polyline points="9 22 9 12 15 12 15 22" />
+    </svg>
+  );
+}

components/shared/icons/inbox.tsx

@@ -0,0 +1,19 @@
+export default function Inbox({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      shapeRendering="geometricPrecision"
+      className={className}
+    >
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </svg>
+  );
+}

components/shared/icons/menu.tsx

@@ -0,0 +1,20 @@
+export default function Menu({ className }: { className?: string }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      shapeRendering="geometricPrecision"
+      className={className}
+    >
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  );
+}

lib/swr/use-links.ts

@@ -0,0 +1,32 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { fetcher } from "@/lib/utils";
+import { SavedLink } from "@prisma/client";
+
+interface SavedLinkWithDocumentProps extends SavedLink {
+  link: {
+    id: string;
+    name: string | null;
+    document: {
+      id: string;
+      name: string | null;
+    };
+  }
+}
+
+export default function useSavedLinks() {
+  const router = useRouter();
+
+  const { data: savedLinks, isValidating } = useSWR<
+    SavedLinkWithDocumentProps[]
+  >(router.isReady && `/api/links/savedLinks`, fetcher, {
+    revalidateOnFocus: false,
+    dedupingInterval: 30000,
+  });
+
+  return {
+    savedLinks,
+    loading: savedLinks ? false : true,
+    isValidating,
+  };
+}

lib/utils.ts

@@ -59,7 +59,7 @@ export const log = async (message: string) => {
       }),
     });
   } catch (e) {
-    console.log(`Failed to log to Dub Slack. Error: ${e}`);
+    console.log(`Failed to log to Papermark Slack. Error: ${e}`);
   }
 };
 

pages/api/documents/update.ts

@@ -11,22 +11,29 @@ export default async function handle(
 ) {
   if (req.method === "POST") {
     // POST /api/documents/update
-    const session = await getServerSession(req, res, authOptions);
-    if (!session) {
-      res.status(401).end("Unauthorized");
-      return;
-    }
+    // const session = await getServerSession(req, res, authOptions);
+    // if (!session) {
+    //   res.status(401).end("Unauthorized");
+    //   return;
+    // }
 
     // Assuming data is an object with `name` and `description` properties
     const { documentId, numPages } = req.body;
 
     try {
       // Save data to the database
-      await prisma.document.update({
+      const existingDocument = await prisma.document.findUnique({
         where: { id: documentId },
-        data: { numPages: numPages },
+        select: { numPages: true }
       });
 
+      if (existingDocument?.numPages === null) {
+        await prisma.document.update({
+          where: { id: documentId },
+          data: { numPages: numPages }
+        });
+      }
+
       res.status(201).json({message: "Document updated successfully"});
     } catch (error) {
       log(`Failed to create document. Error: \n\n ${error}`);

pages/api/links/save.ts

@@ -0,0 +1,62 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import prisma from "@/lib/prisma";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "POST") {
+    // POST /api/links/save
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    // Extract link information from the request body
+    const { linkId } = req.body;
+
+    // Check linkId validity (You can add more validations if needed)
+    if (!linkId) {
+      return res.status(400).json({ error: "linkId is required" });
+    }
+
+    const userIdFromSession = (session.user as CustomUser).id;
+
+    try {
+      // Check if the link is already saved by the user
+      const existingSavedLink = await prisma.savedLink.findFirst({
+        where: {
+          userId: userIdFromSession,
+          linkId: linkId
+        }
+      });
+
+      if (existingSavedLink) {
+        return res.status(200).json({ success: true, existingSavedLink });
+      }
+
+      const savedLink = await prisma.savedLink.create({
+        data: {
+          userId: (session.user as CustomUser).id,
+          linkId: linkId,
+        },
+      });
+
+
+      // Return the saved link information (or just a success message)
+      return res.status(200).json({ success: true, savedLink });
+    } catch (error) {
+      // Handle potential errors, like if the link already exists for the user
+
+      return res
+        .status(500)
+        .json({ error: "An error occurred while saving the link" });
+    }
+  }
+
+  return res.status(405).json({ error: "Method not allowed" });
+}

pages/api/links/savedLinks.ts

@@ -0,0 +1,53 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import prisma from "@/lib/prisma";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../auth/[...nextauth]";
+import { CustomUser } from "@/lib/types";
+
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method === "GET") {
+    // POST /api/links/savedLinks
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    try {
+      // Check if the link is already saved by the user
+      const savedLinks = await prisma.savedLink.findMany({
+        where: {
+          userId: (session.user as CustomUser).id,
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+        include: {
+          link: {
+            select: {
+              id: true,
+              name: true,
+              document: {
+                select: {
+                  name: true,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      return res.status(200).json(savedLinks);
+    } catch (error) {
+      return res
+        .status(500)
+        .json({ error: "An error occurred while saving the link" });
+    }
+  }
+
+  res.setHeader("Allow", ["GET"]);
+  return res.status(405).end(`Method ${req.method} Not Allowed`);
+}

pages/documents/index.tsx

@@ -1,9 +1,7 @@
-import Sidebar from "@/components/Sidebar";
 import useDocuments from "@/lib/swr/use-documents";
 import DocumentCard from "@/components/documents/document-card";
 import Skeleton from "@/components/Skeleton";
 import { PlusIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
 import { AddDocumentModal } from "@/components/documents/add-document-modal";
 import { Separator } from "@/components/ui/separator";
 import AppLayout from "@/components/layouts/app"

pages/inbox/index.tsx

@@ -0,0 +1,86 @@
+import Skeleton from "@/components/Skeleton";
+import { Separator } from "@/components/ui/separator";
+import AppLayout from "@/components/layouts/app"
+import useSavedLinks from "@/lib/swr/use-links";
+import Link from "next/link";
+import ExternalLink from "@/components/shared/icons/external-link";
+import { timeAgo } from "@/lib/utils";
+
+
+export default function Inbox() {
+  const { savedLinks } = useSavedLinks();
+
+  return (
+    <AppLayout>
+      <div className="p-4 sm:p-4 sm:m-4">
+        <div className="flex items-center justify-between mb-4 md:mb-8 lg:mb-12">
+          <div className="space-y-1">
+            <h2 className="text-2xl text-white font-semibold tracking-tight">
+              Inbox
+            </h2>
+            <p className="text-sm text-gray-400">
+              Never lose a received document again
+            </p>
+          </div>
+          <ul className="flex items-center justify-between gap-4">
+            <button
+              type="button"
+              className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-950 bg-gray-300 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+            >
+              Import Link
+            </button>
+          </ul>
+        </div>
+
+        <Separator className="my-6 bg-gray-700" />
+
+        {savedLinks && savedLinks.length === 0 && (
+          <div className="flex items-center justify-center h-96">
+            Nothing here yet.
+          </div>
+        )}
+
+        {/* Link list */}
+        <ul role="list" className="space-y-4">
+          {savedLinks
+            ? savedLinks.map((savedLink) => (
+                <li key={savedLink.id} className="group relative rounded-lg bg-gray-800 p-3  sm:p-4 flex justify-between items-center">
+                  <div className="min-w-0 flex shrink items-center space-x-4">
+                    <div className="flex-col">
+                      <div className="flex items-center">
+                        <h2 className="min-w-0 text-sm font-semibold leading-6 text-white truncate max-w-[240px] sm:max-w-md">
+                          {savedLink.link.document.name}
+                        </h2>
+                      </div>
+                      <div className="mt-1 flex items-center space-x-1 text-xs leading-5 text-gray-400">
+                        <p className="truncate">
+                          {`Saved document ${timeAgo(savedLink.createdAt)}`}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Link
+                    href={`/view/${savedLink.link.id}`}
+                    target="_blank"
+                    className="flex items-center text-sm z-10 space-x-2 rounded-md bg-gray-700 px-2 py-0.5 transition-all duration-75 hover:scale-105 active:scale-100 ring-2 ring-gray-700 group-hover:ring-gray-500"
+                  >
+                    <span>Visit document</span>
+                    <ExternalLink />
+                  </Link>
+                </li>
+              ))
+            : Array.from({ length: 3 }).map((_, i) => (
+                <li
+                  key={i}
+                  className="flex flex-col space-y-4 px-4 py-4 sm:px-6 lg:px-8"
+                >
+                  <Skeleton key={i} className="h-5 w-20" />
+                  <Skeleton key={i} className="mt-3 h-3 w-10" />
+                </li>
+              ))}
+        </ul>
+      </div>
+    </AppLayout>
+  );
+}

prisma/schema.prisma

@@ -47,6 +47,7 @@ model User {
   accounts      Account[]
   sessions      Session[]
   documents     Document[]
+  savedLinks    SavedLink[]
 }
 
 model VerificationToken {
@@ -84,6 +85,7 @@ model Link {
   emailProtected Boolean    @default(true) // Optional email protection
   isArchived    Boolean     @default(false) // Indicates if the link is archived
   views         View[]
+  savedBy       SavedLink[]
   createdAt     DateTime    @default(now())
   updatedAt     DateTime    @updatedAt
 }
@@ -96,4 +98,15 @@ model View {
   documentId  String
   viewerEmail String?     // Email of the viewer if known
   viewedAt    DateTime    @default(now())
+}
+
+model SavedLink {
+  id        String @id @default(cuid())
+  userId    String
+  user      User   @relation(fields: [userId], references: [id])
+  linkId    String
+  link      Link   @relation(fields: [linkId], references: [id])
+  createdAt DateTime @default(now())
+  
+  @@unique([userId, linkId]) // Ensure that a user can save a link only once
 }