SE2R-64 Added add Recipe Button and Modal

frontend/src/api/api.api.tsx

@@ -170,15 +170,42 @@ export async function editRecipeApi(recipe: RecipeDetails, id: number) {
   }
 }
 
+export async function addRecipeApi(recipe: RecipeDetails) {
+  const key = "" + sessionStorage.getItem("key");
+  console.log(recipe.ingredients);
+  try {
+    const response = await axios.post(
+      `${server}/recipes`,
+      {
+        name: recipe.name,
+        instructions: recipe.instructions,
+        ingredients: recipe.ingredients,
+        tags: recipe.tags,
+      },
+      {
+        headers: {
+          security_header: key,
+        },
+      }
+    );
+    return response.data;
+  } catch (error) {
+    toast.error(String(error));
+    throw error;
+  }
+}
+
 export async function registerApi(username: string, password: string) {
   try {
     const response = await axios.post(`${server}/register`, {
       username: username,
       password: password,
     });
     return response;
-  } catch (error) {
-    toast.error(String(error));
+  } catch (error: unknown) {
+      if(error instanceof Error) {
+        toast.error(String(error.message));
+      }
     throw error;
   }
 }

frontend/src/components/recipes-add-recipe/recipes-add-recipe.component.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    TextField,
+    Typography
+} from "@mui/material";
+import styled from '@emotion/styled';
+import { IngredientDetailsQuantity, RecipeDetails } from '../../models/models';
+import IngredientsModal from '../recipes-table/edit-ingredients-modal';
+interface Props {
+    visible: boolean;   
+    onCancel: () => void;
+    addRecipe: (recipe: RecipeDetails) => void;
+    handleOpen: () => void;
+}
+const AddRecipeModal: React.FC<Props> = ({visible,onCancel,addRecipe, handleOpen}) => {
+  const HandleNameEdit = (e:any) => {
+    setRecipeName(e.target.value);
+  }
+  const HandleInstructionsEdit = (e:any) => {
+    setRecipeInstructions(e.target.value);
+  }
+  const [ingredientsModal,setIngredientsModal] = useState<any>({isVisible: false,ingredients: []});
+  const[ recipeName,setRecipeName] = useState("");
+  const[ recipeInstructions,setRecipeInstructions] = useState("");
+  const[ recipeIngredients,setRecipeIngredients] = useState<IngredientDetailsQuantity[]>([]);
+  const[ recipeTags,setRecipeTags] = useState([]);
+
+  useEffect( () =>{
+  }
+  ,[recipeIngredients]);
+
+  const AcceptIngredients = (newIngredients : IngredientDetailsQuantity[]) => {
+    setIngredientsModal({isVisible: false,ingredients: recipeIngredients});
+    setRecipeIngredients(newIngredients);
+  };
+
+    return (
+        <div>
+          <Button 
+            variant="contained"
+            sx={{mb: 1}}
+            onClick={handleOpen}
+            aria-label="Add Recipe Button"
+          >
+            Add Recipe
+          </Button>
+            <Dialog fullScreen={false} open={visible} >
+                <TextField defaultValue={recipeName} onChange={HandleNameEdit}></TextField>
+                <DialogContent>
+                    <Typography >Instructions:</Typography>
+                    <Instructions  defaultValue={recipeInstructions} onChange={HandleInstructionsEdit}></Instructions>
+                    <br/>
+                    <Button aria-label="Edit ingredients button" variant ="outlined" onClick ={() => setIngredientsModal({isVisible:true,ingredients: recipeIngredients})}>Edit Ingredients</Button>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={onCancel}>Close</Button>
+                    <Button onClick={() =>{ addRecipe({
+                      id: 0,
+                      name: recipeName,
+                      instructions:recipeInstructions,
+                      ingredients: recipeIngredients,
+                      tags: recipeTags
+                    });}
+                    }
+                    aria-label="Accept button"
+                    >Accept</Button>
+                </DialogActions>
+                <IngredientsModal visible = {ingredientsModal.isVisible} ingredients = {[]}
+                onCancel={() =>setIngredientsModal({isVisible: false,ingredients: recipeIngredients})}
+                onAccept={AcceptIngredients}
+                />
+            </Dialog>
+        </div>
+    )
+}
+
+const Instructions = styled.textarea`
+  min-width:20vw;
+  min-heigth:30vw;
+`;
+
+export default AddRecipeModal;

