From 1f589a75c15d2e111749692a89036f1d4f0bcb3f Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Mon, 20 May 2024 13:51:09 -0500
Subject: [PATCH] created add box size components

---
 .../src/components/layout/MenuItemForm.js     |  8 ++-
 .../src/components/layout/MenuItemProps.js    | 51 +++++++++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 donutshop_ecommerce/src/components/layout/MenuItemProps.js

diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
index f5432c3..aad86b0 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -1,16 +1,19 @@
 import React, { useState } from 'react'
 import EditImage from './EditImage';
+import MenuItemProps from './MenuItemProps'
+
 
 const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
     const [menuImg, setMenuImg] = useState(menuItem?.menuImg || '');
     const [itemName, setItemName] = useState(menuItem?.itemName || '');
     const [description, setDescription] = useState(menuItem?.description || '');
     const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
-
+    const [sizes, setSizes] = useState([]);
+    
 
 
   return (
-    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice})}>
+    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes})}>
         <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
             <EditImage link={menuImg} setLink={setMenuImg}/>
         </div>
@@ -26,6 +29,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
             <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
             <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
         </div>
+        <MenuItemProps props={sizes} setProps={setSizes}/>
         <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
     </form>
   )
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemProps.js b/donutshop_ecommerce/src/components/layout/MenuItemProps.js
new file mode 100644
index 0000000..a811036
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/MenuItemProps.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { IoTrashOutline } from "react-icons/io5";
+
+const MenuItemProps = ({props, setProps}) => {
+
+    function addProp(){
+        setProps(oldProp => {
+            return [...oldProp, {itemName:'', price:0}];
+        })
+    }
+
+    function editProp(ev, index, prop){
+        const newValue = ev.target.value;
+        setProps(prevSizes => {
+            const newSizes = [...prevSizes];
+            newSizes[index][prop] = newValue;
+            return newSizes
+        })
+    }
+
+    function removeProp(indexRemove){
+        setProps(prev => prev.filter((v, index) => index !== indexRemove))
+    }
+
+
+  return (
+    <div>
+        <label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts</label>
+        <div className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]'>
+            {props?.length > 0 && props.map((size, index) => (
+                <div className='flex gap-2 items-center'>
+                    <div>
+                        <label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
+                        <input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
+                    </div>
+                    <div>
+                        <label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
+                        <input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
+                    </div>
+                    <div className='flex items-center mt-5 text-red-500'>
+                        <button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
+                    </div>
+                </div>
+            ))}
+            <button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
+        </div>
+    </div>
+  )
+}
+
+export default MenuItemProps
\ No newline at end of file