feat: merge Explore and Activity Feed, unify recipe cards
Explore and Feed covered overlapping ground (recommendations, following, trending) in two separate places with three different card designs. Explore now hosts Discover/Following/For You tabs, and every recipe card everywhere on the page matches the Recipes page's cover-photo card instead of the old text-only search result. v0.36.0
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { headers } from "next/headers";
|
||||
import {
|
||||
db,
|
||||
recipes,
|
||||
users,
|
||||
favorites,
|
||||
userFollows,
|
||||
eq,
|
||||
desc,
|
||||
sql,
|
||||
@@ -11,20 +13,29 @@ import {
|
||||
gte,
|
||||
count,
|
||||
} from "@epicure/db";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import { ExplorePageContent } from "@/components/search/explore-page-content";
|
||||
import { getAvgRatingsByRecipeId } from "@/lib/recipe-ratings";
|
||||
import { attachCardExtras } from "@/lib/recipe-card-extras";
|
||||
|
||||
export const metadata: Metadata = {};
|
||||
|
||||
export type RecipeResult = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
authorName: string | null;
|
||||
difficulty: string | null;
|
||||
difficulty: "easy" | "medium" | "hard" | null;
|
||||
baseServings: number;
|
||||
prepMins: number | null;
|
||||
cookMins: number | null;
|
||||
avgRating: number | null;
|
||||
ratingCount: number;
|
||||
visibility: "private" | "unlisted" | "public";
|
||||
tags: string[];
|
||||
isBatchCook: boolean;
|
||||
sourceUrl: string | null;
|
||||
recipeType: "dish" | "drink";
|
||||
photos: { storageKey: string; isCover: boolean }[];
|
||||
dishCount: number;
|
||||
isFavorited: boolean;
|
||||
};
|
||||
|
||||
export default async function ExplorePage({
|
||||
@@ -33,19 +44,28 @@ export default async function ExplorePage({
|
||||
searchParams: Promise<{ q?: string }>;
|
||||
}) {
|
||||
const { q } = await searchParams;
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
const columns = {
|
||||
id: recipes.id,
|
||||
title: recipes.title,
|
||||
description: recipes.description,
|
||||
authorName: users.name,
|
||||
difficulty: recipes.difficulty,
|
||||
baseServings: recipes.baseServings,
|
||||
prepMins: recipes.prepMins,
|
||||
cookMins: recipes.cookMins,
|
||||
visibility: recipes.visibility,
|
||||
tags: recipes.tags,
|
||||
isBatchCook: recipes.isBatchCook,
|
||||
sourceUrl: recipes.sourceUrl,
|
||||
recipeType: recipes.recipeType,
|
||||
};
|
||||
|
||||
// Trending: public recipes ordered by favorite count in last 7 days
|
||||
const trendingRows = await db
|
||||
.select({
|
||||
id: recipes.id,
|
||||
title: recipes.title,
|
||||
authorName: users.name,
|
||||
difficulty: recipes.difficulty,
|
||||
prepMins: recipes.prepMins,
|
||||
cookMins: recipes.cookMins,
|
||||
favoriteCount: count(favorites.recipeId),
|
||||
})
|
||||
.select({ ...columns, favoriteCount: count(favorites.recipeId) })
|
||||
.from(recipes)
|
||||
.innerJoin(users, eq(recipes.authorId, users.id))
|
||||
.leftJoin(
|
||||
@@ -62,31 +82,17 @@ export default async function ExplorePage({
|
||||
|
||||
// Recent: public recipes ordered by createdAt desc
|
||||
const recentRows = await db
|
||||
.select({
|
||||
id: recipes.id,
|
||||
title: recipes.title,
|
||||
authorName: users.name,
|
||||
difficulty: recipes.difficulty,
|
||||
prepMins: recipes.prepMins,
|
||||
cookMins: recipes.cookMins,
|
||||
})
|
||||
.select(columns)
|
||||
.from(recipes)
|
||||
.innerJoin(users, eq(recipes.authorId, users.id))
|
||||
.where(and(eq(recipes.visibility, "public"), eq(users.isPrivate, false)))
|
||||
.orderBy(desc(recipes.createdAt))
|
||||
.limit(12);
|
||||
|
||||
const ratingByRecipe = await getAvgRatingsByRecipeId([
|
||||
...trendingRows.map((r) => r.id),
|
||||
...recentRows.map((r) => r.id),
|
||||
const [trending, recent] = await Promise.all([
|
||||
attachCardExtras(trendingRows.map(({ favoriteCount: _fc, ...r }) => r), session?.user.id),
|
||||
attachCardExtras(recentRows, session?.user.id),
|
||||
]);
|
||||
const withRating = (r: { id: string }) => ({
|
||||
avgRating: ratingByRecipe.get(r.id)?.avgRating ?? null,
|
||||
ratingCount: ratingByRecipe.get(r.id)?.ratingCount ?? 0,
|
||||
});
|
||||
|
||||
const trending: RecipeResult[] = trendingRows.map(({ favoriteCount: _fc, ...r }) => ({ ...r, ...withRating(r) }));
|
||||
const recent: RecipeResult[] = recentRows.map((r) => ({ ...r, ...withRating(r) }));
|
||||
|
||||
// Most-used tags across public recipes — shown as filter chips on the
|
||||
// search bar so browsing by tag doesn't require typing the exact word.
|
||||
@@ -102,12 +108,22 @@ export default async function ExplorePage({
|
||||
`);
|
||||
const popularTags = popularTagsResult.map((r) => r.tag);
|
||||
|
||||
const followedCount = session
|
||||
? (
|
||||
await db
|
||||
.select({ followingId: userFollows.followingId })
|
||||
.from(userFollows)
|
||||
.where(eq(userFollows.followerId, session.user.id))
|
||||
).length
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<ExplorePageContent
|
||||
trending={trending}
|
||||
recent={recent}
|
||||
initialQuery={q ?? ""}
|
||||
popularTags={popularTags}
|
||||
followedCount={followedCount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user