araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring

Browse source
This commit is contained in:
araemer 2025-10-21 09:08:08 +02:00
parent 34bbaa9df4
commit 9b53f6e676
11 changed files with 501 additions and 515 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/App.css
View file

@ -21,15 +21,15 @@
}
.content-title {
@apply text-3xl font-black mb-8 text-blue-900;
@apply text-3xl font-black pb-6 text-blue-900;
}
.section-heading {
@apply text-xl font-bold mb-2;
@apply text-xl font-bold pb-2 pt-4;
}
.subsection-heading {
@apply font-semibold mb-2 mt-4;
@apply font-semibold pb-2 pt-4;
}
/* icons */
@ -50,7 +50,7 @@
/* buttons */
.basic-button {
@apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap;
@apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed;
}
.default-button-bg {
@ -105,7 +105,7 @@
}
.ingredient-group-card {
@apply py-4 border-b border-gray-400;
@apply pb-4 border-b border-gray-400;
}
.circular-container {

9
frontend/src/components/basics/Button.tsx
View file

@ -1,8 +1,9 @@
import { defaultIconSize } from "./SvgIcon";
import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
import {defaultIconSize} from "./SvgIcon";
import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
type ButtonProps = BasicButtonProps & {
onClick: () => void;
disabled?: boolean;
};
/**
@ -14,12 +15,14 @@ export default function Button({
text,
buttonType = ButtonType.DefaultButton,
className = "",
disabled = false,
...props
}: ButtonProps) {
}: ButtonProps) {
return (
<button
className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
onClick={onClick}
disabled={disabled}
{...props}
>
<div className="flex items-center gap-2">

8
frontend/src/components/basics/NumberedListItem.tsx
View file

@ -1,6 +1,6 @@
type NumberedListItemProps = {
/** Number to be displayed in front of text */
elementNumber: number;
/** Index of the element. Index + 1 is displayed in circle */
index: number;
/** List item text */
text: string;
}
@ -10,11 +10,11 @@ type NumberedListItemProps = {
* @param elementNumber Number to be displayed
* @param text Text to be displayed
*/
export function NumberedListItem({elementNumber, text}: NumberedListItemProps) {
export function NumberedListItem({index, text}: NumberedListItemProps) {
return <li className="flex items-start gap-4">
{/* Step number circle */}
<div className="circular-container">
{elementNumber}
{index + 1}
</div>
{/* Step text */}

53
frontend/src/components/recipes/IngredientGroupListEditor.tsx
View file

@ -2,22 +2,22 @@
* Editor for ingredient groups
*/
import type { IngredientModel } from "../../models/IngredientModel"
import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
import type {IngredientModel} from "../../models/IngredientModel"
import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
import Button from "../basics/Button"
import { IngredientListEditor } from "./IngredientListEditor"
import { Plus } from "lucide-react"
import { ButtonType } from "../basics/BasicButtonDefinitions"
import {IngredientListEditor} from "./IngredientListEditor"
import {Plus} from "lucide-react"
import {ButtonType} from "../basics/BasicButtonDefinitions"
type IngredientGroupListEditorProps = {
ingredientGroupList: IngredientGroupModel[]
onChange: (ingredientGroupList: IngredientGroupModel[]) => void
}
export function IngredientGroupListEditor({ ingredientGroupList, onChange }: IngredientGroupListEditorProps) {
const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string|IngredientModel[] ) => {
export function IngredientGroupListEditor({ingredientGroupList, onChange}: IngredientGroupListEditorProps) {
const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string | IngredientModel[]) => {
const updated = ingredientGroupList.map((ingGrp, i) =>
i === index ? { ...ingGrp, [field]: value} : ingGrp
i === index ? {...ingGrp, [field]: value} : ingGrp
)
onChange(updated)
}
@ -26,7 +26,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
}
const handleAdd = () => {
onChange([...ingredientGroupList, { title: "", ingredientList: [] }])
onChange([...ingredientGroupList, {title: "", ingredientList: []}])
}
const handleRemove = (index: number) => {
@ -34,53 +34,36 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
}
return (
<div>
{/* remove bottom margin from this headings the group card has a top padding */}
<h3 className="subsection-heading" >Ingredient Groups</h3>
<h2 className="section-heading">Zutaten</h2>
<div>
{ingredientGroupList.map((ingGrp, index) => (
<div key={index} className="ingredient-group-card mb-4">
<div className="horizontal-input-group columns-2">
<input
className="input-field"
placeholder="Group title (Optional)"
value = {ingGrp.title}
onChange={ e => handleUpdate(index, "title", e.target.value)}
placeholder="Titel (Optional)"
value={ingGrp.title}
onChange={e => handleUpdate(index, "title", e.target.value)}
/>
<Button
onClick={() => handleRemove(index)}
text={"Remove Group"}
text={"Gruppe entfernen"}
buttonType={ButtonType.DarkButton}
/>
</div>
<IngredientListEditor
ingredients={ingGrp.ingredientList}
onChange={list => updateIngredientList(index,list)}
onChange={list => updateIngredientList(index, list)}
/>
</div>
))}
</div>
<Button
onClick={handleAdd}
icon={Plus}
text={"Add Ingredient Group"}
text={"Gruppe hinzufügen"}
buttonType={ButtonType.PrimaryButton}
/>
</div>
)
}
/*
<button
type="button"
className="primary-button mt-4"
onClick={handleAdd}
>
<div
className="flex col-2 gap-2 -ml-1"
>
<SvgIcon
icon={Icon.Plus}
color={"text-gray-600"}
/>
Add Ingredient Group
</div>
</button>*/

19
frontend/src/components/recipes/IngredientListEditor.tsx
View file

@ -1,7 +1,7 @@
import { Plus, X } from "lucide-react"
import type { IngredientModel } from "../../models/IngredientModel"
import {Plus, X} from "lucide-react"
import type {IngredientModel} from "../../models/IngredientModel"
import Button from "../basics/Button"
import { ButtonType } from "../basics/BasicButtonDefinitions"
import {ButtonType} from "../basics/BasicButtonDefinitions"
/**
* Editor for handling the ingredient list
@ -12,16 +12,16 @@ type IngredientListEditorProps = {
onChange: (ingredients: IngredientModel[]) => void
}
export function IngredientListEditor({ ingredients, onChange }: IngredientListEditorProps) {
export function IngredientListEditor({ingredients, onChange}: IngredientListEditorProps) {
const handleUpdate = (index: number, field: keyof IngredientModel, value: string | number) => {
const updated = ingredients.map((ing, i) =>
i === index ? { ...ing, [field]: field === "amount" ? Number(value) : value } : ing
i === index ? {...ing, [field]: field === "amount" ? Number(value) : value} : ing
)
onChange(updated)
}
const handleAdd = () => {
onChange([...ingredients, { name: "", amount: 0, unit: "" }])
onChange([...ingredients, {name: "", amount: 0, unit: ""}])
}
const handleRemove = (index: number) => {
@ -30,19 +30,18 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
return (
<div>
<h3 className="subsection-heading">Ingredients</h3>
{ingredients.map((ing, index) => (
<div key={index} className="horizontal-input-group">
<input
type="number"
className="input-field"
placeholder="Amount"
placeholder="Menge"
value={ing.amount}
onChange={e => handleUpdate(index, "amount", e.target.value)}
/>
<input
className="input-field w-20"
placeholder="Unit"
placeholder="Einheit"
value={ing.unit ?? ""}
onChange={e => handleUpdate(index, "unit", e.target.value)}
/>
@ -62,7 +61,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
<Button
onClick={handleAdd}
icon={Plus}
text={"Add Ingredient"}
text={"Zutat hinzufügen"}
buttonType={ButtonType.PrimaryButton}
/>
</div>

34
frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx
View file

@ -2,24 +2,14 @@
* Desktop editor using drag-and-drop via @dnd-kit
*/
import {
DndContext,
closestCenter,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import type { InstructionStepModel } from "../../models/InstructionStepModel";
import { InstructionStepDesktopListItem } from "./InstructionStepDesktopListItem";
import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
import {closestCenter, DndContext, PointerSensor, useSensor, useSensors,} from "@dnd-kit/core";
import {arrayMove, SortableContext, verticalListSortingStrategy,} from "@dnd-kit/sortable";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import {InstructionStepDesktopListItem} from "./InstructionStepDesktopListItem";
import Button from "../basics/Button";
import { Plus } from "lucide-react";
import { ButtonType } from "../basics/BasicButtonDefinitions";
import {Plus} from "lucide-react";
import {ButtonType} from "../basics/BasicButtonDefinitions";
import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListDesktopEditorProps = {
instructionStepList: InstructionStepModel[];
@ -29,16 +19,16 @@ type InstructionStepListDesktopEditorProps = {
export function InstructionStepListDesktopEditor({
instructionStepList,
onChange,
}: InstructionStepListDesktopEditorProps) {
const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
}: InstructionStepListDesktopEditorProps) {
const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
instructionStepList,
onChange
);
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 8}}));
const handleDragEnd = (event: any) => {
const { active, over } = event;
const {active, over} = event;
if (active.id !== over.id) {
/* find element by internal id
* Caution! Due to new elements not having a real ID yet, each list item has an internal ID
@ -55,7 +45,7 @@ export function InstructionStepListDesktopEditor({
return (
<div>
<h3 className="subsection-heading mb-3">Zubereitung</h3>
<h2 className="section-heading mb-2">Zubereitung</h2>
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext
items={instructionStepList.map((i) => i.internalId)}

49
frontend/src/components/recipes/InstructionStepListEditor.tsx
View file

@ -6,10 +6,10 @@
* - Common functionality for adding, removing, and updating steps is centralized.
*/
import { useState, useEffect } from "react";
import type { InstructionStepModel } from "../../models/InstructionStepModel";
import { InstructionStepListDesktopEditor } from "./InstructionStepListDesktopEditor";
import { InstructionStepListMobileEditor } from "./InstructionStepListMobileEditor";
import {useEffect, useState} from "react";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";
/**
* Props for the hybrid InstructionStepListEditor
@ -25,7 +25,7 @@ type InstructionStepListEditorProps = {
export function InstructionStepListEditor({
instructionStepList,
onChange,
}: InstructionStepListEditorProps) {
}: InstructionStepListEditorProps) {
const [isTouch, setIsTouch] = useState(false);
useEffect(() => {
@ -45,42 +45,3 @@ export function InstructionStepListEditor({
);
}
/**
* ======= Shared hook for common logic =======
*
* Provides add/remove/update functionality used by both mobile and desktop editors.
*/
export function instructionStepListEditorMethods(
instructionStepList: InstructionStepModel[],
onChange: (steps: InstructionStepModel[]) => void
) {
/**
* Update the text of a specific step
*/
const handleUpdate = (index: number, value: string) => {
const updated = instructionStepList.map((step, i) =>
i === index ? { ...step, text: value } : step
);
onChange(updated);
};
/**
* Add a new step at the end
*/
const handleAdd = () => {
onChange([...instructionStepList,
{
text: "",
internalId: crypto.randomUUID() // add internalId required for drag & drop
}]);
};
/**
* Remove a step by index
*/
const handleRemove = (index: number) => {
onChange(instructionStepList.filter((_, i) => i !== index));
};
return { handleUpdate, handleAdd, handleRemove };
}

41
frontend/src/components/recipes/InstructionStepListEditorMethods.ts Normal file
View file

@ -0,0 +1,41 @@
import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
/**
* ======= Shared hook for common logic =======
*
* Provides add/remove/update functionality used by both mobile and desktop editors.
*/
export function instructionStepListEditorMethods(
instructionStepList: InstructionStepModel[],
onChange: (steps: InstructionStepModel[]) => void
) {
/**
* Update the text of a specific step
*/
const handleUpdate = (index: number, value: string) => {
const updated = instructionStepList.map((step, i) =>
i === index ? {...step, text: value} : step
);
onChange(updated);
};
/**
* Add a new step at the end
*/
const handleAdd = () => {
onChange([...instructionStepList,
{
text: "",
internalId: crypto.randomUUID() // add internalId required for drag & drop
}]);
};
/**
* Remove a step by index
*/
const handleRemove = (index: number) => {
onChange(instructionStepList.filter((_, i) => i !== index));
};
return {handleUpdate, handleAdd, handleRemove};
}

21
frontend/src/components/recipes/InstructionStepListMobileEditor.tsx
View file

@ -2,11 +2,11 @@
* Mobile editor using Up/Down buttons for reordering
*/
import { ArrowDown, ArrowUp, Plus, X } from "lucide-react";
import type { InstructionStepModel } from "../../models/InstructionStepModel";
import {ArrowDown, ArrowUp, Plus, X} from "lucide-react";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import Button from "../basics/Button";
import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
import { ButtonType } from "../basics/BasicButtonDefinitions";
import {ButtonType} from "../basics/BasicButtonDefinitions";
import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListEditorMobileProps = {
instructionStepList: InstructionStepModel[];
@ -16,8 +16,8 @@ type InstructionStepListEditorMobileProps = {
export function InstructionStepListMobileEditor({
instructionStepList,
onChange,
}: InstructionStepListEditorMobileProps) {
const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
}: InstructionStepListEditorMobileProps) {
const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
instructionStepList,
onChange
);
@ -32,6 +32,8 @@ export function InstructionStepListMobileEditor({
};
return (
<div>
<h2 className="section-heading mb-2">Zubereitung</h2>
<div className="flex flex-col gap-3">
{instructionStepList.map((step, index) => (
<div
@ -39,7 +41,7 @@ export function InstructionStepListMobileEditor({
className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
>
<div className="flex flex-col items-center pt-1">
<div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-sm font-semibold text-gray-800">
<div className="circular-container">
{index + 1}
</div>
<div className="flex flex-col mt-2">
@ -47,17 +49,19 @@ export function InstructionStepListMobileEditor({
icon={ArrowUp}
onClick={() => moveStep(index, "up")}
buttonType={ButtonType.TransparentButton}
disabled={index === 0} // disable if first item
/>
<Button
icon={ArrowDown}
onClick={() => moveStep(index, "down")}
buttonType={ButtonType.TransparentButton}
disabled={index === instructionStepList.length - 1} // disable if last item
/>
</div>
</div>
<textarea
className="input-field w-full min-h-[60px] resize-none overflow-hidden"
className="input-field w-full min-h-[120px] resize-none overflow-hidden"
placeholder={`Schritt ${index + 1}`}
value={step.text}
onChange={(e) => handleUpdate(index, e.target.value)}
@ -83,5 +87,6 @@ export function InstructionStepListMobileEditor({
className="mt-4"
/>
</div>
</div>
);
}

4
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -80,7 +80,7 @@ export default function RecipeDetailPage() {
<div className="content-container">
{/* Header - remains in position when scrolling */}
<div className="sticky-header">
<h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1>
<h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
</div>
{/* Content */}
@ -132,7 +132,7 @@ export default function RecipeDetailPage() {
{/* Instructions - @todo add reasonable list delegate component*/}
<ol className="space-y-4">
{recipe.instructionStepList.map((step, j) => (
<NumberedListItem key={j} elementNumber={j + 1} text={step.text}/>
<NumberedListItem key={j} index={j} text={step.text}/>
))}
</ol>

54
frontend/src/components/recipes/RecipeEditor.tsx
View file

@ -1,11 +1,11 @@
import { useState } from "react"
import type { RecipeModel } from "../../models/RecipeModel"
import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
import {useState} from "react"
import type {RecipeModel} from "../../models/RecipeModel"
import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
import {IngredientGroupListEditor} from "./IngredientGroupListEditor"
import Button from "../basics/Button"
import { InstructionStepListEditor } from "./InstructionStepListEditor"
import type { InstructionStepModel } from "../../models/InstructionStepModel"
import { ButtonType } from "../basics/BasicButtonDefinitions"
import {InstructionStepListEditor} from "./InstructionStepListEditor"
import type {InstructionStepModel} from "../../models/InstructionStepModel"
import {ButtonType} from "../basics/BasicButtonDefinitions"
type RecipeEditorProps = {
recipe: RecipeModel
@ -18,7 +18,7 @@ type RecipeEditorProps = {
* ingredients (with amount, unit, name), instructions, and image URL.
* @todo adapt to ingredientGroups!
*/
export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorProps) {
export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
/** draft of the new recipe */
const [draft, setDraft] = useState<RecipeModel>(recipe)
/** Error list */
@ -29,7 +29,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
* @param ingredientGroupList updated ingredient groups and ingredients
*/
const updateIngredientGroupList = (ingredientGroupList: IngredientGroupModel[]) => {
setDraft({ ...draft, ingredientGroupList })
setDraft({...draft, ingredientGroupList})
}
/**
@ -37,7 +37,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
* @param instructionStepList updated instructions
*/
const updateInstructionList = (instructionStepList: InstructionStepModel[]) => {
setDraft({ ...draft, instructionStepList })
setDraft({...draft, instructionStepList})
}
/**
@ -60,12 +60,12 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) {
newErrors.ingredients = true
} else {
let isAnyIngredientListEmpty = draft.ingredientGroupList.some(
const isAnyIngredientListEmpty = draft.ingredientGroupList.some(
ingGrp => {
return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0
}
)
if(isAnyIngredientListEmpty){
if (isAnyIngredientListEmpty) {
newErrors.ingredients = true
}
}
@ -84,23 +84,26 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
// @todo add handling of images
return (
<div className="p-4 gap-10">
<h2 className="content-title">
{recipe.id ? "Edit Recipe" : "New Recipe"}
</h2>
/*Container spanning entire screen used to center content horizontally */
<div className="app-bg">
{/* Container defining the maximum width of the content */}
<div className="content-container">
<h1 className="content-title border-b-2 border-gray-300">
{recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
</h1>
{/* Title */}
<h3 className="subsection-heading">Title</h3>
<h2 className="section-heading">Titel</h2>
<input
className={`input-field ${errors.title ? "error-text" : ""}`}
placeholder="Title"
placeholder="Titel"
value={draft.title}
onChange={e => setDraft({ ...draft, title: e.target.value })}
onChange={e => setDraft({...draft, title: e.target.value})}
/>
{/* Servings */}
<h3 className="subsection-heading">Servings</h3>
<h2 className="section-heading">Portionen</h2>
<div className="columns-3 gap-2 flex items-center">
<label>For</label>
<label>Für</label>
<input
type="number"
className="input-field w-20"
@ -114,7 +117,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
/>
<input
className="input-field"
placeholder="Persons"
placeholder="Personen"
value={draft.servings.unit}
onChange={e => {
const tempServings = draft.servings
@ -131,7 +134,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
/>
</div>
{/* Instruction List*/ }
{/* Instruction List*/}
<InstructionStepListEditor
instructionStepList={draft.instructionStepList}
onChange={updateInstructionList}
@ -142,14 +145,15 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
{/* Save Button */}
<Button
onClick={() => handleSave(draft)}
text={"Save"}
text={"Speichern"}
buttonType={ButtonType.PrimaryButton}
/>
<Button
onClick={() => onCancel()}
text={"Cancel"}
text={"Abbrechen"}
/>
</div>
</div>
</div>
)
}