dvirlabs/my-recipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the slider

Browse Source
This commit is contained in:
dvirlabs 2025-12-05 10:38:04 +02:00
parent 9b302c86e5
commit 984e10682b
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.jsx
View File

@ -77,9 +77,12 @@ function App() {
} }
// Filter by prep time // Filter by prep time
if (filterMaxTime && recipe.time_minutes > parseInt(filterMaxTime)) { if (filterMaxTime) {
const maxTime = parseInt(filterMaxTime, 10);
if (recipe.time_minutes > maxTime) {
return false; return false;
} }
}
// Filter by tags // Filter by tags
if (filterTags.length > 0) { if (filterTags.length > 0) {
@ -207,6 +210,7 @@ function App() {
<main className="layout"> <main className="layout">
<section className="sidebar"> <section className="sidebar">
<RecipeSearchList <RecipeSearchList
allRecipes={recipes}
recipes={getFilteredRecipes()} recipes={getFilteredRecipes()}
selectedId={selectedRecipe?.id} selectedId={selectedRecipe?.id}
onSelect={setSelectedRecipe} onSelect={setSelectedRecipe}

26
frontend/src/components/RecipeSearchList.jsx
View File

@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
function RecipeSearchList({ function RecipeSearchList({
allRecipes,
recipes, recipes,
selectedId, selectedId,
onSelect, onSelect,
@ -15,16 +16,17 @@ function RecipeSearchList({
}) { }) {
const [expandFilters, setExpandFilters] = useState(false); const [expandFilters, setExpandFilters] = useState(false);
// Extract unique tags from all recipes // Extract unique tags from ALL recipes (not filtered)
const allTags = Array.from( const allTags = Array.from(
new Set(recipes.flatMap((recipe) => recipe.tags || [])) new Set(allRecipes.flatMap((recipe) => recipe.tags || []))
).sort(); ).sort();
// Extract unique meal types from recipes // Extract unique meal types from ALL recipes (not filtered)
const mealTypes = Array.from(new Set(recipes.map((r) => r.meal_type))).sort(); const mealTypes = Array.from(new Set(allRecipes.map((r) => r.meal_type))).sort();
// Extract max time for slider // Extract max time for slider from ALL recipes (not filtered) - add 10 to make it comfortable to select max time recipes
const maxTimeInRecipes = Math.max(...recipes.map((r) => r.time_minutes), 0); const maxTimeInRecipes = Math.max(...allRecipes.map((r) => r.time_minutes), 0);
const sliderMax = maxTimeInRecipes > 0 ? maxTimeInRecipes + 10 : 70;
const handleTagToggle = (tag) => { const handleTagToggle = (tag) => {
if (filterTags.includes(tag)) { if (filterTags.includes(tag)) {
@ -109,20 +111,24 @@ function RecipeSearchList({
{maxTimeInRecipes > 0 && ( {maxTimeInRecipes > 0 && (
<div className="filter-group"> <div className="filter-group">
<label className="filter-label"> <label className="filter-label">
זמן הכנה {filterMaxTime ? `עד ${filterMaxTime} דקות` : ""} זמן הכנה {filterMaxTime ? `עד ${filterMaxTime} דקות` : "הכל"}
</label> </label>
<div className="time-filter-wrapper"> <div className="time-filter-wrapper">
<input <input
type="range" type="range"
min="0" min="0"
max={maxTimeInRecipes} max={sliderMax}
step="1"
value={filterMaxTime || 0} value={filterMaxTime || 0}
onChange={(e) => onMaxTimeChange(e.target.value === "0" ? "" : e.target.value)} onChange={(e) => {
const val = parseInt(e.target.value, 10);
onMaxTimeChange(val === 0 ? "" : String(val));
}}
className="time-slider" className="time-slider"
/> />
<div className="time-labels"> <div className="time-labels">
<span>0</span> <span>0</span>
<span>{maxTimeInRecipes}</span> <span>{sliderMax}</span>
</div> </div>
</div> </div>
</div> </div>