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 {

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

@ -1,8 +1,9 @@
import {defaultIconSize} from "./SvgIcon";
import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
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) {
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 */}

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

@ -34,20 +34,20 @@ 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)"
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>
@ -57,30 +57,13 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
/>
</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>*/

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

@ -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>

18
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 {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 { instructionStepListEditorMethods } from "./InstructionStepListEditor";
import Button from "../basics/Button";
import {Plus} from "lucide-react";
import {ButtonType} from "../basics/BasicButtonDefinitions";
import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListDesktopEditorProps = {
instructionStepList: InstructionStepModel[];
@ -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)}

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

@ -6,7 +6,7 @@
* - Common functionality for adding, removing, and updating steps is centralized.
*/
import { useState, useEffect } from "react";
import {useEffect, useState} from "react";
import type {InstructionStepModel} from "../../models/InstructionStepModel";
import {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";
@ -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};
}

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

@ -5,8 +5,8 @@
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 {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListEditorMobileProps = {
instructionStepList: InstructionStepModel[];
@ -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>

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

@ -60,7 +60,7 @@ 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
}
@ -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})}
/>
{/* 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
@ -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>
)
}