Merge pull request #245 from agiledev-students-spring-2023/Nancy-sprint4

Update share-recipe

Author: Ginette9

README.md

@@ -1,6 +1,7 @@
 ![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/actions/workflows/back-end.yml/badge.svg?event=push)
 
 ![Workflow Status](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/actions/workflows/front-end.yml/badge.svg?event=push)
+
 ## Project Description
 
 "What's for Dinner" is an open-source web application that suggests recipes based on the ingredients and cooking utensils you have on hand. With our platform, you can search for recipes using specific ingredients, add or remove ingredients to see different recipe suggestions, and save your favorite recipes for future use. Our app also includes advanced search filters such as dietary restrictions, meal type, and cooking time/difficulty to help find the perfect recipe for users at all levels.
@@ -30,7 +31,9 @@ Please refer to the [CONTRIBUTING.md](https://github.com/agiledev-students-sprin
 ## Instructions to Building and Testing the Project
 
 ### Building
+
 **Front-end**
+
 1. first run `cd front-end` to navigate to front-end folder
 2. then run `npm install` to install the front-end dependencies
 3. create a `.env` file in the front-end directory with the following content:
@@ -56,17 +59,20 @@ CORS_ORIGIN=http://localhost:3001
     *Note: For this project, we have provided the following credentials. However, for real projects, please visit "https://www.themealdb.com/" to create an account and replace <MEAL_DB_API_KEY> with your own API key. Similarly, replace <MONGODB_URI> and <SPOONACULAR_API_KEY> with your respective API keys.*
 
 ### Running
-1. If you are testing either the front-end or back-end, you can run npm start in the corresponding folder.
-2. If you are running both the front-end and back-end together, run npm start separately in each folder and view the app on http://localhost:3001.
-3. If you are using a Windows PC, please run npm run start-pc instead of npm start for the front-end.
+1. If you are testing either the front-end or back-end, you can run `npm start` in the corresponding folder.
+2. If you are running both the front-end and back-end together, run `npm start` separately in each folder and view the app on http://localhost:3001.
+3. If you are using a Windows PC, please run `npm run start-pc` instead of `npm start` for the front-end.
 
 ## Deployed front-end
 To view our front-end code live on the web, go to https://monkfish-app-fjlpj.ondigitalocean.app/
 
+
 ## Additional Resources
+
 [README.md](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/blob/master/README.md) - an overview of this project<br>
 [LICENSE.md](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/blob/master/LICENSE.md) - the license under which this project is released<br>
 [UX-DESIGN.md](https://github.com/agiledev-students-spring-2023/final-project-what-s-for-dinner/blob/master/UX-DESIGN.md) - the wireframe diagrams and prototype for this project
 
-### Important Note:
-This project is still in development, and we appreciate your patience and feedback as we work to improve the platform. If you have any questions or suggestions, please don't hesitate to reach out to us via the project's GitHub page.
+### Important Note
+
+This project is still in development, and we appreciate your patience and feedback as we work to improve the platform. If you have any questions or suggestions, please don't hesitate to reach out to us via the project's GitHub page.

back-end/routes/share-recipes.js

@@ -2,12 +2,25 @@ const express = require("express");
 const router = express.Router();
 const Recipe = require('../models/recipes.js');
 
+const multer = require('multer');
+const storage = multer.diskStorage({
+    destination: (req, file, cb) => {
+        cb(null, './uploads/');
+    },
+    filename: (req, file, cb) => {
+        cb(null, Date.now() + file.originalname);
+    }
+});
+const upload = multer({ storage: storage });
+
+
 router.post('/', async (req,res) => {
     try{
         const recipe = new Recipe({
             Title: req.body.title,
             Instructions: req.body.instructions,
             Ingredients: req.body.ingredients,
+            Image: req.file.path
         })
 
         await recipe.save();

front-end/src/RecipeList.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import Search from "./Search";
+// import Search from "./Search";
 import { Link } from "react-router-dom"
 import SortBy from "./SortBy";
 import SelectIng from "./SelectIng";

front-end/src/ShareRecipe.js

@@ -4,7 +4,7 @@ import "./ShareRecipe.css"
 const ShareRecipe = () => {
   // Set up state variables to track form input
   const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
+  // const [description, setDescription] = useState("");
   const [ingredients, setIngredients] = useState([]);
   const [instructions, setInstructions] = useState("");
   const [image, setImage] = useState(null);
@@ -15,32 +15,24 @@ const ShareRecipe = () => {
     // Create recipe object with form input
     const recipe = {
       title: title,
-      description: description,
       ingredients: ingredients,
       instructions: instructions,
       image: image,
     };
     // Send recipe data
-    console.log(recipe);
-    const response = await fetch(`http://localhost:3000/share-recipes`, {
-      method: 'POST',
-      body: recipe,
-    });
 
-    // const formData = new FormData();
-    // formData.append('title', title);
-    // formData.append('description', description);
-    // formData.append('instructions', instructions);
-    // formData.append('image', image);
 
-    // ingredients.forEach((ingredient, index) => {
-    // formData.append(`ingredients[${index}]`, ingredient);
-    // });
+    const formData = new FormData();
+    formData.append('title', title);
+    formData.append('instructions', instructions);
+    formData.append('ingredients', JSON.stringify(ingredients));
+    formData.append('image', image);
 
-    // const response = await fetch(`http://localhost:3000/share-recipes`, {
-    //   method: 'POST',
-    //   body: formData,
-    // });
+    console.log(recipe);
+    const response = await fetch('http://localhost:3000/share-recipes', {
+        method: 'POST',
+        body: formData
+    });
 
     if(response.ok){
       console.log('Recipe submitted successfully!');
@@ -51,7 +43,7 @@ const ShareRecipe = () => {
 
     // Reset form input
     setTitle("");
-    setDescription("");
+    // setDescription("");
     setIngredients([]);
     setInstructions("");
     setImage(null);
@@ -86,13 +78,13 @@ const ShareRecipe = () => {
         required
       />
 
-      <label htmlFor="description">Description:</label>
+      {/* <label htmlFor="description">Description:</label>
       <textarea
         id="description"
         value={description}
         onChange={(e) => setDescription(e.target.value)}
         required
-      ></textarea>
+      ></textarea> */}
 
       <label htmlFor="ingredients">Ingredients:</label>
       {ingredients.map((ingredient, index) => (
@@ -122,6 +114,7 @@ const ShareRecipe = () => {
         id="image"
         accept=".jpg,.jpeg,.png"
         onChange={handleImageUpload}
+        required
       />
 
       <button type="submit">Share Recipe</button>