feat: qr image endpoint

toto04 · toto04 · commit a4db412d1c7f · 2025-11-08T12:32:06.000+01:00
diff --git a/next.config.ts b/next.config.ts
@@ -8,6 +8,14 @@ const nextConfig: NextConfig = {
   output: "standalone",
   transpilePackages: ["@t3-oss/env-nextjs", "@t3-oss/env-core"],
   experimental: { reactCompiler: true, swcTraceProfiling: ANALYZE_AND_PROFILE },
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
 }
 
 export default withBundleAnalyzer(nextConfig)
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@scalar/nextjs-api-reference": "^0.8.23",
+    "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.13.8",
     "@tanstack/react-query": "^5.90.5",
     "@ts-rest/core": "3.52.1",
@@ -39,8 +40,10 @@
     "@ts-rest/serverless": "^3.52.1",
     "@types/pg": "^8.15.5",
     "ajv": "^8.17.1",
+    "canvas": "^3.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jsdom": "^27.1.0",
     "lucide-react": "^0.552.0",
     "nanoid": "^5.1.5",
     "next": "15.5.2",
@@ -58,6 +61,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.2.0",
     "@tailwindcss/postcss": "^4",
+    "@types/jsdom": "^27.0.0",
     "@types/node": "^24.3.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -66,5 +70,5 @@
     "tw-animate-css": "^1.3.8",
     "typescript": "^5"
   },
-  "packageManager": "pnpm@10.18.1+sha512.77a884a165cbba2d8d1c19e3b4880eee6d2fcabd0d879121e282196b80042351d5eb3ca0935fa599da1dc51265cc68816ad2bddd2a2de5ea9fdf92adbec7cd34"
+  "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,4 +1,5 @@
 onlyBuiltDependencies:
   - '@tailwindcss/oxide'
+  - canvas
   - sharp
   - vue-demi
diff --git a/src/app/api/[...ts-rest]/route.ts b/src/app/api/[...ts-rest]/route.ts
@@ -1,19 +1,14 @@
 import { createNextHandler } from "@ts-rest/serverless/next"
 import { contract } from "@/lib/contract"
+import { generateQR } from "@/lib/qr/server"
 import { urlService } from "@/lib/url-service"
