Add ability to edit recipe (#273)

danielkjellid · Jun 6, 2024 · 0f1d6b4 · 0f1d6b4
1 parent d029b7d
commit 0f1d6b4
Show file tree

Hide file tree

Showing 40 changed files with 1,506 additions and 897 deletions.
diff --git a/frontend/apps/recipe/components/Recipe/index.tsx b/frontend/apps/recipe/components/Recipe/index.tsx
@@ -97,7 +97,7 @@ function Recipe({ recipe }: RecipeProps) {
       <div className="lg:grid-cols-3 xl:grid-cols-5 grid grid-cols-1 gap-6 px-12">
         <div className="xl:row-span-2 order-1 col-span-1">
           <RecipeSection title="Ingredients">
-            {recipe.ingredientGroups.map((group) => (
+            {recipe.ingredientItemGroups.map((group) => (
               <RecipeIngredientGroup key={group.id} title={group.title}>
                 {group.ingredientItems.map((item) => (
                   <RecipeIngredientGroup.Item

diff --git a/frontend/apps/recipe/detail/index.tsx b/frontend/apps/recipe/detail/index.tsx
@@ -7,16 +7,18 @@ import View from '../../../components/View'
 import { useCommonContext } from '../../../contexts/CommonProvider'
 import { useFetch } from '../../../hooks/fetcher'
 import { type RecipeDetailRecordAPIResponse, RecipeStatus } from '../../../types'
+import { routes as recipesRoutes } from '../../recipes/routes'
 import { urls } from '../../urls'
 import { Recipe } from '../components/Recipe'
 
 interface RecipeDetailInnerProps {
+  recipeId: string
   results: {
     recipeResponse: RecipeDetailRecordAPIResponse
   }
 }
 
-function RecipeDetailInner({ results }: RecipeDetailInnerProps) {
+function RecipeDetailInner({ recipeId, results }: RecipeDetailInnerProps) {
   const navigate = useNavigate()
   const { currentUser } = useCommonContext()
   const { data: recipe } = results.recipeResponse
@@ -65,7 +67,9 @@ function RecipeDetailInner({ results }: RecipeDetailInnerProps) {
                 View in admin
               </MButton>
             )}
-            <Button onClick={() => navigate('/')}>Edit recipe</Button>
+            <a href={recipesRoutes.edit.build({ recipeId: recipeId })}>
+              <Button>Edit recipe</Button>
+            </a>
           </div>
         </div>
       )}
@@ -86,7 +90,7 @@ function RecipeDetail() {
     <View<object, RecipeDetailInnerProps>
       component={RecipeDetailInner}
       results={{ recipeResponse: recipeResponse }}
-      componentProps={{}}
+      componentProps={{ recipeId: recipeId }}
       loadingProps={{ description: 'Loading recipe' }}
       errorProps={{
         description: 'There was an error retrieving the recipe. Please try again later.',

diff --git a/frontend/apps/recipes/App.tsx b/frontend/apps/recipes/App.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom'
 import { useStrippedRoute } from '../../hooks/route'
 
 import { RecipeCreate } from './create'
+import { RecipeEdit } from './edit'
 import { RecipeOverview } from './overview'
 import { routes } from './routes'
 
@@ -12,7 +13,8 @@ export function RecipesApp() {
   return (
     <Routes>
       <Route path={baseRoute(routes.overview.path)} element={<RecipeOverview />} />
-      <Route path={baseRoute(routes.createRecipe.path)} element={<RecipeCreate />} />
+      <Route path={baseRoute(routes.create.path)} element={<RecipeCreate />} />
+      <Route path={baseRoute(routes.edit.path)} element={<RecipeEdit />} />
     </Routes>
   )
 }
diff --git a/...reate/components/IngredientGroupInput.tsx → ...nents/RecipeForm/IngredientGroupInput.tsx b/...reate/components/IngredientGroupInput.tsx → ...nents/RecipeForm/IngredientGroupInput.tsx
@@ -5,14 +5,15 @@ import { Draggable } from 'react-beautiful-dnd'
 
 import { type UnitOption } from '../../../../contexts/UnitsProvider'
 import { type UnitRecord, type RecipeIngredientRecord } from '../../../../types'
+
 import {
   type IngredientItemGroup,
   type IngredientItem,
   type ActionFunc,
   type IngredientGroupActions,
   type FormError,
   type FormErrorInner,
-} from '../types'
+} from './types'
 
 interface IngredientOptionProps extends React.ComponentPropsWithoutRef<'div'> {
   image?: string | null
@@ -105,8 +106,10 @@ function IngredientInput({
           // Filter out already used ingredients in the same group.
           .filter(
             (ingredient) =>
+              (ingredientItem && ingredientItem.ingredient.id === ingredient.id) ||
               !ingredientItemGroup.ingredientItems
                 .flatMap((ingredientItem) => ingredientItem.ingredient.id)
+                .filter((id) => id !== undefined)
                 .includes(ingredient.id)
           )
           .map((ingredient) => ({
@@ -155,7 +158,7 @@ function IngredientInput({
               />
               <TextInput
                 label="Comment"
-                value={ingredientItem.additionalInfo}
+                value={ingredientItem.additionalInfo || ''}
                 placeholder="Optional comment"
                 onChange={(event) => handleInputChange('additionalInfo', event)}
                 error={!!error}