From 5cafab9ed92eb9f18b59c8721c98597d31473530 Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 15:53:39 +0000 Subject: [PATCH 1/6] renamed el to element --- components/Cart.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/Cart.js b/components/Cart.js index 4026674..a9f79e6 100644 --- a/components/Cart.js +++ b/components/Cart.js @@ -3,7 +3,6 @@ import ctx from '@/store/ctx-obj'; export default function Cart() { const cartCTX = useContext(ctx); - console.log(cartCTX, ' context in cart'); const items = cartCTX.items; return ( @@ -12,10 +11,10 @@ export default function Cart() {

Cart

From 79cba7c92da701be23eb3c7d18637bf7684f949f Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 15:54:26 +0000 Subject: [PATCH 2/6] added className to button --- components/Button.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Button.js b/components/Button.js index 9edea0f..77ac118 100644 --- a/components/Button.js +++ b/components/Button.js @@ -1,5 +1,7 @@ -//button - -export default function Button({ children, onClick }) { - return ; +export default function Button({ children, onClick, className }) { + return ( + + ); } From 867c779d0e0fa17d836a7cea35c5e793e11adcc1 Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 15:59:20 +0000 Subject: [PATCH 3/6] destructured props --- components/Fruit.js | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/components/Fruit.js b/components/Fruit.js index e86a2c7..0bbf696 100644 --- a/components/Fruit.js +++ b/components/Fruit.js @@ -1,36 +1,24 @@ -//individual fruit page -//more info on the fruit like description, price and add to cart option -//need to import image - import Image from 'next/image'; import Button from './Button'; import ctx from '@/store/ctx-obj'; -import React from 'react'; -import { useContext } from 'react'; +import React, { useContext } from 'react'; -export default function Fruitpage(props) { +export default function FruitPage(props) { + const { title, image_path, description, price } = props; + const addToBasket = () => cartCTX.addItem(props); const cartCTX = useContext(ctx); - const addToBasket = () => { - console.log('added to basket ', props); - cartCTX.addItem(props); - }; return ( <> -

{props.title}

+

{title}

- {props.title} + {title}
-

{props.description}

+

{description}

-

£ {props.price}

+

£ {price}

From cb502cf7045f32995be81808181e2dfc7a15b671 Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 16:17:09 +0000 Subject: [PATCH 4/6] checkpoint --- components/Fruit.js | 3 ++- components/FruitItem.js | 19 +++++++++---------- components/Navigation.js | 6 +----- database/schema.sql | 2 +- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/components/Fruit.js b/components/Fruit.js index 0bbf696..b899067 100644 --- a/components/Fruit.js +++ b/components/Fruit.js @@ -5,8 +5,9 @@ import React, { useContext } from 'react'; export default function FruitPage(props) { const { title, image_path, description, price } = props; - const addToBasket = () => cartCTX.addItem(props); + const cartCTX = useContext(ctx); + const addToBasket = () => cartCTX.addItem(props); return ( <> diff --git a/components/FruitItem.js b/components/FruitItem.js index 7811c6a..d1862c6 100644 --- a/components/FruitItem.js +++ b/components/FruitItem.js @@ -5,25 +5,24 @@ import React, { useContext } from 'react'; import ctx from '@/store/ctx-obj'; export default function FruitItem(props) { - const cartCTX = useContext(ctx); + const { id, title, image, price, link } = props; - const AddToBasketHandler = () => { - cartCTX.addItem(props); - }; + const cartCTX = useContext(ctx); + const addToBasket = () => cartCTX.addItem(props); return ( -
  • -

    {props.title}

    +
  • +

    {title}

    - {props.title} + {title}
    -

    £ {props.price}

    +

    £ {price}

    - See more at {props.title} + See more at {title}
    - +
    • ); } diff --git a/components/Navigation.js b/components/Navigation.js index 32af8ad..23e5952 100644 --- a/components/Navigation.js +++ b/components/Navigation.js @@ -1,9 +1,7 @@ -//nav bar import Link from 'next/link'; - import classes from './Navigation.module.css'; -function Navigation() { +export default function Navigation() { return (
    @@ -25,5 +23,3 @@ function Navigation() {
    ); } - -export default Navigation; diff --git a/database/schema.sql b/database/schema.sql index caca98f..aa5f9ec 100644 --- a/database/schema.sql +++ b/database/schema.sql @@ -3,7 +3,7 @@ BEGIN; CREATE TABLE IF NOT EXISTS fruits ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, - image_path TEXT , + image_path TEXT, price DECIMAL, fruit_description TEXT, fruit_type INTEGER REFERENCES fruit_types(id) From c0f2e9f97f7844c4abac0eeffa5195fb37539e58 Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 16:24:16 +0000 Subject: [PATCH 5/6] layout --- database/seed.js | 4 +--- database/seed.sql | 2 -- db.sqlite | Bin 20480 -> 20480 bytes layout/layout.js | 6 ++---- 4 files changed, 3 insertions(+), 9 deletions(-) diff --git a/database/seed.js b/database/seed.js index 850b1e9..4fe1275 100644 --- a/database/seed.js +++ b/database/seed.js @@ -1,9 +1,7 @@ -//id, title, image, price, desc, type: ref field -// type, id, name - import { readFileSync } from 'node:fs'; import { join } from 'node:path'; import db from './db.js'; + const seedPath = join('database', 'seed.sql'); const seed = readFileSync(seedPath, 'utf-8'); db.exec(seed); diff --git a/database/seed.sql b/database/seed.sql index c094c9b..c8df5df 100644 --- a/database/seed.sql +++ b/database/seed.sql @@ -19,5 +19,3 @@ VALUES (1, 'Citrus'), ON CONFLICT DO NOTHING; COMMIT; - -PRAGMA foreign_keys = ON; \ No newline at end of file diff --git a/db.sqlite b/db.sqlite index a2d795c7135e9cfc8cbd87e759a74520cf20f5c0..909b6a4697215f7223f5cd90c5e66b68953d1071 100644 GIT binary patch delta 51 zcmZozz}T>WaY7p383qWaY7p3X$BTP0|tIozRP?Dd{Z_HD(vB%Y{>VGGlG#_TvC#;nR~JUe?Fta J=K1`I4giwl4r2fS diff --git a/layout/layout.js b/layout/layout.js index 0fd3582..03ec750 100644 --- a/layout/layout.js +++ b/layout/layout.js @@ -2,14 +2,12 @@ import Cart from '@/components/Cart'; import CartProvider from '@/store/ContextProvider'; import Navigation from '../components/Navigation'; -function Layout(props) { +export default function Layout({ children }) { return ( -
    {props.children}
    +
    {children}
     ); } - -export default Layout; From 517126794691c2889e75d7cd4ee5c3956751baa4 Mon Sep 17 00:00:00 2001 From: Kr33L <105356599+Kr33L@users.noreply.github.com> Date: Wed, 22 Feb 2023 16:46:48 +0000 Subject: [PATCH 6/6] changes --- lib/data.js | 56 -------------------------------------- model/fruits.js | 24 ++++++++-------- model/types.js | 7 ----- pages/_app.js | 3 +- pages/fruits/[fruit_id].js | 16 +++++------ pages/fruits/berries.js | 1 - store/ContextProvider.js | 25 ++++++++--------- 7 files changed, 31 insertions(+), 101 deletions(-) delete mode 100644 lib/data.js delete mode 100644 model/types.js diff --git a/lib/data.js b/lib/data.js deleted file mode 100644 index d4fc269..0000000 --- a/lib/data.js +++ /dev/null @@ -1,56 +0,0 @@ -const types = ['Citrus', 'Berries']; -const fruits = [ - { - id: 1, - title: 'Orange', - image_path: '/images/orange.png', - price: 1.5, - fruit_description: - 'A great natural deodorizer. Simply throw the orange peels in a bin or in a stinky place and the smell is gone!', - fruit_type: types[0], - }, - { - id: 2, - title: 'Lemon', - image_path: '/images/lemon.png', - price: 1.8, - fruit_description: 'Great hair toner. Keep away from eyes.', - fruit_type: types[0], - }, - { - id: 3, - title: 'Lime', - image_path: '/images/lime.png', - price: 1.2, - fruit_description: - 'Keep away from UV light if handling the juice - the skin can become blistered, swollen or darker in colour.', - fruit_type: types[0], - }, - { - id: 4, - title: 'Goji berries', - image_path: '/images/goji.png', - price: 2.5, - fruit_description: - 'Do not eat more than 8 a day or else you get lead poisoning', - fruit_type: types[1], - }, - { - id: 5, - title: 'Blackberry', - image_path: '/images/blackberry.png', - price: 2.2, - fruit_description: 'Does not come with BBM unfortunately', - fruit_type: types[1], - }, - { - id: 6, - title: 'Banana pack of 6', - image_path: '/images/banana.png', - price: 1.0, - fruit_description: 'Yes they are berries', - fruit_type: types[1], - }, -]; - -export default fruits; diff --git a/model/fruits.js b/model/fruits.js index 83f9ea9..d8265ad 100644 --- a/model/fruits.js +++ b/model/fruits.js @@ -15,10 +15,6 @@ const select_all_fruits = db.prepare( ` ); -export function getAllFruits() { - return select_all_fruits.all(); -} - const select_fruit_by_id = db.prepare( /*sql*/ ` @@ -34,10 +30,6 @@ SELECT ` ); -export function getFruitById(id) { - return select_fruit_by_id.get(id); -} - const select_fruit_by_type = db.prepare( /*sql*/ ` @@ -54,10 +46,6 @@ SELECT ` ); -export function getFruitByType(type) { - return select_fruit_by_type.all(type); -} - const select_all_ids = db.prepare( /*sql*/ ` @@ -67,6 +55,18 @@ const select_all_ids = db.prepare( ` ); +export function getAllFruits() { + return select_all_fruits.all(); +} + export function getAllIds() { return select_all_ids.all(); } + +export function getFruitById(id) { + return select_fruit_by_id.get(id); +} + +export function getFruitByType(type) { + return select_fruit_by_type.all(type); +} diff --git a/model/types.js b/model/types.js deleted file mode 100644 index 61a4525..0000000 --- a/model/types.js +++ /dev/null @@ -1,7 +0,0 @@ -// functions that give us fruits with this type - -// functionality about type - -// get name by id - -// func for above \ No newline at end of file diff --git a/pages/_app.js b/pages/_app.js index d264ad5..9194117 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,11 +1,10 @@ -import Navigation from '@/components/Navigation'; import Layout from '@/layout/layout'; import '@/styles/globals.css'; export default function App({ Component, pageProps }) { return ( - {' '} + ); } diff --git a/pages/fruits/[fruit_id].js b/pages/fruits/[fruit_id].js index 7955af0..9ec45b0 100644 --- a/pages/fruits/[fruit_id].js +++ b/pages/fruits/[fruit_id].js @@ -2,21 +2,20 @@ import { getAllIds, getFruitById } from '@/model/fruits'; import Fruit from '@/components/Fruit'; export async function getStaticPaths() { - const arrIds = getAllIds().map((idObj) => ({ + const fruitIDs = getAllIds().map((fruit) => ({ params: { - fruit_id: idObj.id.toString(), + fruit_id: fruit.id.toString(), }, })); + return { - paths: arrIds, + paths: fruitIDs, fallback: false, }; } -export async function getStaticProps(context) { - const fruitId = context.params.fruit_id; //we receive this data when user visit this path, not during the build process - //fetch data from db for single fruit - const fruit = getFruitById(fruitId); +export async function getStaticProps({ params }) { + const fruit = getFruitById(params.fruit_id); return { props: { @@ -25,8 +24,7 @@ export async function getStaticProps(context) { }; } -export default function FruitDetail(props) { - const { fruitData } = props; +export default function FruitDetail({ fruitData }) { return ( { if (action.type === 'ADD') { - //action.value === fruit - let updatedItems; const fruitInCart = state.items.find( (fruit) => fruit.id === action.value.id ); + + const updatedTotalAmount = state.totalAmount + action.value.price; const fruit = { ...action.value }; + let updatedItems; + if (fruitInCart) { fruitInCart.items += 1; updatedItems = state.items.concat(); } else { fruit.items = 1; - updatedItems = state.items.concat(fruit); //returns new array + updatedItems = state.items.concat(fruit); } - console.log(fruit, '...fruit'); - //fruit.items - console.log(updatedItems, ' from Provider'); - const updatedTotalAmount = state.totalAmount + action.value.price; return { - //new state items: updatedItems, totalAmount: updatedTotalAmount, }; } + return defaultState; }; -const CartProvider = (props) => { +const CartProvider = ({ children }) => { const [cartState, dispatchCartAction] = useReducer(cartReducer, defaultState); + const addItemHandler = (item) => { dispatchCartAction({ type: 'ADD', value: item }); }; - const removeItemHandler = () => {}; + const cartCTX = { items: cartState.items, totalAmount: cartState.totalAmount, addItem: addItemHandler, - removeItem: removeItemHandler, }; + return ( - - {props.children} - + {children} ); };