From 16502bd7e2f8cb01b925da56ec7848cc20989579 Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 29 Apr 2024 17:00:06 +0200 Subject: [PATCH 1/8] Header Component Created --- .eslintrc.cjs | 20 -------- Untitled Diagram.Greengrocers.drawio | 72 ++++++++++++++++++++++++++++ src/App.jsx | 39 ++------------- src/components/HeaderContent.jsx | 9 ++++ src/components/MainContent.jsx | 41 ++++++++++++++++ src/components/StoreItem.jsx | 18 +++++++ 6 files changed, 143 insertions(+), 56 deletions(-) delete mode 100644 .eslintrc.cjs create mode 100644 Untitled Diagram.Greengrocers.drawio create mode 100644 src/components/HeaderContent.jsx create mode 100644 src/components/MainContent.jsx create mode 100644 src/components/StoreItem.jsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 4dcb439..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:react/jsx-runtime', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - settings: { react: { version: '18.2' } }, - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -} diff --git a/Untitled Diagram.Greengrocers.drawio b/Untitled Diagram.Greengrocers.drawio new file mode 100644 index 0000000..19dabd6 --- /dev/null +++ b/Untitled Diagram.Greengrocers.drawio @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.jsx b/src/App.jsx index 03e658b..24f22b8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,43 +2,10 @@ import './styles/reset.css' import './styles/index.css' import initialStoreItems from './store-items' - +import MainContent from './components/MainContent' export default function App() { return ( - <> -
-

Greengrocers

- -
-
-

Your Cart

-
-
    -
-
-
-
-

Total

