Transfer links feature

Closes dubinc#176
tokilabs · Feb 12, 2024 · ee2e74a · ee2e74a
1 parent 77c2d07
commit ee2e74a
Show file tree

Hide file tree

Showing 35 changed files with 715 additions and 1,349 deletions.
diff --git a/apps/web/app/api/cron/links/event/route.ts b/apps/web/app/api/cron/links/event/route.ts
@@ -26,7 +26,7 @@ export async function POST(req: Request) {
 
   const { linkId, type } = body as {
     linkId: string;
-    type: "create" | "edit";
+    type: "create" | "edit" | "transfer";
   };
 
   const link = await prisma.link.findUnique({
@@ -39,8 +39,8 @@ export async function POST(req: Request) {
     return new Response("Link not found", { status: 200 });
   }
 
-  // if the link is a dub.sh link, do some checks
-  if (link.domain === "dub.sh") {
+  // if the link is a dub.sh link (and is not a transfer event), do some checks
+  if (link.domain === "dub.sh" && type !== "transfer") {
     const invalidFavicon = await fetch(
       `${GOOGLE_FAVICON_URL}${getApexDomain(link.url)}`,
     ).then((res) => !res.ok);

diff --git a/apps/web/app/api/links/[linkId]/archive/route.ts b/apps/web/app/api/links/[linkId]/archive/route.ts
@@ -4,12 +4,12 @@ import { NextResponse } from "next/server";
 
 // POST /api/links/[linkId]/archive – archive a link
 export const POST = withAuth(async ({ headers, link }) => {
-  const response = await archiveLink(link!.domain, link!.key, true);
+  const response = await archiveLink({ linkId: link!.id, archived: true });
   return NextResponse.json(response, { headers });
 });
 
 // DELETE /api/links/[linkId]/archive – unarchive a link
 export const DELETE = withAuth(async ({ headers, link }) => {
-  const response = await archiveLink(link!.domain, link!.key, false);
+  const response = await archiveLink({ linkId: link!.id, archived: false });
   return NextResponse.json(response, { headers });
 });
diff --git a/apps/web/app/api/links/[linkId]/transfer/route.ts b/apps/web/app/api/links/[linkId]/transfer/route.ts
@@ -0,0 +1,66 @@
+import { transferLink } from "@/lib/api/links";
+import { withAuth } from "@/lib/auth";
+import { qstash } from "@/lib/cron";
+import prisma from "@/lib/prisma";
+import { APP_DOMAIN_WITH_NGROK } from "@dub/utils";
+import { NextResponse } from "next/server";
+
+// POST /api/links/[linkId]/transfer – transfer a link to another project
+export const POST = withAuth(async ({ req, headers, session, link }) => {
+  let body: { newProjectId: string };
+
+  try {
+    body = await req.json();
+  } catch (error) {
+    return new Response("Missing or invalid body.", { status: 400, headers });
+  }
+
+  if (!body.newProjectId) {
+    return new Response("Missing new project ID.", { status: 400, headers });
+  }
+
+  const newProject = await prisma.project.findUnique({
+    where: { id: body.newProjectId },
+    select: {
+      linksUsage: true,
+      linksLimit: true,
+      users: {
+        where: {
+          userId: session.user.id,
+        },
+        select: {
+          role: true,
+        },
+      },
+    },
+  });
+
+  if (!newProject || newProject.users.length === 0) {
+    return new Response("New project not found.", { status: 404, headers });
+  }
+
+  if (newProject.linksUsage >= newProject.linksLimit) {
+    return new Response("New project has reached its link limit.", {
+      status: 403,
+      headers,
+    });
+  }
+
+  const response = await Promise.all([
+    transferLink({
+      linkId: link!.id,
+      newProjectId: body.newProjectId,
+    }),
+    qstash.publishJSON({
+      url: `${APP_DOMAIN_WITH_NGROK}/api/cron/links/event`,
+      body: {
+        linkId: link!.id,
+        type: "transfer",
+      },
+    }),
+  ]);
+
+  return NextResponse.json(response, {
+    headers,
+  });
+});
diff --git a/apps/web/lib/api/links.ts b/apps/web/lib/api/links.ts
@@ -677,20 +677,36 @@ export async function deleteLink(link: LinkProps) {
   ]);
 }
 
-export async function archiveLink(
-  domain: string,
-  key: string,
-  archived = true,
-) {
+export async function archiveLink({
+  linkId,
+  archived,
+}: {
+  linkId: string;
+  archived: boolean;
+}) {
   return await prisma.link.update({
     where: {
-      domain_key: {
-        domain,
-        key,
-      },
+      id: linkId,
     },
     data: {
       archived,
     },
   });
 }
+
+export async function transferLink({
+  linkId,
+  newProjectId,
+}: {
+  linkId: string;
+  newProjectId: string;
+}) {
+  return await prisma.link.update({
+    where: {
+      id: linkId,
+    },
+    data: {
+      projectId: newProjectId,
+    },
+  });
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -87,7 +87,6 @@
     "vaul": "^0.6.8"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/dotenv-flow": "^3.3.2",
     "@types/he": "^1.2.3",
     "@types/html-escaper": "^3.0.0",
@@ -103,9 +102,9 @@
     "papaparse": "^5.4.1",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.3",
     "tsx": "^3.14.0",
     "turbo": "^1.10.14",

diff --git a/apps/web/ui/links/link-card.tsx b/apps/web/ui/links/link-card.tsx
@@ -38,6 +38,7 @@ import {
   CopyPlus,
   Edit3,
   EyeOff,
+  FolderInput,
   Mail,
   MessageCircle,
   QrCode,
@@ -49,6 +50,7 @@ import punycode from "punycode/";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import useSWR, { mutate } from "swr";
+import { useTransferLinkModal } from "../modals/transfer-link-modal";
 
 export default function LinkCard({
   props,
@@ -133,6 +135,9 @@ export default function LinkCard({
     props,
     archived: !archived,
   });
+  const { setShowTransferLinkModal, TransferLinkModal } = useTransferLinkModal({
+    props,
+  });
   const { setShowDeleteLinkModal, DeleteLinkModal } = useDeleteLinkModal({
     props,
   });
@@ -181,7 +186,7 @@ export default function LinkCard({
     // - there is no existing modal backdrop
     if (
       (selected || openPopover) &&
-      ["e", "d", "q", "a", "x"].includes(e.key)
+      ["e", "d", "q", "a", "t", "x"].includes(e.key)
     ) {
       setSelected(false);
       e.preventDefault();
@@ -198,6 +203,9 @@ export default function LinkCard({
         case "a":
           setShowArchiveLinkModal(true);
           break;
+        case "t":
+          setShowTransferLinkModal(true);
+          break;
         case "x":
           setShowDeleteLinkModal(true);
           break;
@@ -225,6 +233,7 @@ export default function LinkCard({
           <AddEditLinkModal />
           <DuplicateLinkModal />
           <ArchiveLinkModal />
+          <TransferLinkModal />
           <DeleteLinkModal />
         </>
       )}
@@ -470,6 +479,21 @@ export default function LinkCard({
                     A
                   </kbd>
                 </button>
+                <button
+                  onClick={() => {
+                    setOpenPopover(false);
+                    setShowTransferLinkModal(true);
+                  }}
+                  className="group flex w-full items-center justify-between rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
+                >
+                  <IconMenu
+                    text="Transfer"
+                    icon={<FolderInput className="h-4 w-4" />}
+                  />
+                  <kbd className="hidden rounded bg-gray-100 px-2 py-0.5 text-xs font-light text-gray-500 transition-all duration-75 group-hover:bg-gray-200 sm:inline-block">
+                    T
+                  </kbd>
+                </button>
                 <button
                   onClick={() => {
                     setOpenPopover(false);

diff --git a/apps/web/ui/modals/accept-invite-modal.tsx b/apps/web/ui/modals/accept-invite-modal.tsx
@@ -44,7 +44,7 @@ function AcceptInviteModal({
               project on {process.env.NEXT_PUBLIC_APP_NAME}
             </p>
           </div>
-          <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+          <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
             <button
               onClick={() => {
                 setAccepting(true);
@@ -84,7 +84,7 @@ function AcceptInviteModal({
               This invite has expired or is no longer valid.
             </p>
           </div>
-          <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+          <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
             <Link
               href="/"
               className="flex h-10 w-full items-center justify-center rounded-md border border-black bg-black text-sm text-white transition-all hover:bg-white hover:text-black focus:outline-none"

diff --git a/apps/web/ui/modals/add-edit-domain-modal/index.tsx b/apps/web/ui/modals/add-edit-domain-modal/index.tsx
@@ -171,7 +171,7 @@ function AddEditDomainModal({
             setSaving(false);
           });
         }}
-        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16"
+        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16"
       >
         <div>
           <div className="flex items-center justify-between">

diff --git a/apps/web/ui/modals/add-edit-link-modal/index.tsx b/apps/web/ui/modals/add-edit-link-modal/index.tsx
@@ -584,7 +584,7 @@ function AddEditLinkModal({
             <div
               className={`${
                 atBottom ? "" : "md:shadow-[0_-20px_30px_-10px_rgba(0,0,0,0.1)]"
-              } z-10 bg-gray-50 px-4 py-8 transition-all md:sticky  md:bottom-0 md:px-16`}
+              } z-10 bg-gray-50 px-4 py-8 transition-all sm:rounded-b-2xl md:sticky  md:bottom-0 md:px-16`}
             >
               {homepageDemo ? (
                 <Button

diff --git a/apps/web/ui/modals/add-project-modal.tsx b/apps/web/ui/modals/add-project-modal.tsx
@@ -158,7 +158,7 @@ function AddProjectModalHelper({
             setSaving(false);
           });
         }}
-        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16"
+        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16"
       >
         <div>
           <label htmlFor="name" className="flex items-center space-x-2">

diff --git a/apps/web/ui/modals/archive-link-modal.tsx b/apps/web/ui/modals/archive-link-modal.tsx
@@ -115,7 +115,7 @@ function ArchiveLinkModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         <Button
           onClick={handleArchiveRequest}
           autoFocus

diff --git a/apps/web/ui/modals/complete-setup-modal.tsx b/apps/web/ui/modals/complete-setup-modal.tsx
@@ -63,7 +63,7 @@ function CompleteSetupModal({
           links.
         </p>
       </div>
-      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-12">
+      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-12">
         <div className="grid divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white">
           {tasks.map(({ display, cta, checked }) => {
             const contents = (

diff --git a/apps/web/ui/modals/delete-account-modal.tsx b/apps/web/ui/modals/delete-account-modal.tsx
@@ -69,7 +69,7 @@ function DeleteAccountModal({
             error: (err) => err,
           });
         }}
-        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16"
+        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16"
       >
         <div>
           <label htmlFor="verification" className="block text-sm text-gray-700">

diff --git a/apps/web/ui/modals/delete-link-modal.tsx b/apps/web/ui/modals/delete-link-modal.tsx
@@ -85,7 +85,7 @@ function DeleteLinkModal({
             setDeleting(false);
           });
         }}
-        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16"
+        className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16"
       >
         <div>
           <label htmlFor="verification" className="block text-sm text-gray-700">

diff --git a/apps/web/ui/modals/delete-token-modal.tsx b/apps/web/ui/modals/delete-token-modal.tsx
@@ -45,7 +45,7 @@ function DeleteTokenModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         <div className="relative flex items-center space-x-3 rounded-md border border-gray-300 bg-white px-1 py-3">
           <Badge variant="neutral" className="absolute right-2 top-2">
             {token.partialKey}

diff --git a/apps/web/ui/modals/edit-role-modal.tsx b/apps/web/ui/modals/edit-role-modal.tsx
@@ -51,7 +51,7 @@ function EditRoleModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         <div className="flex items-center space-x-3 rounded-md border border-gray-300 bg-white p-3">
           <Avatar user={user} />
           <div className="flex flex-col">

diff --git a/apps/web/ui/modals/google-oauth-modal.tsx b/apps/web/ui/modals/google-oauth-modal.tsx
@@ -40,7 +40,7 @@ function GoogleOauthModal({
           </a>
         </p>
       </div>
-      <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         <Button
           text="Connect Google Account"
           onClick={() => {

diff --git a/apps/web/ui/modals/import-bitly-modal.tsx b/apps/web/ui/modals/import-bitly-modal.tsx
@@ -109,7 +109,7 @@ function ImportBitlyModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         {isLoading ? (
           <button className="flex flex-col items-center justify-center space-y-4 bg-none">
             <LoadingSpinner />

diff --git a/apps/web/ui/modals/import-rebrandly-modal.tsx b/apps/web/ui/modals/import-rebrandly-modal.tsx
@@ -117,7 +117,7 @@ function ImportRebrandlyModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         {isLoading ? (
           <button className="flex flex-col items-center justify-center space-y-4 bg-none">
             <LoadingSpinner />

diff --git a/apps/web/ui/modals/import-short-modal.tsx b/apps/web/ui/modals/import-short-modal.tsx
@@ -105,7 +105,7 @@ function ImportShortModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-6 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         {isLoading ? (
           <button className="flex flex-col items-center justify-center space-y-4 bg-none">
             <LoadingSpinner />

diff --git a/apps/web/ui/modals/invite-teammate-modal.tsx b/apps/web/ui/modals/invite-teammate-modal.tsx
@@ -71,7 +71,7 @@ function InviteTeammateModal({
             setInviting(false);
           });
         }}
-        className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:px-16"
+        className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16"
       >
         <div>
           <label htmlFor="email" className="block text-sm text-gray-700">

diff --git a/apps/web/ui/modals/remove-saml-modal.tsx b/apps/web/ui/modals/remove-saml-modal.tsx
@@ -46,7 +46,7 @@ function RemoveSAMLModal({
         </p>
       </div>
 
-      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:px-16">
+      <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 text-left sm:rounded-b-2xl sm:px-16">
         <div className="flex items-center space-x-3 rounded-md border border-gray-300 bg-white p-3">
           <img
             src={SAML_PROVIDERS.find((p) => p.name === provider)!.logo}