+import { makeShortUrl } from "@/lib/utils"
 
 const handler = createNextHandler(
   contract,
   {
     getAllUrls: async ({ query }) => {
-      const result = await urlService.getAllUrls({
-        page: query.page,
-        limit: query.limit,
-        search: query.search,
-        sortBy: query.sortBy,
-        sortOrder: query.sortOrder,
-        customOnly: query.customOnly,
-      })
+      const result = await urlService.getAllUrls(query)
       return {
         status: 200,
         body: result,
@@ -52,6 +47,14 @@ const handler = createNextHandler(
         body: urlRecord,
       }
     },
+    getQR: async ({ params, query }) => {
+      const record = await urlService.getUrlByShortCode(params.shortCode)
+      if (!record) return { status: 404, body: { error: "URL not found" } }
+
+      const url = makeShortUrl(record)
+      const body = await generateQR(url, 1024, params.ext, query)
+      return { status: 200, body }
+    },
     updateUrl: async ({ params, body }) => {
       const urlRecord = await urlService.updateUrl(params.shortCode, body.url)
       if (!urlRecord) {
diff --git a/src/components/create-url-dialog.tsx b/src/components/create-url-dialog.tsx
@@ -17,7 +17,7 @@ import {
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { env } from "@/env"
-import { createUrl } from "@/lib/actions"
+import { createUrl } from "@/lib/actions/forms"
 import { createUrlSchema } from "@/lib/validations"
 import { RandomText } from "./random-text"
 
diff --git a/src/components/dashboard.tsx b/src/components/dashboard.tsx
@@ -33,6 +33,7 @@ import {
 } from "@/components/ui/table"
 import { env } from "@/env"
 import { useUrls } from "@/hooks/urls"
+import { deleteShortUrl } from "@/lib/actions/urls"
 import type { UrlRecord, UrlsQueryParams } from "@/lib/schemas"
 import { copyToClipboard, makeShortUrl } from "@/lib/utils"
 import { CreateUrlDialog } from "./create-url-dialog"
@@ -97,15 +98,12 @@ export function Dashboard() {
     if (!confirm("Are you sure you want to delete this URL?")) return
 
     try {
-      const response = await fetch(`/api/urls/${shortCode}`, {
-        method: "DELETE",
-      })
-
-      if (response.ok) {
+      const success = await deleteShortUrl(shortCode)
+      if (success) {
         toast.success("URL deleted successfully")
         refetch()
       } else {
-        toast.error("Failed to delete URL")
+        toast.error("URL does not exist")
       }
     } catch (error) {
       console.error("Error deleting URL:", error)
diff --git a/src/components/edit-url-dialog.tsx b/src/components/edit-url-dialog.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { editUrl } from "@/lib/actions"
+import { editUrl } from "@/lib/actions/forms"
 import type { UrlRecord } from "@/lib/schemas"
 import { makeShortUrl } from "@/lib/utils"
 import { editUrlSchema } from "@/lib/validations"
diff --git a/src/components/qr-code-dialog.tsx b/src/components/qr-code-dialog.tsx
@@ -7,7 +7,7 @@ import {
   QR_OPTIONS,
   type QrOptionKey,
   type QrOptions,
-} from "@/lib/qr-config"
+} from "@/lib/qr/config"
 import type { UrlRecord } from "@/lib/schemas"
 import { makeShortUrl } from "@/lib/utils"
 import { QrCode } from "./qr-code"
diff --git a/src/components/qr-code.tsx b/src/components/qr-code.tsx
@@ -3,9 +3,8 @@
 import type { Options } from "qr-code-styling"
 import QRCodeStyling from "qr-code-styling"
 import type React from "react"
-import { useEffect, useMemo, useRef } from "react"
-import logo from "@/assets/logo.svg"
-import type { QrOptions } from "@/lib/qr-config"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { makeOptions, type QrOptions } from "@/lib/qr/config"
 import { cn } from "@/lib/utils"
 
 export type QrCodeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -24,61 +23,20 @@ export function QrCode({
 }: QrCodeProps) {
   const ref = useRef<HTMLDivElement>(null)
 
-  const { style, background } = options
-  const styled = style === "styled"
-
-  const settings = useMemo<Options>(() => {
-    const color = styled ? "#1156ae" : "#000000"
-    return {
-      type: "canvas",
-      width: size,
-      height: size,
-      margin: size / 32,
-      data: url,
-      image: styled ? logo.src : undefined,
-      imageOptions: { margin: size / 64 },
-      qrOptions: {
-        typeNumber: 0,
-        mode: "Byte",
-        errorCorrectionLevel: styled ? "Q" : "M",
-      },
-      dotsOptions: {
-        color,
-        type: styled ? "extra-rounded" : "square",
-      },
-      cornersDotOptions: {
-        color,
-      },
-      cornersSquareOptions: {
-        color,
-        type: styled ? "extra-rounded" : "square",
-      },
-      backgroundOptions: {
-        color: background === "white" ? "#ffffff" : "transparent",
-      },
-    }
-  }, [url, styled, background, size])
+  // biome-ignore lint/correctness/useExhaustiveDependencies: biome is wrong
+  const opts = useCallback(makeOptions(options), [options])
+  const settings = useMemo<Options>(() => opts(url, size), [opts, url, size])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: manually updated externally
   const qr = useMemo(() => new QRCodeStyling(settings), [])
 
   useEffect(() => {
     qr.update(settings)
     qr.getRawData("png").then((data) => {
-      if (onImageData) {
-        let blob: Blob | null = null
-        if (data instanceof Blob) {
-          blob = data
-        } else if (data instanceof Buffer) {
-          blob = new Blob([new Uint8Array(data)], { type: "image/png" })
-        }
-        onImageData(blob)
-      }
+      onImageData?.(data instanceof Blob ? data : null)
     })
     return () => {
-      if (onImageData) {
-        onImageData(null)
-      }
+      onImageData?.(null)
     }
   }, [qr, settings, onImageData])
 
diff --git a/src/components/query-provider.tsx b/src/components/query-provider.tsx
@@ -10,7 +10,7 @@ export function QueryProvider({ children }: { children: ReactNode }) {
         defaultOptions: {
           queries: {
             staleTime: 60 * 1000, // 1 minute
-            refetchOnWindowFocus: false,
+            refetchOnWindowFocus: true,
           },
         },
       })
diff --git a/src/hooks/urls.ts b/src/hooks/urls.ts
@@ -1,40 +1,32 @@
 import { useQuery } from "@tanstack/react-query"
 import { toast } from "sonner"
-import { PaginatedUrlsResponse, type UrlsQueryParams } from "@/lib/schemas"
+import { getAllUrls } from "@/lib/actions/urls"
+import type { UrlsQueryParams } from "@/lib/schemas"
 
-async function fetchUrls(params: UrlsQueryParams) {
-  const queryParams = new URLSearchParams()
+// async function fetchUrls(params: UrlsQueryParams) {
+//   const queryParams = new URLSearchParams()
 
-  if (params.page) queryParams.set("page", params.page.toString())
-  if (params.limit) queryParams.set("limit", params.limit.toString())
-  if (params.search) queryParams.set("search", params.search)
-  if (params.sortBy) queryParams.set("sortBy", params.sortBy)
-  if (params.sortOrder) queryParams.set("sortOrder", params.sortOrder)
-  if (params.customOnly) queryParams.set("customOnly", "true")
+//   if (params.page) queryParams.set("page", params.page.toString())
+//   if (params.limit) queryParams.set("limit", params.limit.toString())
+//   if (params.search) queryParams.set("search", params.search)
+//   if (params.sortBy) queryParams.set("sortBy", params.sortBy)
+//   if (params.sortOrder) queryParams.set("sortOrder", params.sortOrder)
+//   if (params.customOnly) queryParams.set("customOnly", "true")
 
-  const response = await fetch(`/api/urls?${queryParams.toString()}`)
+//   const response = await fetch(`/api/urls?${queryParams.toString()}`)
 
-  if (!response.ok) {
-    throw new Error("Failed to fetch URLs")
-  }
+//   if (!response.ok) {
+//     throw new Error("Failed to fetch URLs")
+//   }
 
-  return PaginatedUrlsResponse.parse(await response.json())
-}
+//   return PaginatedUrlsResponse.parse(await response.json())
+// }
 
 export function useUrls(params: UrlsQueryParams = {}) {
   const keys = Object.values(params).map((value) => value ?? "")
   const query = useQuery({
     queryKey: ["urls", ...keys],
-    queryFn: () =>
-      fetchUrls(params)
-        .then((d) => {
-          console.log(d)
-          return d
-        })
-        .catch((error) => {
-          console.error("Error fetching URLs:", error)
-          throw error
-        }),
+    queryFn: () => getAllUrls(params),
     staleTime: 1000 * 60, // 1 minute
   })
 
diff --git a/src/lib/actions/forms.ts b/src/lib/actions/forms.ts
@@ -2,8 +2,8 @@
 
 import type { SubmissionResult } from "@conform-to/react"
 import { parseWithZod } from "@conform-to/zod"
-import { urlService } from "./url-service"
-import { createUrlSchema, editUrlSchema } from "./validations"
+import { urlService } from "../url-service"
+import { createUrlSchema, editUrlSchema } from "../validations"
 
 export async function createUrl(
   prevState: {
diff --git a/src/lib/actions/urls.ts b/src/lib/actions/urls.ts
@@ -0,0 +1,14 @@
+"use server"
+
+import type { PaginatedUrlsResponse, UrlsQueryParams } from "../schemas"
+import { urlService } from "../url-service"
+
+export async function getAllUrls(
+  params: UrlsQueryParams
+): Promise<PaginatedUrlsResponse> {
+  return await urlService.getAllUrls(params)
+}
+
+export async function deleteShortUrl(shortCode: string): Promise<boolean> {
+  return await urlService.deleteUrl(shortCode)
+}
diff --git a/src/lib/contract.ts b/src/lib/contract.ts
@@ -1,5 +1,6 @@
 import { initContract } from "@ts-rest/core"
 import z from "zod"
+import type { QrOptions } from "./qr/config"
 import { GetUrlsQueryParams, PaginatedUrlsResponse, URLRecord } from "./schemas"
 import { createUrlSchema } from "./validations"
 
@@ -28,6 +29,21 @@ export const contract = c.router({
     },
     summary: "Get URL by short code",
   },
+  getQR: {
+    method: "GET",
+    path: "/urls/:shortCode/qr.:ext",
+    pathParams: z.object({
+      shortCode: z.string(),
+      ext: z.enum(["png", "svg", "jpeg", "webp"]),
+    }),
+    query: c.type<Partial<QrOptions>>(),
+    responses: {
+      200: c.otherResponse({
+        contentType: "image/*",
+        body: z.instanceof(Blob),
+      }),
+    },
+  },
   createUrl: {
     method: "POST",
     path: "/urls",
diff --git a/src/lib/qr/config.ts b/src/lib/qr/config.ts
diff --git a/src/lib/qr/server.ts b/src/lib/qr/server.ts
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
diff --git a/src/lib/url-service.ts b/src/lib/url-service.ts
diff --git a/src/lib/validations.ts b/src/lib/validations.ts
