feat: add likes count

apps/web/src/app/(app)/(dashboard)/layout.tsx

@@ -24,9 +24,9 @@ export default function DashboardLayout(props: DashboardLayoutProps) {
             disabled: false,
           },
           {
-            href: "/saved",
+            href: "/liked",
             label: "Likes",
-            disabled: true,
+            disabled: false,
           },
           {
             href: "/account",

apps/web/src/app/(app)/(dashboard)/liked/page.tsx

@@ -1,10 +1,17 @@
-export default function Page() {
+import { ThemesList } from "@/modules/themes/components/themes-list";
+import { getUserLikedThemes, getUserLikes } from "@/modules/themes/services";
+
+export default async function Page() {
+  const userLikedThemes = await getUserLikedThemes();
+  const userLikes = await getUserLikes();
+
   return (
     <div>
-      <h2 className="pl-2 text-2xl font-bold">Account</h2>
+      <h2 className="pl-2 text-2xl font-bold">Liked themes</h2>
       <p className="text-muted-foreground pl-2">
-        Manage your account settings and preferences
+        Here you can find all the themes you liked
       </p>
+      <ThemesList themes={userLikedThemes} userLikes={userLikes} />
     </div>
   );
 }

apps/web/src/app/(app)/(dashboard)/my-themes/page.tsx

@@ -1,18 +1,22 @@
-import { ThemeCard } from "@/modules/themes/components/theme-card";
 import { ThemesList } from "@/modules/themes/components/themes-list";
-import { getUserThemes } from "@/modules/themes/services";
+import { getUserLikes, getUserThemes } from "@/modules/themes/services";
 import { Features } from "@/modules/themes/types";
 
 export default async function Page() {
   const userThemes = await getUserThemes();
+  const userLikes = await getUserLikes();
 
   return (
     <div>
       <h2 className="pl-2 text-2xl font-bold">My themes</h2>
       <p className="text-muted-foreground pl-2">
         Here you can find all the themes you created
       </p>
-      <ThemesList themes={userThemes} features={[Features.Delete]} />
+      <ThemesList
+        themes={userThemes}
+        features={[Features.Delete]}
+        userLikes={userLikes}
+      />
     </div>
   );
 }

apps/web/src/app/(app)/themes/page.tsx

@@ -1,16 +1,17 @@
 import { ThemesList } from "@/modules/themes/components/themes-list";
-import { getTrendingThemes } from "@/modules/themes/services";
+import { getTrendingThemes, getUserLikes } from "@/modules/themes/services";
 
 export default async function ThemesPage() {
   const trendingThemes = await getTrendingThemes();
+  const userLikes = await getUserLikes();
 
   return (
     <div className="container pt-20">
       <h1 className="font-display text-center text-5xl font-medium">Trending themes</h1>
       <p className="text-muted-foreground mt-4 text-center">
         Get inspired by thousands of themes and easily export for your popular ui library.
       </p>
-      <ThemesList themes={trendingThemes} className="mt-8" />
+      <ThemesList themes={trendingThemes} userLikes={userLikes} className="mt-8" />
     </div>
   );
 }

apps/web/src/modules/themes/components/theme-card.tsx

@@ -3,6 +3,7 @@
 import React, { useTransition } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import Color from "color";
 import { useSession } from "next-auth/react";
 import {
@@ -48,8 +49,8 @@ interface ThemeCardProps {
   themeId: string;
   palette: Palette;
   view?: "website" | "placeholder" | "palette";
-  isLiked?: boolean;
-  likesCount?: number;
+  isLiked: boolean;
+  likesCount: number;
   features?: Features[];
 }
 
@@ -65,6 +66,7 @@ export const ThemeCard = (props: ThemeCardProps) => {
 
   const { background, primary, secondary, card } = palette;
 
+  const router = useRouter();
   const [pending, startTransition] = useTransition();
   const { toast } = useToast();
   const [liked, setLiked] = React.useState(isLiked);
@@ -85,6 +87,7 @@ export const ThemeCard = (props: ThemeCardProps) => {
         if (result?.error) {
           setLiked((prev) => !prev);
         }
+        router.refresh();
       }
     });
   };

apps/web/src/modules/themes/components/themes-list.tsx

@@ -7,12 +7,13 @@ import { ThemeCard } from "./theme-card";
 
 interface ThemesListProps {
   themes: any[];
+  userLikes: string[];
   className?: string;
   features?: Features[];
 }
 
 export const ThemesList = (props: ThemesListProps) => {
-  const { themes, features, className } = props;
+  const { themes, userLikes, features, className } = props;
   const [view, setView] = React.useState<"website" | "placeholder" | "palette">(
     "placeholder"
   );
@@ -75,6 +76,8 @@ export const ThemesList = (props: ThemesListProps) => {
                 border: palette.border,
               }}
               features={features}
+              isLiked={userLikes.includes(theme.id)}
+              likesCount={theme._count.likedBy}
             />
           );
         })}

apps/web/src/modules/themes/services.ts

@@ -40,6 +40,16 @@ export const getTrendingThemes = async () => {
           border: true,
         },
       },
+      _count: {
+        select: {
+          likedBy: true,
+        },
+      },
+    },
+    orderBy: {
+      likedBy: {
+        _count: "desc",
+      },
     },
   });
   return themes;
@@ -74,6 +84,11 @@ export const getUserThemes = async () => {
           border: true,
         },
       },
+      _count: {
+        select: {
+          likedBy: true,
+        },
+      },
     },
   });
   return themes;
@@ -85,8 +100,10 @@ export const getUserLikedThemes = async () => {
 
   const themes = await prisma.theme.findMany({
     where: {
-      user: {
-        id: session.user.id,
+      likedBy: {
+        some: {
+          id: session.user.id,
+        },
       },
     },
     select: {
@@ -108,11 +125,35 @@ export const getUserLikedThemes = async () => {
           border: true,
         },
       },
+      _count: {
+        select: {
+          likedBy: true,
+        },
+      },
     },
   });
   return themes;
 };
 
+export const getUserLikes = async () => {
+  const session = await getSession();
+  if (!session) return [];
+  const userWithLikes = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+    select: {
+      likes: {
+        select: {
+          id: true,
+        },
+      },
+    },
+  });
+  const likes = userWithLikes ? userWithLikes.likes.map((like) => like.id) : [];
+  return likes;
+};
+
 export const createTheme = async (data: any) => {
   const session = await getSession();