frontend/src/components/recipes-add-recipe/recipes-add-recipe.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import {render, screen} from "@testing-library/react";
+import AddRecipeModal from "./recipes-add-recipe.component";
+
+describe("AddRecipe", () => {
+    it("should render add recipe button", () => {
+        render(
+            <AddRecipeModal 
+                visible={false}
+                onCancel={() => {}}
+                handleOpen={() => {}}
+                addRecipe={() => {}}
+            />
+        )
+        expect(screen.getByLabelText("Add Recipe Button")).toBeTruthy();
+    })
+
+    it("should render edit button", () => {
+        render(
+            <AddRecipeModal 
+                visible={true}
+                onCancel={() => {}}
+                handleOpen={() => {}}
+                addRecipe={() => {}}
+            />
+        )
+        expect(screen.getByLabelText("Edit ingredients button")).toBeTruthy();
+    })
+
+    it("should render accept button", () => {
+        render(
+            <AddRecipeModal 
+                visible={true}
+                onCancel={() => {}}
+                handleOpen={() => {}}
+                addRecipe={() => {}}
+            />
+        )
+        expect(screen.getByLabelText("Accept button")).toBeTruthy();
+    })
+})

frontend/src/components/recipes-admin-view/RecipesAdminView.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import CircularProgress from "@mui/material/CircularProgress";
 import {
+  addRecipeApi,
   deleteRecipeApi,
   editRecipeApi,
   getRecipesApi,
@@ -10,13 +11,15 @@ import Box from "@mui/system/Box";
 import { RecipeDetails } from "../../models/models";
 import RecipesTable from "../recipes-table/recipes-table";
 import { RecipesFilters } from "../recipes-filters";
+import AddRecipeModal from "../recipes-add-recipe/recipes-add-recipe.component";
 
 export default function RecipesAdminView() {
   const [recipes, setRecipes] = useState<RecipeDetails[]>([]);
   const [isFetching, setIsFetching] = useState<boolean>(true);
   const [page, setPage] = useState<number>(0);
   const [limit, setLimit] = useState<number>(10);
   const [count, setCount] = useState<number>(0);
+  const [isAddModalVisible,setModalVisible] = useState<boolean>(false);
 
   const getAllRecipes = () => {
     getRecipesApi(page, limit).then((response) => {
@@ -53,6 +56,12 @@ export default function RecipesAdminView() {
     editRecipeApi(recipe, id).then(() => getAllRecipes());
   };
 
+  const addRecipe = (recipe: RecipeDetails) => {
+    setIsFetching(true);
+    addRecipeApi(recipe).then(() => getAllRecipes());
+    setModalVisible(false);
+  };
+
   const handleOnFilterClick = (name: string, tag: string) => {
     setIsFetching(true);
     getRecipesApi(page, limit, name, tag).then((response) => {
@@ -75,6 +84,12 @@ export default function RecipesAdminView() {
   ) : (
     <>
       <RecipesFilters onFilterClick={handleOnFilterClick} />
+      <AddRecipeModal 
+        visible={isAddModalVisible}
+        onCancel={() => setModalVisible(false)}
+        handleOpen={() => setModalVisible(true)}
+        addRecipe={addRecipe}
+      />
       <RecipesTable
         recipes={recipes}
         page={page}

frontend/src/components/recipes-table/edit-ingredients-modal.tsx

@@ -25,7 +25,7 @@ const IngredientsModal: React.FC<Props> = ({visible,onCancel,ingredients,onAccep
     const [newIngredients,setNewIngredients] = useState<IngredientDetailsQuantity[]>(ingredients);
 
     const getAllIngredients = () => {
-        getIngredientsApi(0, 20).then((response) => {
+        getIngredientsApi(0, 100).then((response) => {
             setIsFetching(true);
             if(!!response){
                 setAllIngredients(response.ingredients);

frontend/src/components/recipes-table/edit-modal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState} from 'react';
 import {
     Button,
-    Card,
     Dialog,
     DialogActions,
     DialogContent,
@@ -70,34 +69,6 @@ const EditModal: React.FC<Props> = ({visible,onCancel,recipe,editRecipe}) => {
         </>
     )
 }
-const CardsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;  
-  justify-content: space-around;
-  max-width:30vw;
-  min-width:20vw;
-`;
-const TagsContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;  
-  justify-content: space-around;
-  max-width:30vw;
-  min-width:20vw;
-`;
-const StyledCard = styled(Card)`
-  padding: 10px;
-  background-color: LavenderBlush;
-  margin:5px;
-  display:inline;
-`;
-const Tag = styled(Card)`
-  padding: 10px;
-  background-color: AliceBlue;
-  margin:5px;
-  display:inline;
-`;
 const Instructions = styled.textarea`
   min-width:20vw;
   min-heigth:30vw;

frontend/src/constants/constants.tsx

@@ -1 +1 @@
-export const server = 'http://localhost:80';
+export const server = 'https://cross-testing-backend.azurewebsites.net';