refactor profile link router

drizzle.config.ts

@@ -1,6 +1,5 @@
 import "dotenv/config";
 import type { Config } from "drizzle-kit";
-
 import { env } from "@/env.mjs";
 
 export default {

package.json

@@ -97,7 +97,7 @@
     "eslint-config-next": "^14.0.0",
     "pg": "^8.11.3",
     "postcss": "^8.4.31",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.1",

prettier.config.mjs → prettier.config.cjs

@@ -12,16 +12,13 @@ const config = {
     "^(react/(.*)$)|^(react$)|^(react-native(.*)$)",
     "^(next/(.*)$)|^(next$)",
     "<THIRD_PARTY_MODULES>",
-    "",
     "^@/public/(.*)$",
-    "",
     "^@/",
-    "^~/",
     "^[../]",
     "^[./]",
   ],
   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderTypeScriptVersion: "4.4.0",
+  importOrderTypeScriptVersion: "5.2.2",
 };
 
-export default config;
+module.exports = config;

src/app/(home)/page.tsx

@@ -1,10 +1,9 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ChevronRight, Github } from "lucide-react";
-
 import OpenBio from "@/public/openbio.png";
-import { Button } from "@/components/ui/button";
 import Pricing from "@/components/pricing";
+import { Button } from "@/components/ui/button";
 
 export default function Page() {
   return (

src/app/[link]/_components/action-bar.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { Link, Rocket } from "lucide-react";
-
-import { cn } from "@/lib/utils";
 import CreateLinkBentoModal from "@/components/modals/create-link-bento";
+import { cn } from "@/lib/utils";
 
 export default function ActionBar() {
   const btnClass =

src/app/[link]/_components/avatar.tsx

@@ -2,14 +2,13 @@
 
 import { useCallback, useState } from "react";
 import Image from "next/image";
-import { useDropzone, type FileWithPath } from "react-dropzone";
 import { UploadCloud } from "lucide-react";
+import { useDropzone, type FileWithPath } from "react-dropzone";
 import { generateClientDropzoneAccept } from "uploadthing/client";
-
-import { type RouterOutputs } from "@/trpc/react";
+import { toast } from "@/components/ui/use-toast";
 import { useUploadThing } from "@/lib/uploadthing";
 import { cn } from "@/lib/utils";
-import { toast } from "@/components/ui/use-toast";
+import { type RouterOutputs } from "@/trpc/react";
 
 type Props = {
   profileLink: NonNullable<RouterOutputs["profileLink"]["getByLink"]>;
@@ -39,7 +38,7 @@ export default function ProfileLinkAvatar({ profileLink }: Props) {
       });
       setImg(URL.createObjectURL(acceptedFiles[0]!));
     },
-    [profileLink.id, startUpload]
+    [profileLink.id, startUpload],
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -56,7 +55,7 @@ export default function ProfileLinkAvatar({ profileLink }: Props) {
         "flex h-[100px] w-[100px] flex-col items-center justify-center gap-y-1 rounded-full border border-border bg-background/50 md:h-[150px] md:w-[150px]",
         !profileLink.image && profileLink.isOwner && "border-dashed",
         profileLink.isOwner && "cursor-pointer",
-        img && "border-0 border-transparent bg-transparent"
+        img && "border-0 border-transparent bg-transparent",
       )}
     >
       {img && (

src/app/[link]/_components/bento-layout.tsx

@@ -2,17 +2,15 @@
 
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
-
 import { useMemo } from "react";
+import { useParams } from "next/navigation";
 import {
-  type Layouts,
   Responsive,
   WidthProvider,
+  type Layouts,
   type ResponsiveProps,
 } from "react-grid-layout";
-
 import { api } from "@/trpc/react";
-import { useParams } from "next/navigation";
 
 export default function BentoLayout({
   children,
@@ -22,7 +20,7 @@ export default function BentoLayout({
   const { link } = useParams<{ link: string }>();
   const ResponsiveGridLayout = useMemo(
     () => WidthProvider(Responsive) as React.ComponentType<ResponsiveProps>,
-    []
+    [],
   );
 
   const [profileLink] = api.profileLink.getByLink.useSuspenseQuery({

src/app/[link]/_components/bento.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { api } from "@/trpc/react";
+import { useParams } from "next/navigation";
 import BentoCard from "@/components/bento/card";
+import { api } from "@/trpc/react";
 import BentoLayout from "./bento-layout";
-import { useParams } from "next/navigation";
 
 export default function Bento() {
   const { link } = useParams<{ link: string }>();

src/app/[link]/_components/header.tsx

@@ -1,17 +1,16 @@
 "use client";
 
 import { useEffect, useState, useTransition } from "react";
-import { useEditor, EditorContent, type Extension } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
+import { useParams } from "next/navigation";
 import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor, type Extension } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
 import { QrCode } from "lucide-react";
-
-import { api } from "@/trpc/react";
 import LinkQRModal from "@/components/modals/link-qr-modal";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
+import { api } from "@/trpc/react";
 import ProfileLinkAvatar from "./avatar";
-import { useParams } from "next/navigation";
 
 const extensions = [
   StarterKit,
@@ -79,7 +78,7 @@ export default function ProfileLinkHeader() {
               disabled={saving}
               onClick={() => {
                 void navigator.clipboard.writeText(
-                  `https://openbio.app/${profileLink.link}`
+                  `https://openbio.app/${profileLink.link}`,
                 );
                 toast({
                   title: "Copied to clipboard!",

src/app/[link]/page.tsx

@@ -1,17 +1,16 @@
+import { Suspense } from "react";
 import type { Metadata } from "next";
-
+import { notFound } from "next/navigation";
 import {
   defaultMetadata,
-  twitterMetadata,
   ogMetadata,
+  twitterMetadata,
 } from "@/app/shared-metadata";
+import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/trpc/server";
-import ProfileLinkHeader from "./_components/header";
-import Bento from "./_components/bento";
 import ActionBar from "./_components/action-bar";
-import { notFound } from "next/navigation";
-import { Suspense } from "react";
-import { Skeleton } from "@/components/ui/skeleton";
+import Bento from "./_components/bento";
+import ProfileLinkHeader from "./_components/header";
 
 type Props = {
   params: {

src/app/actions/claim-link.tsx

@@ -8,7 +8,7 @@ export const claimLink = (link: string) => {
 
   if (!userId) {
     return redirect(
-      `/app/sign-up?redirectUrl=/create-link?link=${link.toLowerCase()}`
+      `/app/sign-up?redirectUrl=/create-link?link=${link.toLowerCase()}`,
     );
   }
 

src/app/api/og/route.tsx

@@ -4,10 +4,10 @@ export const runtime = "edge";
 
 export async function GET(req: Request) {
   const calSans = await fetch(
-    new URL("../../../../public/fonts/CalSans-SemiBold.ttf", import.meta.url)
+    new URL("../../../../public/fonts/CalSans-SemiBold.ttf", import.meta.url),
   ).then((res) => res.arrayBuffer());
   const inter = await fetch(
-    new URL("../../../../public/fonts/Inter-Regular.ttf", import.meta.url)
+    new URL("../../../../public/fonts/Inter-Regular.ttf", import.meta.url),
   ).then((res) => res.arrayBuffer());
 
   const { searchParams } = new URL(req.url);
@@ -49,6 +49,6 @@ export async function GET(req: Request) {
           weight: 400,
         },
       ],
-    }
+    },
   );
 }

src/app/api/trpc/[trpc]/route.ts

@@ -1,8 +1,7 @@
 import type { NextRequest } from "next/server";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-
-import { createTRPCContext } from "@/server/api/trpc";
 import { appRouter } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
 
 const handler = (req: NextRequest) =>
   fetchRequestHandler({

src/app/api/trpc/edge/[trpc]/route.ts

@@ -1,8 +1,7 @@
 import type { NextRequest } from "next/server";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-
-import { createTRPCContext } from "@/server/api/trpc";
 import { edgeRouter } from "@/server/api/edge";
+import { createTRPCContext } from "@/server/api/trpc";
 
 export const runtime = "edge";
 export const preferredRegion = "iad1";

src/app/api/trpc/serverless/[trpc]/route.ts

@@ -1,8 +1,7 @@
 import type { NextRequest } from "next/server";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-
-import { createTRPCContext } from "@/server/api/trpc";
 import { serverlessRouter } from "@/server/api/serverless";
+import { createTRPCContext } from "@/server/api/trpc";
 
 const handler = (req: NextRequest) =>
   fetchRequestHandler({

src/app/api/uploadthing/route.ts

@@ -1,5 +1,4 @@
 import { createNextRouteHandler } from "uploadthing/next";
-
 import { appFileRouter } from "@/server/uploadthing";
 
 export const { GET, POST } = createNextRouteHandler({

src/app/api/webhook/clerk/route.ts

@@ -1,14 +1,11 @@
-import type { NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-import type { WebhookEvent } from "@clerk/nextjs/server";
-import type { WebhookRequiredHeaders } from "svix";
-import { Webhook } from "svix";
 import { type IncomingHttpHeaders } from "http";
-
-import { createTRPCContext } from "@/server/api/trpc";
-import { serverlessRouter } from "@/server/api/serverless";
-import { clerkEvent } from "@/server/api/routers/clerk/type";
+import { NextResponse, type NextRequest } from "next/server";
+import type { WebhookEvent } from "@clerk/nextjs/server";
+import { Webhook, type WebhookRequiredHeaders } from "svix";
 import { env } from "@/env.mjs";
+import { clerkEvent } from "@/server/api/routers/clerk/type";
+import { serverlessRouter } from "@/server/api/serverless";
+import { createTRPCContext } from "@/server/api/trpc";
 
 export async function POST(req: NextRequestWithSvixRequiredHeaders) {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -17,7 +14,7 @@ export async function POST(req: NextRequestWithSvixRequiredHeaders) {
   if (!parsed.success) {
     return NextResponse.json(
       { error: "Internal Server Error" },
-      { status: 500 }
+      { status: 500 },
     );
   }
   const payload = parsed.data;

src/app/api/webhook/stripe/route.ts

@@ -1,10 +1,8 @@
-import { type NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-
-import { createTRPCContext } from "@/server/api/trpc";
-import { serverlessRouter } from "@/server/api/serverless";
-import { stripe } from "@/lib/stripe";
+import { NextResponse, type NextRequest } from "next/server";
 import { env } from "@/env.mjs";
+import { stripe } from "@/lib/stripe";
+import { serverlessRouter } from "@/server/api/serverless";
+import { createTRPCContext } from "@/server/api/trpc";
 
 export async function POST(req: NextRequest) {
   const payload = await req.text();
@@ -18,7 +16,7 @@ export async function POST(req: NextRequest) {
     const event = stripe.webhooks.constructEvent(
       payload,
       signature,
-      env.STRIPE_WEBHOOK_SECRET
+      env.STRIPE_WEBHOOK_SECRET,
     );
 
     const ctx = createTRPCContext({ req });

src/app/app/(dashboard)/loading.tsx

@@ -1,5 +1,5 @@
-import { Skeleton } from "@/components/ui/skeleton";
 import { ProfileLinkCardSkeleton } from "@/components/profile-link-card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Page() {
   return (