boolean-uk · FBagdeli · Apr 29, 2024 · Apr 29, 2024 · Apr 30, 2024 · May 13, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/Untitled Diagram.Greengrocers.drawio b/Untitled Diagram.Greengrocers.drawio
@@ -0,0 +1,72 @@
+<mxfile host="app.diagrams.net" modified="2024-04-29T13:11:39.214Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0" etag="bPIyzaNIqPygeIrONY2y" version="24.3.1" type="device">
+  <diagram name="Page-1" id="jRh3g9O0sv6gsrA3eOK4">
+    <mxGraphModel dx="458" dy="534" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="tFVcKyLoC8tt9AktipYF-1" value="App" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="365" y="20" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-2" target="tFVcKyLoC8tt9AktipYF-11">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-2" target="tFVcKyLoC8tt9AktipYF-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-2" value="ItemsList" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="260" y="90" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-3" value="CardList" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="480" y="150" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-4" target="tFVcKyLoC8tt9AktipYF-3">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="462" y="130" />
+              <mxPoint x="512" y="130" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-4" value="Card" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="430" y="90" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-5" value="Total" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="393" y="150" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.462;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-1" target="tFVcKyLoC8tt9AktipYF-4">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="400" y="60" />
+              <mxPoint x="460" y="60" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.615;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-1" target="tFVcKyLoC8tt9AktipYF-2">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="400" y="60" />
+              <mxPoint x="300" y="60" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.529;entryY=0.014;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="tFVcKyLoC8tt9AktipYF-4" target="tFVcKyLoC8tt9AktipYF-5">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="427" y="140" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-11" value="ftuit" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="210" y="160" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-12" value="vegetable" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="300" y="160" width="65" height="20" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-15" value="Product in app&lt;div&gt;&amp;nbsp;itemsList -&amp;gt; fruit&amp;nbsp;&lt;/div&gt;&lt;div&gt;&amp;nbsp;itemsList -&amp;gt; vegetable&lt;br&gt;&lt;/div&gt;&lt;div&gt;Card -&amp;gt; CardList&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="150" y="230" width="140" height="90" as="geometry" />
+        </mxCell>
+        <mxCell id="tFVcKyLoC8tt9AktipYF-17" value="items in Card&lt;div&gt;Total&lt;/div&gt;&lt;div&gt;Card List&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="365" y="230" width="90" height="60" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,43 +2,12 @@ import './styles/reset.css'
 import './styles/index.css'
 
 import initialStoreItems from './store-items'
-
+import Content from './components/Content'
 export default function App() {
+
   return (
     <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
-      </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
-      </main>
-      <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
-          Icongeek26
-        </a>
-        from
-        <a href="https://www.flaticon.com/" title="Flaticon">
-          www.flaticon.com
-        </a>
-      </div>
+    <Content items = { initialStoreItems } />
     </>
   )
 }
diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx
@@ -0,0 +1,20 @@
+import CartItem from "./CartItem";
+
+export default function Cart({ onClick, items , total}){
+  return (
+    <main id="cart">
+    <h2>Your Cart</h2>
+    <div className="cart--item-list-container">
+      <CartItem onClick={onClick} items={items}/>
+    </div>
+    <div className="total-section">
+      <div>
+        <h3>Total</h3>
+      </div>
+      <div>
+        <span className="total-number">£{total.toFixed(2)}</span>
+      </div>
+    </div>
+  </main>
+  )
+}
diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx
@@ -0,0 +1,28 @@
+
+export default function CartItem({onClick, items }){
+  console.log(onclick)
+  return (
+    <ul className="item-list cart--item-list">
+      {
+        items.map((item, index) =>
+          <>
+            {
+              item.idName !== '' && <li key={index}>
+              <img
+                className="cart--item-icon"
+                src={`assets/icons/${item.idName}.svg`}
+                alt={item.idName}
+              />
+              <p>{item.itemName}</p>
+              <button id={item.idName} name="negative-button" onClick= {onClick}className="quantity-btn remove-btn center">-</button>
+              <span className="quantity-text center">{item.quantity}</span>
+              <button id={item.idName} name="positive-button" onClick={onClick} className="quantity-btn add-btn center">+</button>
+              </li>
+            }
+          </>
+        )
+      }
+    </ul>
+
+  )
+}
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import Cart from "./Cart";
+import HeaderContent from "./HeaderContent";
+import StoreItem from "./StoreItem";
+import CartItem from "./CartItem";
+
+export default function Content(initialStoreItems){
+
+
+  const [items, setItems] = useState([{
+    itemName : '',
+    quantity : 0,
+    idName : ''
+  }])
+
+  const [total, setTotal] = useState(0)
+  const handleclick = (e) => {
+    const { id , value, name} = e.target
+    const plusOrMin = name !== 'negative-button' ? +1 : -1
+    const existItem = items.find((item) => item.idName === id)
+    console.log(existItem)
+    if(plusOrMin === -1 && existItem.quantity === 1){
+      setItems(items.filter(item => item.idName !== id))
+      setTotal( total-0.35 )
+      //if we remove a item and total becomes 0 then user will see '-0.00', so with the next line of code we wont have the problem
+      total === 0 ? 0: total
+    }else if (existItem){
+      setItems(
+        items.map(item => item.idName === id ? {
+          ...item,
+          quantity: item.quantity + plusOrMin
+        } : item)
+      )
+      setTotal(plusOrMin !== -1 ? total+0.35 : total-0.35)
+    } else {
+      setItems([...items,{
+        itemName:value,
+        quantity:1,
+        idName:id
+      }])
+      setTotal(total+0.35)
+    }
+  }
+
+  return (
+    <>
+      <HeaderContent>
+        <StoreItem initialStoreItems = { initialStoreItems } onClick = {handleclick}  />
+      </HeaderContent>
+
+       <Cart onClick={handleclick} items={items} total={total}/>
+
+
+      <div>
+        Icons made by
+        <a
+          href="https://www.flaticon.com/authors/icongeek26"
+          title="Icongeek26"
+        >
+          Icongeek26
+        </a>
+        from
+        <a href="https://www.flaticon.com/" title="Flaticon">
+          www.flaticon.com
+        </a>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/HeaderContent.jsx b/src/components/HeaderContent.jsx
@@ -0,0 +1,9 @@
+
+export default function HeaderContent({ children }) {
+  return (
+    <header id="store">
+      <h1>Greengrocers</h1>
+      {children}
+    </header>
+  )
+}
diff --git a/src/components/ListItems.jsx b/src/components/ListItems.jsx
@@ -0,0 +1,6 @@
+export default function ListItems(){
+  <div className="cart--item-list-container">
+    <ul className="item-list cart--item-list">
+    </ul>
+  </div>
+}
diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx
@@ -0,0 +1,19 @@
+export default function StoreItem({ initialStoreItems, onClick }){
+  const itemsList = initialStoreItems.items
+  return (
+    <ul className="item-list store--item-list">
+      {itemsList.map((item,index) => {
+        return (
+          <li key={index}>
+            <div className="store--item-icon">
+              <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+            </div>
+            <button onClick={onClick} id = {item.id} value={item.name} name ="add-button" >Add to cart</button>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+