diff --git a/apps/web/src/app/(app)/(dashboard)/layout.tsx b/apps/web/src/app/(app)/(dashboard)/layout.tsx
index feed3f2..2c19d53 100644
--- a/apps/web/src/app/(app)/(dashboard)/layout.tsx
+++ b/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",
diff --git a/apps/web/src/app/(app)/(dashboard)/liked/page.tsx b/apps/web/src/app/(app)/(dashboard)/liked/page.tsx
index 7e8db36..d3048fe 100644
--- a/apps/web/src/app/(app)/(dashboard)/liked/page.tsx
+++ b/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 (
-
Account
+
Liked themes
- Manage your account settings and preferences
+ Here you can find all the themes you liked
+
);
}
diff --git a/apps/web/src/app/(app)/(dashboard)/my-themes/page.tsx b/apps/web/src/app/(app)/(dashboard)/my-themes/page.tsx
index e3e6b27..dc6bd9f 100644
--- a/apps/web/src/app/(app)/(dashboard)/my-themes/page.tsx
+++ b/apps/web/src/app/(app)/(dashboard)/my-themes/page.tsx
@@ -1,10 +1,10 @@
-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 (
@@ -12,7 +12,11 @@ export default async function Page() {
Here you can find all the themes you created
-
+
);
}
diff --git a/apps/web/src/app/(app)/themes/page.tsx b/apps/web/src/app/(app)/themes/page.tsx
index b56e3de..4db7929 100644
--- a/apps/web/src/app/(app)/themes/page.tsx
+++ b/apps/web/src/app/(app)/themes/page.tsx
@@ -1,8 +1,9 @@
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 (
@@ -10,7 +11,7 @@ export default async function ThemesPage() {
Get inspired by thousands of themes and easily export for your popular ui library.
-
+
);
}
diff --git a/apps/web/src/modules/themes/components/theme-card.tsx b/apps/web/src/modules/themes/components/theme-card.tsx
index 6f3324f..8bc21b1 100644
--- a/apps/web/src/modules/themes/components/theme-card.tsx
+++ b/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();
}
});
};
diff --git a/apps/web/src/modules/themes/components/themes-list.tsx b/apps/web/src/modules/themes/components/themes-list.tsx
index c50e51b..a50873d 100644
--- a/apps/web/src/modules/themes/components/themes-list.tsx
+++ b/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}
/>
);
})}
diff --git a/apps/web/src/modules/themes/services.ts b/apps/web/src/modules/themes/services.ts
index a7ffa5d..71120e3 100644
--- a/apps/web/src/modules/themes/services.ts
+++ b/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();