-
-
- £0.00 -
-
-
-
- Icons made by - - Icongeek26 - - from - - www.flaticon.com - -
- + + ) } diff --git a/src/components/HeaderContent.jsx b/src/components/HeaderContent.jsx new file mode 100644 index 0000000..1f1dd31 --- /dev/null +++ b/src/components/HeaderContent.jsx @@ -0,0 +1,9 @@ + +export default function HeaderContent({ children }) { + return ( +
+

Greengrocers

+ {children} +
+ ) +} \ No newline at end of file diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx new file mode 100644 index 0000000..4d6e3f6 --- /dev/null +++ b/src/components/MainContent.jsx @@ -0,0 +1,41 @@ +import HeaderContent from "./HeaderContent"; +import StoreItem from "./StoreItem"; + +export default function MainContent(initialStoreItems){ + + return ( + <> + + + +
+

Your Cart

+
+
    +
+
+
+
+

Total

+
+
+ £0.00 +
+
+
+
+ Icons made by + + Icongeek26 + + from + + www.flaticon.com + +
+ + ) +} \ No newline at end of file diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx new file mode 100644 index 0000000..69c95e1 --- /dev/null +++ b/src/components/StoreItem.jsx @@ -0,0 +1,18 @@ +export default function StoreItem({ initialStoreItems }){ + + const itemsList = initialStoreItems.items + return ( + + ) +} \ No newline at end of file From a6663b611768b661f017ad69543d5946119b4c7a Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 29 Apr 2024 19:28:54 +0200 Subject: [PATCH 2/8] AddToCart Prob added --- src/App.jsx | 8 ++++-- src/components/Cart.jsx | 24 ++++++++++++++++ src/components/CartItem.jsx | 15 ++++++++++ src/components/Content.jsx | 50 ++++++++++++++++++++++++++++++++++ src/components/ListItems.jsx | 6 ++++ src/components/MainContent.jsx | 41 ---------------------------- src/components/StoreItem.jsx | 5 ++-- 7 files changed, 102 insertions(+), 47 deletions(-) create mode 100644 src/components/Cart.jsx create mode 100644 src/components/CartItem.jsx create mode 100644 src/components/Content.jsx create mode 100644 src/components/ListItems.jsx delete mode 100644 src/components/MainContent.jsx diff --git a/src/App.jsx b/src/App.jsx index 24f22b8..36c6f0c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,10 +2,12 @@ import './styles/reset.css' import './styles/index.css' import initialStoreItems from './store-items' -import MainContent from './components/MainContent' +import Content from './components/Content' export default function App() { + return ( - - + <> + + ) } diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx new file mode 100644 index 0000000..ab3497b --- /dev/null +++ b/src/components/Cart.jsx @@ -0,0 +1,24 @@ +import CartItem from "./CartItem"; + +export default function Cart({children}){ + return ( +
+

Your Cart

+
+
    + + {children} + +
+
+
+
+

Total

+
+
+ £0.00 +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx new file mode 100644 index 0000000..08ce35f --- /dev/null +++ b/src/components/CartItem.jsx @@ -0,0 +1,15 @@ +export default function CartItem({initialStoreItems, items}){ + return ( +
  • + beetroot +

    {items.itemName}

    + + 1 + +
    • + ) +} \ No newline at end of file diff --git a/src/components/Content.jsx b/src/components/Content.jsx new file mode 100644 index 0000000..c84b38a --- /dev/null +++ b/src/components/Content.jsx @@ -0,0 +1,50 @@ +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){ + // console.log(initialStoreItems.items) + const [item, setItem] = useState({ + itemName : '', + quantity : 0, + idName : '' + }) + + const handleclick = (e) => { + const { id , value} = e.target + + setItem({ + ...item, + itemName : value, + quantity : +1, + idName : id + }) + } + return ( + <> + + + + + + + + +
    + Icons made by + + Icongeek26 + + from + + www.flaticon.com + +
    + + ) +} \ No newline at end of file diff --git a/src/components/ListItems.jsx b/src/components/ListItems.jsx new file mode 100644 index 0000000..14338c6 --- /dev/null +++ b/src/components/ListItems.jsx @@ -0,0 +1,6 @@ +export default function ListItems(){ +
    +
      +
    +
    +} \ No newline at end of file diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx deleted file mode 100644 index 4d6e3f6..0000000 --- a/src/components/MainContent.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import HeaderContent from "./HeaderContent"; -import StoreItem from "./StoreItem"; - -export default function MainContent(initialStoreItems){ - - return ( - <> - - - -
    -

    Your Cart

    -
    -
      -
    -
    -
    -
    -

    Total

    -
    -
    - £0.00 -
    -
    -
    -
    - Icons made by - - Icongeek26 - - from - - www.flaticon.com - -
    - - ) -} \ No newline at end of file diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx index 69c95e1..62c467f 100644 --- a/src/components/StoreItem.jsx +++ b/src/components/StoreItem.jsx @@ -1,5 +1,4 @@ -export default function StoreItem({ initialStoreItems }){ - +export default function StoreItem({ initialStoreItems, onClick }){ const itemsList = initialStoreItems.items return (
      @@ -9,7 +8,7 @@ export default function StoreItem({ initialStoreItems }){
      {item.name}
      - + ) })} From 25b92db3ed6adb91d284acc8d1c18cfcd6150223 Mon Sep 17 00:00:00 2001 From: Farshad Date: Tue, 30 Apr 2024 10:02:32 +0200 Subject: [PATCH 3/8] updated CartItem --- src/components/CartItem.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx index 08ce35f..1bb0ed9 100644 --- a/src/components/CartItem.jsx +++ b/src/components/CartItem.jsx @@ -1,5 +1,10 @@ export default function CartItem({initialStoreItems, items}){ - return ( + console.log(items) + if(items.idName === ''){ + return( + <> + ) + }else return (
    • Date: Mon, 13 May 2024 09:42:32 +0200 Subject: [PATCH 4/8] cartItems workds --- src/components/Cart.jsx | 12 ++--- src/components/CartItem.jsx | 40 +++++++++------- src/components/Content.jsx | 92 +++++++++++++++++++++++++++++++----- src/components/StoreItem.jsx | 8 ++-- 4 files changed, 112 insertions(+), 40 deletions(-) diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx index ab3497b..f8e201b 100644 --- a/src/components/Cart.jsx +++ b/src/components/Cart.jsx @@ -1,15 +1,13 @@ import CartItem from "./CartItem"; -export default function Cart({children}){ +export default function Cart({ items }){ return (

      Your Cart

      -
        - - {children} - -
      + + +
      @@ -21,4 +19,4 @@ export default function Cart({children}){
      ) -} \ No newline at end of file +} diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx index 1bb0ed9..1934d81 100644 --- a/src/components/CartItem.jsx +++ b/src/components/CartItem.jsx @@ -1,20 +1,24 @@ -export default function CartItem({initialStoreItems, items}){ - console.log(items) - if(items.idName === ''){ - return( - <> - ) - }else return ( -
    • - beetroot -

      {items.itemName}

      - - 1 - -
      • + +export default function CartItem({ items }){ + + let i =0 + return ( +
        + {items.map((item) => { + +
      • + {item.itemName} +

        {item.itemName}

        + + {item.quantity} + +
        • + })} +
      + ) } \ No newline at end of file diff --git a/src/components/Content.jsx b/src/components/Content.jsx index c84b38a..816ce7b 100644 --- a/src/components/Content.jsx +++ b/src/components/Content.jsx @@ -5,33 +5,101 @@ import StoreItem from "./StoreItem"; import CartItem from "./CartItem"; export default function Content(initialStoreItems){ - // console.log(initialStoreItems.items) - const [item, setItem] = useState({ + + + const [items, setItems] = useState([{ + itemName : '', + quantity : 0, + idName : '' + }]) + const [newitem, setNewItem] = useState({ itemName : '', quantity : 0, idName : '' }) - const handleclick = (e) => { const { id , value} = e.target - - setItem({ - ...item, - itemName : value, - quantity : +1, - idName : id + console.log(e.target) + setNewItem({ + ...newitem, + itemName:value, + quantity:1, + idName:id }) + console.log(newitem) + let i = 0 + items.map((item) => { + if (item.idName === id){ + i++ + item.quantity++ + }}) + if(i<1){ + setItems([ + ...items,{ + itemName : value, + quantity: 1, + idName : id + }]) + } + } + console.log(items) return ( <> - - - +
      +

      Your Cart

      +
      + +
        + { + items.map((item, index) => + +
      • + beetroot +

        beetroot

        + + 1 + +
        • + ) + } + + {/* {items.map((item) => { +
      • + {item.itemName} +

        {item.itemName}

        + + {item.quantity} + +
        • + })} */} +
      + +
      +
      +
      +

      Total

      +
      +
      + £0.00 +
      +
      +
      + +
    ) -} \ No newline at end of file +} + + From d341497d883db637569eb2c6a3c482befa6078ab Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 13 May 2024 09:51:04 +0200 Subject: [PATCH 5/8] cart works properly --- src/components/Content.jsx | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/src/components/Content.jsx b/src/components/Content.jsx index 816ce7b..6a07fc3 100644 --- a/src/components/Content.jsx +++ b/src/components/Content.jsx @@ -57,35 +57,24 @@ export default function Content(initialStoreItems){
      { items.map((item, index) => - -
    • + <> + { + item.idName !== '' &&
    • beetroot -

      beetroot

      +

      {item.itemName}

      - 1 + {item.quantity}
      • + } + + ) } - - - {/* {items.map((item) => { -
    • - {item.itemName} -

      {item.itemName}

      - - {item.quantity} - -
      • - })} */}
    From b4a0781d49777a7f9657b526f0310d4654e10e34 Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 13 May 2024 11:27:21 +0200 Subject: [PATCH 6/8] minus and plus buttons works --- src/components/Cart.jsx | 30 ++++++------- src/components/CartItem.jsx | 40 +++++++++-------- src/components/Content.jsx | 86 +++++++++--------------------------- src/components/StoreItem.jsx | 2 +- 4 files changed, 58 insertions(+), 100 deletions(-) diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx index f8e201b..6808297 100644 --- a/src/components/Cart.jsx +++ b/src/components/Cart.jsx @@ -1,22 +1,20 @@ import CartItem from "./CartItem"; -export default function Cart({ items }){ +export default function Cart({ onClick, items }){ return (
    -

    Your Cart

    -
    - - - -
    -
    -
    -

    Total

    -
    -
    - £0.00 -
    -
    -
    +

    Your Cart

    +
    + +
    +
    +
    +

    Total

    +
    +
    + £0.00 +
    +
    + ) } diff --git a/src/components/CartItem.jsx b/src/components/CartItem.jsx index 1934d81..f5559aa 100644 --- a/src/components/CartItem.jsx +++ b/src/components/CartItem.jsx @@ -1,24 +1,28 @@ -export default function CartItem({ items }){ - - let i =0 +export default function CartItem({onClick, items }){ + console.log(onclick) return (
      - {items.map((item) => { - -
    • - {item.itemName} -

      {item.itemName}

      - - {item.quantity} - -
      • - })} -
    + { + items.map((item, index) => + <> + { + item.idName !== '' &&
  • + {item.idName} +

    {item.itemName}

    + + {item.quantity} + +
    • + } + + ) + } + ) } \ No newline at end of file diff --git a/src/components/Content.jsx b/src/components/Content.jsx index 6a07fc3..936ae5d 100644 --- a/src/components/Content.jsx +++ b/src/components/Content.jsx @@ -12,81 +12,37 @@ export default function Content(initialStoreItems){ quantity : 0, idName : '' }]) - const [newitem, setNewItem] = useState({ - itemName : '', - quantity : 0, - idName : '' - }) + const handleclick = (e) => { - const { id , value} = e.target + const { id , value, name} = e.target console.log(e.target) - setNewItem({ - ...newitem, - itemName:value, - quantity:1, - idName:id - }) - console.log(newitem) - let i = 0 - items.map((item) => { - if (item.idName === id){ - i++ - item.quantity++ - }}) - if(i<1){ - setItems([ - ...items,{ - itemName : value, - quantity: 1, - idName : id - }]) + console.log(name) + const addormin = name !== 'negative-button' ? +1 : -1 + console.log('test', addormin) + const existItem = items.find((item) => item.idName === id) + console.log(existItem) + if (existItem){ + setItems( + items.map(item => item.idName === id ? { + ...item, + quantity: item.quantity + addormin + } : item) + ) + } else { + setItems([...items,{ + itemName:value, + quantity:1, + idName:id + }]) } - } - console.log(items) return ( <> -
    -

    Your Cart

    -
    - -
      - { - items.map((item, index) => - <> - { - item.idName !== '' &&
    • - {item.idName} -

      {item.itemName}

      - - {item.quantity} - -
      • - } - - - ) - } -
    - -
    -
    -
    -

    Total

    -
    -
    - £0.00 -
    -
    -
    +
    diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx index f4c3fb2..24907f6 100644 --- a/src/components/StoreItem.jsx +++ b/src/components/StoreItem.jsx @@ -8,7 +8,7 @@ export default function StoreItem({ initialStoreItems, onClick }){
    {item.name}
    - + ) })} From 084a17126b818076d21ee54e0d7be9c107bcfe54 Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 13 May 2024 11:43:10 +0200 Subject: [PATCH 7/8] item with 0 quantity will remove --- src/components/Content.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Content.jsx b/src/components/Content.jsx index 936ae5d..b62fcd3 100644 --- a/src/components/Content.jsx +++ b/src/components/Content.jsx @@ -15,17 +15,18 @@ export default function Content(initialStoreItems){ const handleclick = (e) => { const { id , value, name} = e.target - console.log(e.target) - console.log(name) - const addormin = name !== 'negative-button' ? +1 : -1 - console.log('test', addormin) + 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)) + return + } if (existItem){ setItems( items.map(item => item.idName === id ? { ...item, - quantity: item.quantity + addormin + quantity: item.quantity + plusOrMin } : item) ) } else { @@ -36,6 +37,7 @@ export default function Content(initialStoreItems){ }]) } } + console.log(items) return ( <> From 367f4d725aa6697c79b0803199fad568b7b514fd Mon Sep 17 00:00:00 2001 From: Farshad Date: Mon, 13 May 2024 12:17:52 +0200 Subject: [PATCH 8/8] core criteria finished --- src/components/Cart.jsx | 4 ++-- src/components/Content.jsx | 14 +++++++++----- src/components/StoreItem.jsx | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Cart.jsx b/src/components/Cart.jsx index 6808297..154efce 100644 --- a/src/components/Cart.jsx +++ b/src/components/Cart.jsx @@ -1,6 +1,6 @@ import CartItem from "./CartItem"; -export default function Cart({ onClick, items }){ +export default function Cart({ onClick, items , total}){ return (

    Your Cart

    @@ -12,7 +12,7 @@ export default function Cart({ onClick, items }){

    Total

    - £0.00 + £{total.toFixed(2)}
    diff --git a/src/components/Content.jsx b/src/components/Content.jsx index b62fcd3..6901432 100644 --- a/src/components/Content.jsx +++ b/src/components/Content.jsx @@ -13,6 +13,7 @@ export default function Content(initialStoreItems){ idName : '' }]) + const [total, setTotal] = useState(0) const handleclick = (e) => { const { id , value, name} = e.target const plusOrMin = name !== 'negative-button' ? +1 : -1 @@ -20,31 +21,34 @@ export default function Content(initialStoreItems){ console.log(existItem) if(plusOrMin === -1 && existItem.quantity === 1){ setItems(items.filter(item => item.idName !== id)) - return - } - if (existItem){ + 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) } } - console.log(items) + return ( <> - +
    diff --git a/src/components/StoreItem.jsx b/src/components/StoreItem.jsx index 24907f6..7f4d21a 100644 --- a/src/components/StoreItem.jsx +++ b/src/components/StoreItem.jsx @@ -8,7 +8,7 @@ export default function StoreItem({ initialStoreItems, onClick }){
    {item.name}
    - + ) })}