change input to add file directly in form instead url

src/components/AddItem/index.jsx

@@ -9,19 +9,49 @@ const AddItem = () => {
   const [dish, setDish] = useState(dishSelected)
   const [categories, setCategories] = useState([])
 
-  const handleSubmit = () => {
+  useEffect(()=> {
+    categoryService.getAll()
+      .then(data => {
+        setCategories(data)
+      })
+    setDish(dishSelected)
+  }, [dishSelected])
+
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
     if (actionLayout === ActionTypes.DISH_ADD) {
-      dish.price = Number(dish.price);
-      dish.categoryId = Number(categorySelected.id);
-      dishService.create(dish)
-        .then(() => updateModalDisplay('ADD_DISH'))
+      createDish();
     } else {
-      dish.dishId = dish.id;
-      dishService.update(dish)
-        .then((res) =>  updateModalDisplay('UPDATED_DISH'))
+      updateDish();
     }
   }
 
+  const createDish = () => {
+    dish.price = Number(dish.price);
+    dish.categoryId = Number(categorySelected.id);
+    dishService.create(dish)
+      .then((res) => dishService.updateImage({dishId: res.id, image: dish.image}))
+      .then(()=> updateModalDisplay('ADD_DISH'));
+  }
+
+  const updateDish = () => {
+    dish.dishId = dish.id;
+    dishService.update(dish)
+      .then((res) =>  {
+        //if  user add new image then update image if not only return updated dish
+        if (dish.image) {
+          return dishService.updateImage({dishId: res.id, image: dish.image});
+        } else {
+          return res;
+        }
+      })
+      .then(()=> updateModalDisplay('UPDATED_DISH'))
+  }
+  /**
+   * Update input value in state
+   * @param {Event} e form event
+   */
   const handleChange = (e) => {
     const newDish = {
       ...dish,
@@ -30,25 +60,39 @@ const AddItem = () => {
     setDish(newDish)
   }
 
-  useEffect(()=> {
-    categoryService.getAll()
-      .then(data => {
-        setCategories(data)
-      })
-    setDish(dishSelected)
-  }, [dishSelected])
+  /**
+   * Handle the value of input file to show image when select and prepare form to submit
+   * @param {Event} e input file event
+   */
+  const handleImage = (e) => {
+    let file = e.target.files[0];
+    const customEvent = {
+      target: {
+        id: 'image',
+        value: file
+      }
+    }
+    handleChange(customEvent);
+  }
 
-  const categoryOptions = categories.map(category => <option value={category.id} key={category.id}  selected={ dish.categoryId==category.id }  >{category.name}</option>)
+  /**
+   * Choose what image should be displayed the default or new image
+   */
+  const handleDisplayImage = () => {
+    if (dish.imageUrl && !dish.image) {
+      return <img src={dish.imageUrl} alt=""/>;
+    } else if (dish.imageUrl){
+      return <img src={URL.createObjectURL(dish.image)} alt=""/>;
+    }
+  }
 
   return (
     <div className="addItem">
-      <form key={dish.id} action="" className="addItem__form" onSubmit={()=> handleSubmit()}>
+      <form key={dish.id} action="" className="addItem__form" onSubmit={(e)=> handleSubmit(e)}>
         <i onClick={() => updateAction(ActionTypes.BASE)} className="fas fa-arrow-circle-left arrow" />
-        {dish.imageUrl &&
           <div className="addItem__form--image">
-            <img src={dish.imageUrl} alt=""/>
+            { handleDisplayImage() }
           </div>
-        }
         <div className="addItem__form--group">
           <label htmlFor="name">Add title</label>
           <input type="text" id="name" defaultValue={dish.name} onChange={(e)=>handleChange(e)} />
@@ -62,13 +106,13 @@ const AddItem = () => {
           <input type="text" id="price" defaultValue={dish.price} onChange={(e)=>handleChange(e)} />
         </div>
         <div className="addItem__form--group">
-          <label htmlFor="imageUrl">Image URL</label>
-          <input type="text" id="imageUrl" defaultValue={dish.imageUrl} onChange={(e)=>handleChange(e)} />
+          <label htmlFor="imageUrl">Image</label>
+          <input type="file" id="imageUrl" onChange={(e)=>handleImage(e)} />
         </div>
         <div className="addItem__form--group">
           <label htmlFor="categoryId">Categoría</label>
-          <select type="text" id="categoryId" disabled>
-            <option value={categorySelected.id} selected>{categorySelected.name}</option>
+          <select type="text" id="categoryId" disabled defaultValue={categorySelected.id}>
+            <option value={categorySelected.id}>{categorySelected.name}</option>
           </select>
         </div>
         <input type="submit" value="Send" className="addItem__form--submit" />

src/services/dish.js

@@ -8,7 +8,7 @@ dishService.getAll = () => {
     .catch(err => console.log('[ERROR]', err))
 }
 
-dishService.create = ({ name, description, categoryId, price, imageUrl }) => {
+dishService.create = ({ name, description, categoryId, price, imageUrl = 'https://via.placeholder.com/300x200' }) => {
   return fastOrderService.post('/menu-dishes', { name, description, categoryId, price, imageUrl })
     .then(res => res.data)
     .catch(err => console.log('[ERROR]', err))
@@ -25,6 +25,13 @@ dishService.update = ({ dishId, name, description, imageUrl, categoryId, price,
     .then(res => res.data)
     .catch(err => console.log('[ERROR]', err))
 }
+dishService.updateImage = ({ dishId, image }) => {
+  const form = new FormData()
+  form.append('image', image, image.name)
+  return fastOrderService.post(`/menu-dishes/${dishId}/image`, form)
+    .then(res => res.data)
+    .catch(err => console.log('[ERROR]', err))
+}
 
 dishService.preparing = ({ dishId }) => {
   return fastOrderService.put(`/order-details/preparing/${dishId}`)