* Extended functionalities
* Added different UIs
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { CheckSquare, Square, UtensilsCrossed } from "lucide-react";
|
||||
import { useRecipes } from "@/hooks/useRecipes";
|
||||
import { useDebouncedValue } from "@/hooks/useDebouncedValue";
|
||||
import { RecipeCard } from "@/components/recipes/RecipeCard";
|
||||
import { RecipeFilters, type CategoryFilter } from "@/components/recipes/RecipeFilters";
|
||||
import { PdfGenerator } from "@/components/pdf/PdfGenerator";
|
||||
@@ -8,22 +10,63 @@ import { GridSkeleton } from "@/components/ui/Skeleton";
|
||||
import { EmptyState } from "@/components/ui/EmptyState";
|
||||
import { ErrorState } from "@/components/ui/ErrorState";
|
||||
import { extractApiError } from "@/api/axiosInstance";
|
||||
import { nextSort, sortBy, sortIndicator, type SortDirection } from "@/utils/sort.util";
|
||||
|
||||
type RecipeSortColumn = "name" | "calories" | "prepTime";
|
||||
|
||||
const RECIPE_SORT_COLUMNS: { id: RecipeSortColumn; labelKey: string }[] = [
|
||||
{ id: "name", labelKey: "manage.recipeName" },
|
||||
{ id: "calories", labelKey: "recipes.calories" },
|
||||
{ id: "prepTime", labelKey: "manage.prepTimeMin" },
|
||||
];
|
||||
|
||||
export function AllMealsPage() {
|
||||
const { data: recipes, isLoading, isError, error, refetch } = useRecipes();
|
||||
const { t } = useTranslation();
|
||||
const [filter, setFilter] = useState<CategoryFilter>("all");
|
||||
const [search, setSearch] = useState("");
|
||||
const [searchByIngredient, setSearchByIngredient] = useState(false);
|
||||
const [selected, setSelected] = useState<Set<number>>(new Set());
|
||||
const [recipeSort, setRecipeSort] = useState<{ column: RecipeSortColumn; direction: SortDirection }>({
|
||||
column: "name",
|
||||
direction: "asc",
|
||||
});
|
||||
|
||||
const debouncedSearch = useDebouncedValue(search.trim(), 350);
|
||||
const ingredientTerm = searchByIngredient && debouncedSearch ? debouncedSearch : undefined;
|
||||
|
||||
const { data: recipes, isLoading, isError, error, refetch } = useRecipes(
|
||||
undefined,
|
||||
undefined,
|
||||
ingredientTerm,
|
||||
);
|
||||
|
||||
const visible = useMemo(() => {
|
||||
if (!recipes) return [];
|
||||
const term = search.trim().toLowerCase();
|
||||
return recipes.filter((r) => {
|
||||
const matchesCategory = filter === "all" || r.mealCategory === filter;
|
||||
const matchesSearch = term === "" || r.name.toLowerCase().includes(term);
|
||||
const matchesSearch = searchByIngredient || term === "" || r.name.toLowerCase().includes(term);
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [recipes, filter, search]);
|
||||
}, [recipes, filter, search, searchByIngredient]);
|
||||
|
||||
const sortedVisible = useMemo(() => {
|
||||
const { column, direction } = recipeSort;
|
||||
return sortBy(visible, direction, (recipe) => {
|
||||
switch (column) {
|
||||
case "name":
|
||||
return recipe.name;
|
||||
case "calories":
|
||||
return recipe.calories;
|
||||
case "prepTime":
|
||||
return recipe.prepTimeMinutes;
|
||||
}
|
||||
});
|
||||
}, [visible, recipeSort]);
|
||||
|
||||
const toggleRecipeSort = (column: RecipeSortColumn) => {
|
||||
setRecipeSort((current) => nextSort(current, column));
|
||||
};
|
||||
|
||||
const toggleSelected = (id: number) => {
|
||||
setSelected((prev) => {
|
||||
@@ -53,17 +96,22 @@ export function AllMealsPage() {
|
||||
<div className="space-y-6">
|
||||
<header className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl">All Meals</h1>
|
||||
<p className="mt-1 text-slate-500 dark:text-slate-400">
|
||||
Select recipes and export them with a combined shopping list.
|
||||
</p>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl">{t("recipes.allMealsTitle")}</h1>
|
||||
<p className="mt-1 text-slate-500 dark:text-slate-400">{t("recipes.allMealsSubtitle")}</p>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-2 rounded-full bg-brand-100 px-3.5 py-1.5 text-sm font-semibold text-brand-800 dark:bg-brand-900/40 dark:text-brand-300">
|
||||
{selected.size} selected
|
||||
{t("common.selectedCount", { count: selected.size })}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<RecipeFilters active={filter} onChange={setFilter} search={search} onSearchChange={setSearch} />
|
||||
<RecipeFilters
|
||||
active={filter}
|
||||
onChange={setFilter}
|
||||
search={search}
|
||||
onSearchChange={setSearch}
|
||||
searchByIngredient={searchByIngredient}
|
||||
onSearchByIngredientChange={setSearchByIngredient}
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
@@ -73,7 +121,7 @@ export function AllMealsPage() {
|
||||
className="btn-secondary"
|
||||
>
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
Select all visible
|
||||
{t("recipes.selectAllVisible")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -82,7 +130,7 @@ export function AllMealsPage() {
|
||||
className="btn-secondary"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
Deselect all
|
||||
{t("recipes.deselectAll")}
|
||||
</button>
|
||||
<div className="ml-auto">
|
||||
<PdfGenerator selectedIds={selectedIds} />
|
||||
@@ -92,29 +140,50 @@ export function AllMealsPage() {
|
||||
{isLoading && <GridSkeleton count={9} />}
|
||||
|
||||
{isError && (
|
||||
<ErrorState message={extractApiError(error, "Failed to load recipes.")} onRetry={() => void refetch()} />
|
||||
<ErrorState
|
||||
message={extractApiError(error, t("errors.loadRecipesFailed"))}
|
||||
onRetry={() => void refetch()}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && visible.length === 0 && (
|
||||
<EmptyState
|
||||
icon={UtensilsCrossed}
|
||||
title="No matching recipes"
|
||||
description="Try adjusting your search or category filter."
|
||||
title={t("recipes.noMatchingTitle")}
|
||||
description={
|
||||
searchByIngredient ? t("recipes.noMatchingIngredient") : t("recipes.noMatchingFilter")
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && visible.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{visible.map((recipe) => (
|
||||
<RecipeCard
|
||||
key={recipe.id}
|
||||
recipe={recipe}
|
||||
selectable
|
||||
selected={selected.has(recipe.id)}
|
||||
onToggleSelected={toggleSelected}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<>
|
||||
<div className="flex flex-wrap gap-2 text-sm">
|
||||
{RECIPE_SORT_COLUMNS.map(({ id, labelKey }) => (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => toggleRecipeSort(id)}
|
||||
className="rounded-lg border border-slate-200 px-3 py-1.5 font-medium hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800"
|
||||
>
|
||||
{t(labelKey)}
|
||||
{sortIndicator(recipeSort, id)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{sortedVisible.map((recipe) => (
|
||||
<RecipeCard
|
||||
key={recipe.id}
|
||||
recipe={recipe}
|
||||
selectable
|
||||
showCategory
|
||||
selected={selected.has(recipe.id)}
|
||||
onToggleSelected={toggleSelected}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user