Delete food on input form (#256)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "diet-diary",
-  "version": "2.32.5",
+  "version": "2.33.0",
   "private": true,
   "homepage": ".",
   "dependencies": {

src/components/input-form/FoodInputForm.tsx

@@ -4,7 +4,7 @@ import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import { calcFoodCalories, toIntString } from "../../model/calorieFunction";
 import { Food } from "../../model/Food";
-import { VariantPrimary, VariantSecondary } from "../ButtonVariant";
+import { VariantDanger, VariantPrimary, VariantSecondary } from "../ButtonVariant";
 import { FoodDescriptionComboBox } from "./FoodDescriptionComboBox";
 import { ServingInputControl } from "./ServingInputControl";
 import { useFoodInputFormStateReducer } from "./useFoodInputFormStateReducer";
@@ -15,7 +15,8 @@ interface Props {
   food: Food;
   buttonLabel: ButtonLabel;
   onSaveFood: (food: Food) => void;
-  onCancel: () => void
+  onCancel: () => void;
+  onDeleteFood?: () => void;
 }
 
 export const FoodInputForm = (props: Props) => {
@@ -80,7 +81,10 @@ export const FoodInputForm = (props: Props) => {
       </Form.Group>
 
       <Row>
-        <Col />
+        <Col>
+          {props.onDeleteFood
+            && <Button variant={VariantDanger} onClick={props.onDeleteFood}>Delete</Button>}
+        </Col>
         <Col xs="auto">
           <Button variant={VariantSecondary} onClick={props.onCancel}>Cancel</Button>&nbsp;
           <Button variant={VariantPrimary} type="submit" >{props.buttonLabel}</Button>

src/features/day-page/mealStatesSlice.ts

@@ -65,6 +65,11 @@ const mealStatesSlice = createSlice({
       const { mealIndex, foodIndex, food } = action.payload;
       state[mealIndex].meal.foods[foodIndex] = food;
     },
+    deleteFood(state, action: PayloadAction<{ mealIndex: number; foodIndex: number; }>) {
+      const { mealIndex, foodIndex } = action.payload;
+      state[mealIndex].meal.foods.splice(foodIndex, 1);
+      state[mealIndex].foodEditIndex = undefined;
+    },
     cancelAddFood(state, { payload: { mealIndex } }: PayloadAction<{ mealIndex: number; }>) {
       state[mealIndex].editState = undefined;
     },
@@ -103,7 +108,7 @@ const mealStatesSlice = createSlice({
 
 export const {
   addMeal, addSavedMeal, deleteMeal,
-  addFood, updateFood, cancelAddFood,
+  addFood, updateFood, deleteFood, cancelAddFood,
   enterMealEditMode, enterMealAddMode, exitMealEditMode,
   enterFoodEditMode, exitFoodEditMode,
   showSavedMealAlert, hideSavedMealAlert

src/features/input-form/UpdateFoodInputForm.ts

@@ -2,7 +2,7 @@ import { connect } from "react-redux";
 import { AppDispatch } from "../../app/store";
 import { ButtonLabel, FoodInputForm } from "../../components/input-form/FoodInputForm";
 import { Food } from "../../model/Food";
-import { exitFoodEditMode, updateFood } from "../day-page/mealStatesSlice";
+import { deleteFood, exitFoodEditMode, updateFood } from "../day-page/mealStatesSlice";
 
 const mapStateToProps = () => ({
   buttonLabel: "Update" as ButtonLabel,
@@ -16,6 +16,7 @@ const mapDispatchToProps = (dispatch: AppDispatch, ownProps: { mealIndex: number
       dispatch(exitFoodEditMode({ mealIndex }));
     },
     onCancel: () => dispatch(exitFoodEditMode({ mealIndex })),
+    onDeleteFood: () => dispatch(deleteFood({ mealIndex, foodIndex })),
   }
 }