Refactor

components/Button.js

@@ -1,5 +1,7 @@
-//button
-
-export default function Button({ children, onClick }) {
-  return <button onClick={onClick}>{children}</button>;
+export default function Button({ children, onClick, className }) {
+  return (
+    <button className={className} onClick={onClick}>
+      {children}
+    </button>
+  );
 }

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() {
         <div>
           <h1>Cart</h1>
           <ul>
-            {items.map((el) => (
-              <li key={el.id + Math.random()}>
-                <p>{el.title}</p>
-                <p>items: {el.items}</p>
+            {items.map((element) => (
+              <li key={element.id + Math.random()}>
+                <p>{element.title}</p>
+                <p>items: {element.items}</p>
               </li>
             ))}
           </ul>

components/Fruit.js

@@ -1,36 +1,25 @@
-//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) {
+  const { title, image_path, description, price } = props;
 
-export default function Fruitpage(props) {
   const cartCTX = useContext(ctx);
-  const addToBasket = () => {
-    console.log('added to basket ', props);
+  const addToBasket = () => cartCTX.addItem(props);
 
-    cartCTX.addItem(props);
-  };
   return (
     <>
-      <h1>{props.title}</h1>
+      <h1>{title}</h1>
       <div>
-        <Image
-          src={props.image_path}
-          alt={props.title}
-          width="300"
-          height="300"
-        />
+        <Image src={image_path} alt={title} width="300" height="300" />
       </div>
       <div>
-        <p>{props.description}</p>
+        <p>{description}</p>
       </div>
       <div>
-        <p>£ {props.price}</p>
+        <p>£ {price}</p>
       </div>
       <Button onClick={addToBasket}>Add to Cart</Button>
     </>

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 (
-    <li id={props.id}>
-      <h3>{props.title}</h3>
+    <li id={id}>
+      <h3>{title}</h3>
       <div>
         <div>
-          <Image src={props.image} alt={props.title} width="40" height="40" />
+          <Image src={image} alt={title} width="40" height="40" />
         </div>
-        <p>£ {props.price}</p>
+        <p>£ {price}</p>
       </div>
       <div>
-        <Link href={props.link}>See more at {props.title}</Link>
+        <Link href={link}>See more at {title}</Link>
       </div>
-      <Button onClick={AddToBasketHandler}>Add to Cart</Button>
+      <Button onClick={addToBasket}>Add to Cart</Button>
     </li>
   );
 }

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 (
     <header className={classes.header}>
       <Link href="/">
@@ -25,5 +23,3 @@ function Navigation() {
     </header>
   );
 }
-
-export default Navigation;

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)

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);

database/seed.sql

@@ -19,5 +19,3 @@ VALUES (1, 'Citrus'),
     ON CONFLICT DO NOTHING;
 
 COMMIT;
-
-PRAGMA foreign_keys = ON;

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 (
     <CartProvider>
       <Navigation />
-      <main className="layout-main">{props.children}</main>
+      <main className="layout-main">{children}</main>
       <Cart />
     </CartProvider>
   );
 }
-
-export default Layout;

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);
+}

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 (
     <Layout>
-      <Component {...pageProps} />{' '}
+      <Component {...pageProps} />
     </Layout>
   );
 }

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 (
     <Fruit
       id={fruitData.id}

pages/fruits/berries.js

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import Head from 'next/head';
 import FruitList from '@/components/FruitList';
 import { getFruitByType } from '@/model/fruits.js';