feat: refactor link caching logic and improve UI component styles

Author: vignesh-gupta

apps/web/app/app.clikz/(dashboard)/[slug]/_components/dashboard-sidebar.tsx

@@ -61,7 +61,7 @@ export function DashboardSidebar() {
   const currentNavigation = isSettingsPage ? settingsNavigation : navigation;
 
   return (
-    <Sidebar className="bg-slate-700">
+    <Sidebar>
       <AnimatePresence mode="wait">
         <motion.div
           key={

apps/web/components/preview/social-preview.tsx

@@ -33,8 +33,8 @@ const ImagePreview = ({
             className="relative size-full rounded-[inherit] object-cover"
           />
         ) : (
-          <div className="flex size-full flex-col items-center justify-center space-y-4 bg-white">
-            <ImageIcon className="h-8 w-8 text-gray-400" />
+          <div className="flex flex-col items-center justify-center space-y-4 bg-white size-full">
+            <ImageIcon className="size-8 text-gray-400" />
             <p className="text-sm text-gray-400">
               Enter a link to generate a preview.
             </p>
@@ -70,8 +70,8 @@ export const WebPreview = ({
   return (
     <ImagePreview image={image} loading={loading}>
       <div className="px-1 pt-2 space-y-1">
-        <h3 className="text-sm">{title}</h3>
-        <p className="text-xs">{description}</p>
+        <h3 className="text-sm line-clamp-1">{title}</h3>
+        <p className="text-xs line-clamp-2">{description}</p>
       </div>
     </ImagePreview>
   );
@@ -80,8 +80,8 @@ export const WebPreview = ({
 export const XPreview = ({ loading, title, image }: BasePreviewProps) => {
   return (
     <ImagePreview image={image} loading={loading} className="rounded-2xl">
-      <div className="space-y-1 absolute left-2 bottom-2">
-        <h3 className="text-sm bg-gray-900/35 text-white px-2 py-1 rounded-md">
+      <div className="absolute space-y-1 left-2 bottom-2">
+        <h3 className="px-2 py-1 text-sm text-white rounded-md bg-gray-900/35 line-clamp-1">
           {title}
         </h3>
       </div>
@@ -101,9 +101,9 @@ export const FacebookPreview = ({
 }: FacebookPreviewProps) => {
   return (
     <ImagePreview image={image} loading={loading} className="rounded-none">
-      <div className="p-3 space-y-1 bg-gray-100 border-1 border-t-0 border-gray-800 rounded-none">
+      <div className="p-3 space-y-1 bg-gray-100 border-t-0 border-gray-800 rounded-none border-1 line-clamp-1">
         <h3 className="text-sm">{title}</h3>
-        <p className="text-xs">{description}</p>
+        <p className="text-xs line-clamp-2">{description}</p>
       </div>
     </ImagePreview>
   );
@@ -121,7 +121,7 @@ export const LinkedInPreview = ({
 }: LinkedInPreviewProps) => {
   return (
     <Card>
-      <CardContent className="p-2 rounded-md grid grid-cols-2 gap-4 my-auto">
+      <CardContent className="grid grid-cols-2 gap-4 p-2 my-auto rounded-md">
         {loading ? (
           <div className="absolute inset-0 z-[5] flex items-center justify-center rounded-[inherit] bg-white">
             <LoaderCircle className="animate-spin size-5" />
@@ -131,20 +131,20 @@ export const LinkedInPreview = ({
             <img
               src={image}
               alt="Preview"
-              className="w-full object-contain rounded-md"
+              className="object-contain w-full rounded-md"
             />
           </div>
         ) : (
-          <div className="flex size-full flex-col items-center justify-center space-y-2 text-center bg-gray-200 p-4">
-            <ImageIcon className="size-5 text-gray-400" />
+          <div className="flex flex-col items-center justify-center p-4 space-y-2 text-center bg-gray-200 size-full">
+            <ImageIcon className="text-gray-400 size-5" />
             <p className="text-sm text-gray-400 text-pretty">
               Enter a link to generate a preview.
             </p>
           </div>
         )}
-        <div className="py-2 flex flex-col justify-between">
+        <div className="flex flex-col justify-between py-2">
           <h3 className="text-sm line-clamp-2 ">{title}</h3>
-          <p className="text-xs text-muted-foreground">
+          <p className="text-xs line-clamp-2 text-muted-foreground">
             {url
               ? (isValidUrl(url) && new URL(url).host) || "example.com"
               : url}

apps/web/features/link/server.ts

@@ -1,8 +1,11 @@
+import { after } from "next/server";
+
 import { zValidator } from "@hono/zod-validator";
 import { Hono } from "hono";
 
 import { roleMiddleware } from "~/lib/backend/role-middleware";
 import { sessionMiddleware } from "~/lib/backend/session-middleware";
+import { deleteLinkFromRedis, setLinkToRedis } from "~/lib/cache/link";
 import { BASE_DOMAIN, BASE_URL } from "~/lib/constants";
 import { db } from "~/lib/db";
 import {
@@ -92,7 +95,7 @@ const linksApp = new Hono()
     "/:linkId",
     sessionMiddleware,
     roleMiddleware(),
-    zValidator("json", linkSchema.partial()),
+    zValidator("json", linkSchema),
     zValidator("query", workspaceSlugSchema),
     async (c) => {
       const { comment, destination, slug, domain } = c.req.valid("json");
@@ -123,6 +126,10 @@ const linksApp = new Hono()
         },
       });
 
+      after(() => {
+        setLinkToRedis(slug, domain || BASE_DOMAIN, link);
+      });
+
       return c.json({ link });
     }
   )
@@ -132,6 +139,7 @@ const linksApp = new Hono()
     const link = await db.link.delete({
       where: { id: linkId },
     });
+    after(() => deleteLinkFromRedis(link.key, link.domain));
 
     return c.json({ link });
   })

apps/web/features/workspace/components/workspace-switcher.tsx

@@ -44,14 +44,14 @@ const WorkspaceSwitcher = ({ className }: WorkspaceSwitcherProps) => {
         <Skeleton className="w-full h-11" />
       ) : (
         <Select onValueChange={onSelect} value={slug}>
-          <SelectTrigger className="w-full font-medium p-1 border-0 ring-0">
+          <SelectTrigger className="w-full h-auto font-medium border-0 ring-0">
             <SelectValue placeholder="No workspace selected" />
           </SelectTrigger>
           <SelectContent>
             {Number(workspaces?.length ?? 0) > 0 ? (
               workspaces?.map((workspace) => (
                 <SelectItem key={workspace.id} value={workspace.slug}>
-                  <div className="flex justify-start items-center gap-3 font-medium">
+                  <div className="flex items-center justify-start gap-3 font-medium">
                     <WorkspaceIcon
                       name={workspace.slug}
                       image={workspace.icon ?? undefined}
@@ -60,7 +60,7 @@ const WorkspaceSwitcher = ({ className }: WorkspaceSwitcherProps) => {
                     />
                     <div className="flex flex-col items-start">
                       <span className="truncate">{workspace.name}</span>
-                      <span className="truncate text-xs text-muted-foreground">
+                      <span className="text-xs truncate text-muted-foreground">
                         Free
                       </span>
                     </div>

apps/web/lib/cache/link.ts

@@ -0,0 +1,32 @@
+import { RequiredLinkProp } from "../types";
+import { redis } from "./redis";
+
+const getCacheKey = (key: string, domain: string) => `link:${domain}:${key}`;
+
+export const getLinkViaRedis = async (key: string, domain: string) => {
+  const cacheKey = getCacheKey(key, domain);
+  const cached = await redis.get(cacheKey);
+  return cached as RequiredLinkProp | null;
+};
+
+export const setLinkToRedis = async (
+  key: string,
+  domain: string,
+  link: RequiredLinkProp,
+  expireInDay: number = 1
+) => {
+  const cacheKey = getCacheKey(key, domain);
+  await redis.set(cacheKey, link, {
+    ex:
+      process.env.NODE_ENV === "development" ? 60 : 60 * 60 * 24 * expireInDay, // expire in 1 day as default in production and 1 minute in development
+  });
+};
+
+export const deleteLinkFromRedis = async (key: string, domain: string) => {
+  const cacheKey = getCacheKey(key, domain);
+  await redis.del(cacheKey);
+};
+
+export const flushAllLinkCache = async () => {
+  await redis.flushall();
+};

apps/web/lib/redis.ts renamed to apps/web/lib/cache/redis.ts

@@ -1,10 +1,10 @@
 import { NextRequest, NextResponse, after } from "next/server";
 
 import { recordClickEvent } from "../analytics/click-events";
+import { getLinkViaRedis, setLinkToRedis } from "../cache/link";
 import { RequiredLinkProp } from "../types";
 import { getLinkViaEdgeWithKey, parse } from "./utils";
 import { getFinalUrl } from "./utils/final-url";
-import { getLinkViaRedis, setLinkToRedis } from "./utils/link-utlis";
 
 const LinkMiddleware = async (req: NextRequest) => {
   const { fullKey: originalKey, domain } = parse(req);

apps/web/lib/middleware/link.ts

@@ -1,8 +1,5 @@
 import { NextRequest } from "next/server";
 
-import { redis } from "~/lib/redis";
-import { RequiredLinkProp } from "~/lib/types";
-
 export const detectBot = (req: NextRequest) => {
   const searchParams = new URL(req.url).searchParams;
   if (searchParams.get("bot")) return true;
@@ -30,22 +27,3 @@ export const detectQR = (req: NextRequest) => {
   const searchParams = req.nextUrl.searchParams;
   return searchParams.get("qr") === "1";
 };
-
-export const getLinkViaRedis = async (key: string, domain: string) => {
-  const cacheKey = `link:${domain}:${key}`;
-  const cached = await redis.get(cacheKey);
-  return cached as RequiredLinkProp | null;
-};
-
-export const setLinkToRedis = async (
-  key: string,
-  domain: string,
-  link: RequiredLinkProp,
-  expireInDay: number = 1
-) => {
-  const cacheKey = `link:${domain}:${key}`;
-  await redis.set(cacheKey, link, {
-    ex:
-      process.env.NODE_ENV === "development" ? 60 : 60 * 60 * 24 * expireInDay, // expire in 1 day as default in production and 1 minute in development
-  });
-};