From 22696314e8ef6a27f594e683549e806a67bc9bd2 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Wed, 27 Jan 2021 18:27:32 +0300 Subject: [PATCH 01/18] added TS support and a backend support using sql-lite --- .env | 7 ++ next-env.d.ts | 2 + package.json | 12 +- prisma/db | Bin 0 -> 40960 bytes prisma/schema.prisma | 30 +++++ prisma/seed.ts | 55 +++++++++ tsconfig.json | 20 ++++ utils/data.ts | 277 +++++++++++++++++++++++++++++++++++++++++++ yarn.lock | 73 +++++++++++- 9 files changed, 474 insertions(+), 2 deletions(-) create mode 100644 .env create mode 100644 next-env.d.ts create mode 100644 prisma/db create mode 100644 prisma/schema.prisma create mode 100644 prisma/seed.ts create mode 100644 tsconfig.json create mode 100644 utils/data.ts diff --git a/.env b/.env new file mode 100644 index 0000000..13ecaa1 --- /dev/null +++ b/.env @@ -0,0 +1,7 @@ +# Environment variables declared in this file are automatically made available to Prisma. +# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables + +# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite. +# See the documentation for all the connection string options: https://pris.ly/d/connection-strings + +DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..7b7aa2c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/package.json b/package.json index 1911a9d..2c5f152 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,13 @@ "scripts": { "dev": "next dev", "build": "next build", - "start": "next start" + "start": "next start", + "push-db": "npx prisma db push --preview-feature", + "seed-db": "npx ts-node prisma/seed.ts", + "db-studio": "npx prisma studio" }, "dependencies": { + "@prisma/client": "2.15.0", "@stripe/react-stripe-js": "^1.1.2", "@stripe/stripe-js": "^1.11.0", "autoprefixer": "^10.1.0", @@ -19,5 +23,11 @@ "react-toastify": "^6.2.0", "tailwindcss": "^2.0.2", "uuid": "^8.3.2" + }, + "devDependencies": { + "@prisma/cli": "2.15.0", + "@types/node": "^14.14.22", + "ts-node": "^9.1.1", + "typescript": "^4.1.3" } } diff --git a/prisma/db b/prisma/db new file mode 100644 index 0000000000000000000000000000000000000000..1d0249b14860ec56e61108eecf374ec04f8b0fdb GIT binary patch literal 40960 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 Jp?8L%{|=xcz>5F? literal 0 HcmV?d00001 diff --git a/prisma/schema.prisma b/prisma/schema.prisma new file mode 100644 index 0000000..1c760f9 --- /dev/null +++ b/prisma/schema.prisma @@ -0,0 +1,30 @@ +// This is your Prisma schema file, +// learn more about it in the docs: https://pris.ly/d/prisma-schema + +datasource db { + provider = "sqlite" + url = "file:./db" +} + +generator client { + provider = "prisma-client-js" +} + + +model Category { + id Int @id + name String + products Product[] @relation(references: [id]) + image String? +} + +model Product { + id Int @id + name String + price String + image String + brand String + categories Category[] @relation(references: [id]) + currentInventory Int + description String +} diff --git a/prisma/seed.ts b/prisma/seed.ts new file mode 100644 index 0000000..ba65e2b --- /dev/null +++ b/prisma/seed.ts @@ -0,0 +1,55 @@ +import { PrismaClient } from "@prisma/client" +import { categories, products } from "../utils/data" +const prisma = new PrismaClient() + +async function main() { + // creates categories + await Promise.all( + categories.map(({ name, id, image }) => + prisma.category.upsert({ + where: { id: id }, + update: {}, + create: { name, id, image }, + }) + ) + ) + await Promise.all( + products.map( + ({ + categories, // this is an array of ids + id, + name, + price, + image, + description, + brand, + currentInventory, + }) => + prisma.product.upsert({ + where: { id }, + update: {}, + create: { + id, + name, + price, + image, + description, + brand, + currentInventory, + categories: { + connect: categories.map((id) => ({ id })), + }, + }, + }) + ) + ) +} + +main() + .then(() => console.log(`Seeded data successfully`)) + .catch((e) => console.error(`Failed to seed data, ${e}`)) + .finally(async () => { + await prisma.$disconnect() + }) + +export default main diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..0f601cd --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "commonjs", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/utils/data.ts b/utils/data.ts new file mode 100644 index 0000000..7a962d8 --- /dev/null +++ b/utils/data.ts @@ -0,0 +1,277 @@ +interface ProductInterface { + id: number + name: string + categories: number[] + price: string + image: string + description: string + currentInventory: number + brand?: string +} + +interface CategoryInterface { + id?: number + image?: string + name: string +} + +export const categories: CategoryInterface[] = [ + { + id: 1, + name: "new arrivals", + image: "/products/couch1.png", + }, + { id: 2, name: "sofas", image: "/products/couch5.png" }, + { + id: 3, + name: "living room", + image: "/products/couch5.png", + }, + { + id: 4, + name: "on sale", + image: "/products/couch8.png", + }, + { + id: 5, + name: "chairs", + image: "/products/chair1.png", + }, +] + +export const products: ProductInterface[] = [ + { + id: 1, + categories: [1], + name: "Timber Gray Sofa", + price: "1000", + image: "/products/couch1.png", + description: + "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.", + brand: "Jason Bourne", + currentInventory: 4, + }, + { + id: 2, + categories: [2, 3], + name: "Carmel Brown Sofa", + price: "1000", + image: "/products/couch5.png", + description: + "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.", + brand: "Jason Bourne", + currentInventory: 2, + }, + { + id: 3, + categories: [1, 2], + name: "Mod Leather Sofa", + price: "800", + image: "/products/couch6.png", + description: + "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.", + brand: "Jason Bourne", + currentInventory: 8, + }, + { + id: 4, + categories: [1, 2], + name: "Thetis Gray Love Seat", + price: "900", + image: "/products/couch7.png", + description: + "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.", + brand: "Jason Bourne", + currentInventory: 10, + }, + { + id: 5, + categories: [4, 2], + name: "Sven Tan Matte", + price: "1200", + image: "/products/couch8.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 7, + }, + { + id: 6, + categories: [4, 2], + name: "Otis Malt Sofa", + price: "500", + image: "/products/couch9.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 13, + }, + { + id: 7, + categories: [4, 2], + name: "Ceni Brown 3 Seater", + price: "650", + image: "/products/couch10.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 9, + }, + { + id: 8, + categories: [2, 3], + name: "Jameson Jack Lounger", + price: "1230", + image: "/products/couch11.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 24, + }, + + { + id: 9, + categories: [2], + name: "Galaxy Blue Sofa", + price: "800", + image: "/products/couch2.png", + description: + "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.", + brand: "Jason Bourne", + currentInventory: 43, + }, + { + id: 10, + categories: [1, 2], + name: "Markus Green Love Seat", + price: "900", + image: "/products/couch3.png", + description: + "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.", + brand: "Jason Bourne", + currentInventory: 2, + }, + { + id: 11, + categories: [4, 2], + name: "Dabit Matte Black", + price: "1200", + image: "/products/couch4.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 14, + }, + + { + id: 12, + categories: [4, 5], + name: "Embrace Blue", + price: "300", + image: "/products/chair1.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 12, + }, + { + id: 13, + categories: [4, 5], + name: "Nord Lounger", + price: "825", + image: "/products/chair2.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 13, + }, + { + id: 14, + categories: [4, 5], + name: "Ceni Matte Oranve", + price: "720", + image: "/products/chair3.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 33, + }, + { + id: 15, + categories: [4, 5], + name: "Abisko Green Recliner", + price: "2000", + image: "/products/chair4.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 23, + }, + { + id: 16, + categories: [4, 5], + name: "Denim on Denim Single", + price: "1100", + image: "/products/chair5.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 13, + }, + { + id: 17, + categories: [4, 5], + name: "Levo Tan Lounge Chair", + price: "600", + image: "/products/chair6.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 15, + }, + + { + id: 18, + categories: [4, 5], + name: "Anime Tint Recliner", + price: "775", + image: "/products/chair7.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 44, + }, + { + id: 19, + categories: [4, 5], + name: "Josh Jones Red Chair", + price: "1200", + image: "/products/chair8.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 17, + }, + { + id: 20, + categories: [4, 5], + name: "Black Sand Lounge", + price: "1600", + image: "/products/chair9.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 28, + }, + { + id: 21, + categories: [4, 5], + name: "Mint Beige Workchair", + price: "550", + image: "/products/chair10.png", + description: + "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", + brand: "Jason Bourne", + currentInventory: 31, + }, +] diff --git a/yarn.lock b/yarn.lock index b7c36f8..9883ce3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -160,6 +160,30 @@ resolved "https://registry.yarnpkg.com/@opentelemetry/context-base/-/context-base-0.14.0.tgz#c67fc20a4d891447ca1a855d7d70fa79a3533001" integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw== +"@prisma/cli@2.15.0": + version "2.15.0" + resolved "https://registry.yarnpkg.com/@prisma/cli/-/cli-2.15.0.tgz#a979a67dbd606a966cf475686170128562590713" + integrity sha512-sF2mgn5oH5fL9/CKxS0tqojf0rK2BKODlEUqL+2s3YZqvJRSt4iFpiyjgajyd0wyTyv1k9LDHTV0yOD1mXDBsA== + dependencies: + "@prisma/engines" "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" + +"@prisma/client@2.15.0": + version "2.15.0" + resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.15.0.tgz#41ee22c60778b54aec0f6d4832c2d35fbf9eb423" + integrity sha512-3j4OoLpAGF104KAenUFJM9sU2+4jRP+RlrlYssBHkwBf+/5+2ihSpcmFiWIw1vXNRdmZtivjwhjcVtmjZPJktw== + dependencies: + "@prisma/engines-version" "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" + +"@prisma/engines-version@2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54": + version "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" + resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#d9c887bc8f30d1f107c9021b2565a8672d62622d" + integrity sha512-KDxk7Zsc9tDoShCE7v+O1SnCUTUkMdfezjbuz9CBvdEBGMtYLgyHaZAO8M038uqy8KjgwV9PzyoLqvVfzfsngg== + +"@prisma/engines@2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54": + version "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#3093ace7c09cf694214727c4e67109f2a2d8855a" + integrity sha512-AgPxAWtwYhhTNEEsV4lK63HTe9z0GAGL3ofMr2B0TncACmzi9lhdun9TTNie38Oy/3DLfr71TUHKUpV8QjOKUw== + "@stripe/react-stripe-js@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.1.2.tgz#a7f5ef5b4d7dc7fa723501b706644414cfe6dcba" @@ -177,6 +201,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== +"@types/node@^14.14.22": + version "14.14.22" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18" + integrity sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw== + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -469,6 +498,11 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.6" +arg@^4.1.0: + version "4.1.3" + resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089" + integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA== + arity-n@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745" @@ -1134,6 +1168,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-require@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" + integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ== + cross-fetch@3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" @@ -1344,6 +1383,11 @@ didyoumean@^1.2.1: resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8= +diff@^4.0.1: + version "4.0.2" + resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" + integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A== + diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" @@ -2379,6 +2423,11 @@ make-dir@^3.0.2: dependencies: semver "^6.0.0" +make-error@^1.1.1: + version "1.3.6" + resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" + integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== + map-cache@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf" @@ -3675,7 +3724,7 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: source-map-url "^0.4.0" urix "^0.1.0" -source-map-support@~0.5.12, source-map-support@~0.5.19: +source-map-support@^0.5.17, source-map-support@~0.5.12, source-map-support@~0.5.19: version "0.5.19" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw== @@ -4058,6 +4107,18 @@ traverse@0.6.6: resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= +ts-node@^9.1.1: + version "9.1.1" + resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-9.1.1.tgz#51a9a450a3e959401bda5f004a72d54b936d376d" + integrity sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg== + dependencies: + arg "^4.1.0" + create-require "^1.1.0" + diff "^4.0.1" + make-error "^1.1.1" + source-map-support "^0.5.17" + yn "3.1.1" + ts-pnp@^1.1.6: version "1.2.0" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" @@ -4100,6 +4161,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" + integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg== + union-value@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847" @@ -4339,6 +4405,11 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== +yn@3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" + integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q== + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" From 9d40e19a0ca1eebac0cb96c83f634d84668206cb Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Wed, 27 Jan 2021 18:58:32 +0300 Subject: [PATCH 02/18] update schema --- prisma/db | Bin 40960 -> 40960 bytes prisma/schema.prisma | 2 +- utils/data.ts | 44 +++++++++++++++++++++---------------------- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/prisma/db b/prisma/db index 1d0249b14860ec56e61108eecf374ec04f8b0fdb..10276400c1b9725500250e90da9c657ea37d1475 100644 GIT binary patch delta 2088 zcmai#Yitx%6vyY@nLD#HyE|v!eece;-BR#{A+@Q3Vku%sOQJ1N(Q3CaY&UIpWhoF5 z*p@9t8lu)kJ^(?9ABZs;aAFKXB1$A_c?6BY#6%LGQ2|X5{h-Ep&s-!?68ZA~&+p8= zd+*+R=A6;vbo4kqG;S&nFTTIidCnXo`d;`FmcvH)zzJH5pu9YhDj!KKDQ`^N_qG)X zs5Gzi7-tTTJw~-szp6{KX?bdGn3Ai`vDRr)U&?xPsfD(t$VBhb^sv1)pR<;xR}Na8 z`E|LBT~N+C9e180YOkV8t+c$et(wZ?&g*RpXkvU0)ulUVONwmIEJ_!K?IEkZkl&EA zy7Q~k^7qbE3sALD*QMKNIlnbZWy{&Vb&}NdGu#EAHqqO?-p*M)>73P-9vQKfLyo>_ zn#4u11yZ@Wg%|V%YsN63m|C>&1&100`|Ab!lY*m`;Aldy85eBU35Ht1P{R~mC)FYvuF{IQyb`Vy zfnbFg7K{lFL)Vf-u@QkX)$8eRam8iiAS7WGwsH+hs7YXr( z5xgN(E$C_h)c{vbRMqdQ57py!)j(BrS3RiwTR~M(bvNaig3nAwl_}4DUBe9Z$ylO%HSUol=4Z!D;_rT;H) zGdGsfduiRx3f?4%-?Z48G(J9?Tq~U0GdwP_CE7PrV^1Z?C0^oNQl&nhE~P|)UOe1iNUyZ5_Mvq)xz%ZXewt{d8*6&< z=3Qjf}r*%Ir{NGzS zMdG&iS`V7&?MU}$M?@##`{g~1_mk+v3~6}M(4{t9_PNDf>B8W;wft0U-gr9m>usx> zHy7T~=FM9`W0(^fElXy^*KEvJp7lIL%c^~NY%}kjcEsJ!!qFI27dk6O`4%%FH%Z2J zRZ>}V_U)P>$!zp`H|@&iMyz%_o3X7&@`b^b1LT*<5DGRyv)-FX2>hr_SA1O|^5* IvVGI!Z_S2;V*mgE delta 2329 zcmb`JYitx%6vyYz%$?cU$DDml-|fz}-SSXj+omlTs93}rJB*{>Tk=$vslNevYN!SeMVJH`{S3`DlB$oXs@>q5#(tOVL z`!&xEVk_o52i-&;?Qt1Wot1@5p;}#28_zAy%#v7UyW5bKhw5VF@S63BbkClCyE*MR zDSKVtpkucZKwg~TJ5Bgc2l}< zZ_2La+i=qLb@AM-7iNi_d59R&BNkh8ysI_2d#95Y6XL3TW4}D7%1=m=WcV0d8gij| zOM>6v4%~tt;5+yduEHFA0vF+ZI16vVX_$gn;RuYw2<(S6^gsu+!Is>ktInIl7G0na zqFS_y8S1AoRDN2CDo86(1!*~|5RIY=QJWdrpb>PMv<#glEky;i1QpO?R9;$y%1aB; zP+Gu@Oldxjg=ro-!^6}<8K7a50UAQ(qd`+^_yAsmMz{hu;Q-XbAml-nc^x{<+vXpz#rzbOKnhGKGq1rm z^M-jBHkg-lQGd!D)>XoeXD#GbwH65NuM*lH6FOKabg)9`P`S{dD7Ug<3%?l=ezQzy zC>0t?g!UE-?JW|P4j1x2WLh8s!uet#oF{a^5;_nT+7}Yq7ZlbL;8yndg;hXP4VG(@ zOU30AZkJbBw}%hA-C|fa#Q9~}#T}}qi#SaaR;4^%RmHHb2)EAe%eZ$l5R~9|_Pnpa z8F&+ZWH*$CUbqflz+LzmF2K9c1ef6wyw09{C+uK%coa6kQ?M0Up%Sbzn1Bq#VKJ;= z7k2>mK>-BW)m$)#@nKjCITs-PRh%(ou#&R^87k+DA`Kg9MmWomP|8_?^cHg#A!#9J z0WzG=nTHHmoMAf5gfE1`7esmjoPMMNoF>xcU`;?5z`` zE1a^z-nmbomNaET@?E9R=-(KJG|x?Cf}G;TRG%id|5;44i!)oxne(Ry)~`A8;F5X2 zQftbko*Po*f7aUUWKC2bjVY`$hO#>vEoB+2zhy%cq+&khx4nL)T*1C;DvfqfR?xAy zjb9kWFBOUsWPj7Ggn zl+Rf!;fpl&Cfa-KmPD$9b%Z^sE~mPlt#j_>SyHhpaIbNUwXJgo`}kHwjJ>)$kxa9| z?Dmt<$Y{*KW3%ZFwKXSt6Z`htO}%?q`(h0N(=hz}1Sv}R3@IiW)rP+GUyG%e)zsyR z$7YGv<>B4!;w0;Cc+zW=v!rtV-SIx{^$IB;oli@fW1I8-y}32Jccv5V4nILH+sBEK z8B)L-nKUh#`QAnHi|!Tbkmk5HNz=y;j_aelEY{dV+1}%YN*(Kw6LU{b&5~$$5c@07`s1nOZpUs-rUvXyPJ3@M<)j-L>T*-BVA@0YLxG2_?d$Kh z*Y>5Heiqgtvd**9e}XmQt}v$Tf4Ifm_LJ-edVue__*9X~E+C$3IK|%DXs5{*5u4^e W3iw;JH>MM*L8qZ6o>LCbkUs%dp2}1J diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 1c760f9..ef7bf26 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -21,7 +21,7 @@ model Category { model Product { id Int @id name String - price String + price Float image String brand String categories Category[] @relation(references: [id]) diff --git a/utils/data.ts b/utils/data.ts index 7a962d8..ae252f4 100644 --- a/utils/data.ts +++ b/utils/data.ts @@ -2,7 +2,7 @@ interface ProductInterface { id: number name: string categories: number[] - price: string + price: number image: string description: string currentInventory: number @@ -44,7 +44,7 @@ export const products: ProductInterface[] = [ id: 1, categories: [1], name: "Timber Gray Sofa", - price: "1000", + price: 1000, image: "/products/couch1.png", description: "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.", @@ -55,7 +55,7 @@ export const products: ProductInterface[] = [ id: 2, categories: [2, 3], name: "Carmel Brown Sofa", - price: "1000", + price: 1000, image: "/products/couch5.png", description: "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.", @@ -66,7 +66,7 @@ export const products: ProductInterface[] = [ id: 3, categories: [1, 2], name: "Mod Leather Sofa", - price: "800", + price: 800, image: "/products/couch6.png", description: "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.", @@ -77,7 +77,7 @@ export const products: ProductInterface[] = [ id: 4, categories: [1, 2], name: "Thetis Gray Love Seat", - price: "900", + price: 900, image: "/products/couch7.png", description: "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.", @@ -88,7 +88,7 @@ export const products: ProductInterface[] = [ id: 5, categories: [4, 2], name: "Sven Tan Matte", - price: "1200", + price: 1200, image: "/products/couch8.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -99,7 +99,7 @@ export const products: ProductInterface[] = [ id: 6, categories: [4, 2], name: "Otis Malt Sofa", - price: "500", + price: 500, image: "/products/couch9.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -110,7 +110,7 @@ export const products: ProductInterface[] = [ id: 7, categories: [4, 2], name: "Ceni Brown 3 Seater", - price: "650", + price: 650, image: "/products/couch10.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -121,7 +121,7 @@ export const products: ProductInterface[] = [ id: 8, categories: [2, 3], name: "Jameson Jack Lounger", - price: "1230", + price: 1230, image: "/products/couch11.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -133,7 +133,7 @@ export const products: ProductInterface[] = [ id: 9, categories: [2], name: "Galaxy Blue Sofa", - price: "800", + price: 800, image: "/products/couch2.png", description: "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.", @@ -144,7 +144,7 @@ export const products: ProductInterface[] = [ id: 10, categories: [1, 2], name: "Markus Green Love Seat", - price: "900", + price: 900, image: "/products/couch3.png", description: "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.", @@ -155,7 +155,7 @@ export const products: ProductInterface[] = [ id: 11, categories: [4, 2], name: "Dabit Matte Black", - price: "1200", + price: 1200, image: "/products/couch4.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -167,7 +167,7 @@ export const products: ProductInterface[] = [ id: 12, categories: [4, 5], name: "Embrace Blue", - price: "300", + price: 300, image: "/products/chair1.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -178,7 +178,7 @@ export const products: ProductInterface[] = [ id: 13, categories: [4, 5], name: "Nord Lounger", - price: "825", + price: 825, image: "/products/chair2.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -189,7 +189,7 @@ export const products: ProductInterface[] = [ id: 14, categories: [4, 5], name: "Ceni Matte Oranve", - price: "720", + price: 720, image: "/products/chair3.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -200,7 +200,7 @@ export const products: ProductInterface[] = [ id: 15, categories: [4, 5], name: "Abisko Green Recliner", - price: "2000", + price: 2000, image: "/products/chair4.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -211,7 +211,7 @@ export const products: ProductInterface[] = [ id: 16, categories: [4, 5], name: "Denim on Denim Single", - price: "1100", + price: 1100, image: "/products/chair5.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -222,7 +222,7 @@ export const products: ProductInterface[] = [ id: 17, categories: [4, 5], name: "Levo Tan Lounge Chair", - price: "600", + price: 600, image: "/products/chair6.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -234,7 +234,7 @@ export const products: ProductInterface[] = [ id: 18, categories: [4, 5], name: "Anime Tint Recliner", - price: "775", + price: 775, image: "/products/chair7.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -245,7 +245,7 @@ export const products: ProductInterface[] = [ id: 19, categories: [4, 5], name: "Josh Jones Red Chair", - price: "1200", + price: 1200, image: "/products/chair8.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -256,7 +256,7 @@ export const products: ProductInterface[] = [ id: 20, categories: [4, 5], name: "Black Sand Lounge", - price: "1600", + price: 1600, image: "/products/chair9.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", @@ -267,7 +267,7 @@ export const products: ProductInterface[] = [ id: 21, categories: [4, 5], name: "Mint Beige Workchair", - price: "550", + price: 550, image: "/products/chair10.png", description: "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.", From 91acdd9a365fc1c997733357bbad981ab5f7c514 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Wed, 27 Jan 2021 19:23:31 +0300 Subject: [PATCH 03/18] feature: fetch category inventory/data from the backend --- lib/prisma-client.ts | 4 ++ pages/category/[name].js | 82 ++++++++++++++++++++++------------------ 2 files changed, 49 insertions(+), 37 deletions(-) create mode 100644 lib/prisma-client.ts diff --git a/lib/prisma-client.ts b/lib/prisma-client.ts new file mode 100644 index 0000000..bfc339e --- /dev/null +++ b/lib/prisma-client.ts @@ -0,0 +1,4 @@ +import { PrismaClient } from "@prisma/client" + +const prisma = new PrismaClient() +export default prisma diff --git a/pages/category/[name].js b/pages/category/[name].js index 2ee4775..71a29de 100644 --- a/pages/category/[name].js +++ b/pages/category/[name].js @@ -1,69 +1,77 @@ -import Head from 'next/head' -import ListItem from '../../components/ListItem' -import { titleIfy, slugify } from '../../utils/helpers' -import fetchCategories from '../../utils/categoryProvider' -import inventoryForCategory from '../../utils/inventoryForCategory' -import CartLink from '../../components/CartLink' +import Head from "next/head" +import ListItem from "../../components/ListItem" +import { titleIfy, slugify } from "../../utils/helpers" +import fetchCategories from "../../utils/categoryProvider" +import CartLink from "../../components/CartLink" +import prismaClient from "../../lib/prisma-client" -const Category = (props) => { - const { inventory, title } = props +const Category = ({ inventory, title }) => { return ( <> Jamstack ECommerce - {title} - +
-
-
+
+

{titleIfy(title)}

-
- { - inventory.map((item, index) => { - return ( - - ) - }) - } +
+ {inventory.map((item, index) => { + return ( + + ) + })}
-
+
) } -export async function getStaticPaths () { +export async function getStaticPaths() { const categories = await fetchCategories() - const paths = categories.map(category => { - return { params: { name: slugify(category) }} + const paths = categories.map((category) => { + return { params: { name: slugify(category) } } }) return { paths, - fallback: false + fallback: false, } } -export async function getStaticProps ({ params }) { - const category = params.name.replace(/-/g," ") - const inventory = await inventoryForCategory(category) +export async function getStaticProps({ params }) { + const category = params.name.replace(/-/g, " ") + const products = await prismaClient.product.findMany({ + where: { + categories: { + some: { name: category }, + }, + }, + }) + return { props: { - inventory, - title: category - } + inventory: products, + title: category, + }, } } -export default Category \ No newline at end of file +export default Category From 5290b608a61097c25b4cf8f800122b8cc772acea Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Wed, 27 Jan 2021 20:16:29 +0300 Subject: [PATCH 04/18] feature: single sku fetch from backend and only allow quantities available in the inventory --- pages/product/[name].js | 92 +++++++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 41 deletions(-) diff --git a/pages/product/[name].js b/pages/product/[name].js index ed25b14..238cbd3 100644 --- a/pages/product/[name].js +++ b/pages/product/[name].js @@ -1,26 +1,34 @@ -import { useState } from 'react' -import Head from 'next/head' -import Button from '../../components/Button' -import Image from '../../components/Image' -import QuantityPicker from '../../components/QuantityPicker' -import { fetchInventory } from '../../utils/inventoryProvider' -import { slugify } from '../../utils/helpers' -import CartLink from '../../components/CartLink' -import { SiteContext, ContextProviderComponent } from '../../context/mainContext' +import { useState } from "react" +import Head from "next/head" +import Button from "../../components/Button" +import Image from "../../components/Image" +import QuantityPicker from "../../components/QuantityPicker" +import { fetchInventory } from "../../utils/inventoryProvider" +import { slugify } from "../../utils/helpers" +import CartLink from "../../components/CartLink" +import { + SiteContext, + ContextProviderComponent, +} from "../../context/mainContext" +import prismaClient from "../../lib/prisma-client" const ItemView = (props) => { const [numberOfitems, updateNumberOfItems] = useState(1) const { product } = props - const { price, image, name, description } = product - const { context: { addToCart }} = props + const { price, image, name, description, currentInventory } = product + const { + context: { addToCart }, + } = props - function addItemToCart (product) { + function addItemToCart(product) { product["quantity"] = numberOfitems addToCart(product) } function increment() { - updateNumberOfItems(numberOfitems + 1) + if (numberOfitems < currentInventory) { + updateNumberOfItems(numberOfitems + 1) + } } function decrement() { @@ -34,24 +42,24 @@ const ItemView = (props) => { Jamstack ECommerce - {name} - + -
-
-
+
+
+
Inventory item
-
-

{name}

-

${price}

-

{description}

+
+

+ {name} +

+

${price}

+

{description}

{ ) } -export async function getStaticPaths () { +export async function getStaticPaths() { const inventory = await fetchInventory() - const paths = inventory.map(item => { - return { params: { name: slugify(item.name) }} + const paths = inventory.map((item) => { + return { params: { name: slugify(item.name) } } }) return { paths, - fallback: false + fallback: false, } } -export async function getStaticProps ({ params }) { - const name = params.name.replace(/-/g," ") - const inventory = await fetchInventory() - const product = inventory.find(item => slugify(item.name) === slugify(name)) - +export async function getStaticProps({ params }) { + const name = params.name.replace(/-/g, " ") + const product = await prismaClient.product.findFirst({ + where: { + name: { + contains: name, + }, + }, + }) return { props: { product, - } + }, } } @@ -97,12 +109,10 @@ function ItemViewWithContext(props) { return ( - { - context => - } + {(context) => } ) } -export default ItemViewWithContext \ No newline at end of file +export default ItemViewWithContext From 4e45097a8ebfd406de8d3c25a62d0f4cf51de318 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 11:47:42 +0300 Subject: [PATCH 05/18] update deps and untracked sqlite file --- .gitignore | 4 +++ package.json | 1 + pages/index.js | 80 ++++++++++++++++++++++++------------------------- prisma/db | Bin 40960 -> 0 bytes prisma/seed.ts | 2 +- yarn.lock | 12 ++++++++ 6 files changed, 57 insertions(+), 42 deletions(-) delete mode 100644 prisma/db diff --git a/.gitignore b/.gitignore index 4be9d59..b072cfd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,8 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# ignore sqlite db file +prisma/db + # dependencies /node_modules /.pnp @@ -18,6 +21,7 @@ # misc .DS_Store *.pem +.vscode # debug npm-debug.log* diff --git a/package.json b/package.json index 2c5f152..f5481bb 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "devDependencies": { "@prisma/cli": "2.15.0", "@types/node": "^14.14.22", + "prisma": "^2.16.0", "ts-node": "^9.1.1", "typescript": "^4.1.3" } diff --git a/pages/index.js b/pages/index.js index 55d6a86..ffe92d5 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,15 @@ -import Head from 'next/head' -import { Center, Footer, Tag, Showcase, DisplaySmall, DisplayMedium } from '../components' -import { titleIfy, slugify } from '../utils/helpers' -import { fetchInventory } from '../utils/inventoryProvider' -import CartLink from '../components/CartLink' +import Head from "next/head" +import { + Center, + Footer, + Tag, + Showcase, + DisplaySmall, + DisplayMedium, +} from "../components" +import { titleIfy, slugify } from "../utils/helpers" +import { fetchInventory } from "../utils/inventoryProvider" +import CartLink from "../components/CartLink" const Home = ({ inventoryData = [], categories: categoryData = [] }) => { const inventory = inventoryData.slice(0, 4) @@ -14,41 +21,29 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
Jamstack ECommerce - + -
-
- +
+
+
-
+
-
- -
+
+ +
-
+
{ link={`/category/${slugify(categories[1].name)}`} />
-
-

Trending Now

-

Find the perfect piece or accessory to finish off your favorite room in the house.

+
+

Trending Now

+

+ Find the perfect piece or accessory to finish off your favorite room + in the house. +

-
+
{ export async function getStaticProps() { const inventory = await fetchInventory() - + const inventoryCategorized = inventory.reduce((acc, next) => { const categories = next.categories - categories.forEach(c => { - const index = acc.findIndex(item => item.name === c) + categories.forEach((c) => { + const index = acc.findIndex((item) => item.name === c) if (index !== -1) { const item = acc[index] item.itemCount = item.itemCount + 1 @@ -114,20 +112,20 @@ export async function getStaticProps() { const item = { name: c, image: next.image, - itemCount: 1 + itemCount: 1, } acc.push(item) } }) return acc }, []) - + return { props: { inventoryData: inventory, - categories: inventoryCategorized - } + categories: inventoryCategorized, + }, } } -export default Home \ No newline at end of file +export default Home diff --git a/prisma/db b/prisma/db deleted file mode 100644 index 10276400c1b9725500250e90da9c657ea37d1475..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 40960 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 Vur@WzG_M)AEHDjdz1|vn{cj|dyng@y diff --git a/prisma/seed.ts b/prisma/seed.ts index ba65e2b..e39bbb2 100644 --- a/prisma/seed.ts +++ b/prisma/seed.ts @@ -16,7 +16,7 @@ async function main() { await Promise.all( products.map( ({ - categories, // this is an array of ids + categories, id, name, price, diff --git a/yarn.lock b/yarn.lock index 9883ce3..c153c98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -184,6 +184,11 @@ resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#3093ace7c09cf694214727c4e67109f2a2d8855a" integrity sha512-AgPxAWtwYhhTNEEsV4lK63HTe9z0GAGL3ofMr2B0TncACmzi9lhdun9TTNie38Oy/3DLfr71TUHKUpV8QjOKUw== +"@prisma/engines@2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1": + version "2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1.tgz#c7a53f31eafca0e4c010663740ee22ea678f757e" + integrity sha512-vt8w+vqCEaTUGZes7mrY5BkF3zZIPTQ9x+C9Ynmr9d+WW54vTqJt7lDFS6eps0LYoqdcCHEs3r/SydCqjII+OQ== + "@stripe/react-stripe-js@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.1.2.tgz#a7f5ef5b4d7dc7fa723501b706644414cfe6dcba" @@ -3163,6 +3168,13 @@ pretty-hrtime@^1.0.3: resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= +prisma@^2.16.0: + version "2.16.0" + resolved "https://registry.yarnpkg.com/prisma/-/prisma-2.16.0.tgz#a4d3d82932f8aa4b4c5415d254bd9966ed9b5c33" + integrity sha512-tV+28U0dfmuC0lRWZlqI3PLx+5U2UFw4h5fikBexglXsMOE60S732UDnQPOKS/wztJE7EDS36lk6FInFVDpkPQ== + dependencies: + "@prisma/engines" "2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" From ad58922865d895bc50aa5462e64f529ee1aca2c9 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:12:55 +0300 Subject: [PATCH 06/18] docs: added getting started docs --- README.md | 181 +++--------------------------------------------------- 1 file changed, 10 insertions(+), 171 deletions(-) diff --git a/README.md b/README.md index b8d379e..4503094 100644 --- a/README.md +++ b/README.md @@ -1,181 +1,20 @@ ## Jamstack ECommerce Next -Jamstack ECommerce Next provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js. +### Important! -Out of the box, the site uses completely static data coming from a provider at `providers/inventoryProvider.js`. You can update this provider to fetch data from any real API by changing the call in the `getInventory` function. +This is a fork from [Nader's Jamstack Ecommerce Next][https://github.com/jamstack-cms/jamstack-ecommerce]. He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any dialect supported. -![Home](example-images/1.png) +## Getting Started -### Live preview +Start by cloning and installing dependacies. -Click [here](https://www.jamstackecommerce.dev/) to see a live preview. +`$ git clone https://github.com/joeynimu/jamstack-ecommerce.git` -
- Other Jamstack ECommerce pages +Navigate to the root of the cloned project folder and run +`$ yarn` if you are using yarn or `$ npm install` if you are using npm -### Category view -![Category view](example-images/2.png) +By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other support dialect. -### Item view -![Item view](example-images/3.png) +First you'd need to setup the db table structure by running `$ yarn push-db`. This will create an SQLite database for you and sync it with your schema that is defined inside the `prisma/schema.prisma` file. This data uses a file `db` stored in the `prisma` directory. -### Cart view -![Cart view](example-images/4.png) - -### Admin panel -![Admin panel](example-images/5.png) -
- -### Getting started - -1. Clone the project - -```sh -$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git -``` - -2. Install the dependencies: - -```sh -$ yarn - -# or - -$ npm install -``` - -3. Run the project - -```sh -$ npm run dev - -# or to build - -$ npm run build -``` - -## Deploy to Vercel - -Use the [Vercel CLI](https://vercel.com/download) - -```sh -vercel -``` - -## Deploy to AWS - -```sh -npx serverless -``` - -## About the project - -### Tailwind - -This project is styled using Tailwind. To learn more how this works, check out the Tailwind documentation [here](https://tailwindcss.com/docs). - -### Components - -The main files, components, and images you may want to change / modify are: - -__Logo__ - public/logo.png -__Button, ListItem, etc..__ - components -__Form components__ - components/formComponents -__Context (state)__ - context/mainContext.js -__Pages (admin, cart, checkout, index)__ - pages -__Templates (category view, single item view, inventory views)__ - templates - -### How it works - -As it is set up, inventory is fetched from a local hard coded array of inventory items. This can easily be configured to instead be fetched from a remote source like Shopify or another CMS or data source by changing the inventory provider. - -#### Configuring inventory provider - -Update __utils/inventoryProvider.js__ with your own inventory provider. - -#### Download images at build time - -If you change the provider to fetch images from a remote source, you may choose to also download the images locally at build time to improve performance. Here is an example of some code that should work for this use case: - -```javascript -import fs from 'fs' -import axios from 'axios' -import path from 'path' - -function getImageKey(url) { - const split = url.split('/') - const key = split[split.length - 1] - const keyItems = key.split('?') - const imageKey = keyItems[0] - return imageKey -} - -function getPathName(url, pathName = 'downloads') { - let reqPath = path.join(__dirname, '..') - let key = getImageKey(url) - key = key.replace(/%/g, "") - const rawPath = `${reqPath}/public/${pathName}/${key}` - return rawPath -} - -async function downloadImage (url) { - return new Promise(async (resolve, reject) => { - const path = getPathName(url) - const writer = fs.createWriteStream(path) - const response = await axios({ - url, - method: 'GET', - responseType: 'stream' - }) - response.data.pipe(writer) - writer.on('finish', resolve) - writer.on('error', reject) - }) -} - -export default downloadImage -``` - -You can use this function to map over the inventory data after fetching and replace the image paths with a reference to the location of the downloaded images, probably would look something like this: - -```javascript -await Promise.all( - inventory.map(async (item, index) => { - try { - const relativeUrl = `../downloads/${item.image}` - if (!fs.existsSync(`${__dirname}/public/downloads/${item.image}`)) { - await downloadImage(image) - } - inventory[index].image = relativeUrl - } catch (err) { - console.log('error downloading image: ', err) - } - }) -) -``` - -### Updating with Auth / Admin panel - -1. Update __pages/admin.js__ with sign up, sign, in, sign out, and confirm sign in methods. - -2. Update __components/ViewInventory.js__ with methods to interact with the actual inventory API. - -3. Update __components/formComponents/AddInventory.js__ with methods to add item to actual inventory API. - -### Roadmap - -- Full product and category search -- Auto dropdown navigation for large number of categories -- Ability to add more / more configurable metadata to item details -- Themeing + dark mode -- Optional user account / profiles out of the box -- Make Admin Panel responsive -- Have an idea or a request? Submit [an issue](https://github.com/jamstack-cms/jamstack-ecommerce/issues) or [a pull request](https://github.com/jamstack-cms/jamstack-ecommerce/pulls)! - -### Other considerations - -#### Server-side processing of payments - -To see an example of how to process payments server-side with stripe, check out the [Lambda function in the snippets folder](https://github.com/jamstack-cms/jamstack-ecommerce/blob/next/snippets/lambda.js). - -Also, consider verifying totals by passing in an array of IDs into the function, calculating the total on the server, then comparing the totals to check and make sure they match. \ No newline at end of file +At this point your database is in place but there's no data in it. There's a script in place that will `seed (add sample data for you)`. You can achieve this by running `$ yarn seed-db`. This will create some sample data for you From c1dce4fee5b6a76cb4d2c509ffc798215aee0f49 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:16:26 +0300 Subject: [PATCH 07/18] docs: added getting started docs --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4503094..7f4ef48 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,8 @@ By default, the project is configured to use `sqlite` but you can change this to First you'd need to setup the db table structure by running `$ yarn push-db`. This will create an SQLite database for you and sync it with your schema that is defined inside the `prisma/schema.prisma` file. This data uses a file `db` stored in the `prisma` directory. -At this point your database is in place but there's no data in it. There's a script in place that will `seed (add sample data for you)`. You can achieve this by running `$ yarn seed-db`. This will create some sample data for you +At this point your database is in place but there's no data in it. There's a script in place that will `seed (add sample data for you)`. You can achieve this by running `$ yarn seed-db`. This will create some sample data for you to get you started. + +Prisma comes with useful tool called Studio, it lets you view your tables and make any CRUD operations if you wish. To open studio run `$ yarn db-studio`, here you'll be able to view and edit your data. + +If you have done the above steps successfully, you are now ready to run the client with `$ yarn dev` From 0f970677e4500505a60146439b121fa16e756ecf Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:20:03 +0300 Subject: [PATCH 08/18] chore: ignore env file --- .env | 7 ------- .gitignore | 4 ++++ 2 files changed, 4 insertions(+), 7 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index 13ecaa1..0000000 --- a/.env +++ /dev/null @@ -1,7 +0,0 @@ -# Environment variables declared in this file are automatically made available to Prisma. -# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables - -# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite. -# See the documentation for all the connection string options: https://pris.ly/d/connection-strings - -DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" \ No newline at end of file diff --git a/.gitignore b/.gitignore index b072cfd..7036a11 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,9 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +#env files +.env +.env.local + # ignore sqlite db file prisma/db From 9ce73fbf0dce4cd3dace317cbada5af5aea3fa95 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:22:33 +0300 Subject: [PATCH 09/18] fix docs links --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7f4ef48..b3b3a3d 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ### Important! -This is a fork from [Nader's Jamstack Ecommerce Next][https://github.com/jamstack-cms/jamstack-ecommerce]. He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any dialect supported. +This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstack-cms/jamstack-ecommerce). He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any dialect supported. ## Getting Started From 76f1fb01dd7733d50dad4283972be8e57afd7b27 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:25:20 +0300 Subject: [PATCH 10/18] fix docs links --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b3b3a3d..fd63e66 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,12 @@ ### Important! -This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstack-cms/jamstack-ecommerce). He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any dialect supported. +This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstack-cms/jamstack-ecommerce). He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any supported database dialect. ## Getting Started +### Clone and Install Dependancies + Start by cloning and installing dependacies. `$ git clone https://github.com/joeynimu/jamstack-ecommerce.git` @@ -13,6 +15,8 @@ Start by cloning and installing dependacies. Navigate to the root of the cloned project folder and run `$ yarn` if you are using yarn or `$ npm install` if you are using npm +### Database Setup + By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other support dialect. First you'd need to setup the db table structure by running `$ yarn push-db`. This will create an SQLite database for you and sync it with your schema that is defined inside the `prisma/schema.prisma` file. This data uses a file `db` stored in the `prisma` directory. @@ -21,4 +25,6 @@ At this point your database is in place but there's no data in it. There's a scr Prisma comes with useful tool called Studio, it lets you view your tables and make any CRUD operations if you wish. To open studio run `$ yarn db-studio`, here you'll be able to view and edit your data. +### Running the Client + If you have done the above steps successfully, you are now ready to run the client with `$ yarn dev` From c6776c86c9f56f432a23f7fdc7a09a1ce395b985 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:35:38 +0300 Subject: [PATCH 11/18] docs: simplified docs --- README.md | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index fd63e66..a26e896 100644 --- a/README.md +++ b/README.md @@ -10,21 +10,15 @@ This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstac Start by cloning and installing dependacies. -`$ git clone https://github.com/joeynimu/jamstack-ecommerce.git` +- `$ git clone https://github.com/joeynimu/jamstack-ecommerce.git` -Navigate to the root of the cloned project folder and run -`$ yarn` if you are using yarn or `$ npm install` if you are using npm +- `$ yarn` if you are using yarn or `$ npm install` if you are using npm -### Database Setup +- `$ yarn push-db`: Creates the db structure +- `$ yarn seed-db`: Adds some sample data for you to start with +- `$ yarn dev`: Runs the NexJS application that reads data from your database +- `$ yarn db-studio`: Opens Prisma Studio wher you can view and edit your database -By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other support dialect. - -First you'd need to setup the db table structure by running `$ yarn push-db`. This will create an SQLite database for you and sync it with your schema that is defined inside the `prisma/schema.prisma` file. This data uses a file `db` stored in the `prisma` directory. - -At this point your database is in place but there's no data in it. There's a script in place that will `seed (add sample data for you)`. You can achieve this by running `$ yarn seed-db`. This will create some sample data for you to get you started. +### Backend Details -Prisma comes with useful tool called Studio, it lets you view your tables and make any CRUD operations if you wish. To open studio run `$ yarn db-studio`, here you'll be able to view and edit your data. - -### Running the Client - -If you have done the above steps successfully, you are now ready to run the client with `$ yarn dev` +By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other support dialect. From d030460a2ab8310242cc2f895e28f55c7157d259 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:52:08 +0300 Subject: [PATCH 12/18] typos --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a26e896..749841b 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,8 @@ Start by cloning and installing dependacies. - `$ yarn push-db`: Creates the db structure - `$ yarn seed-db`: Adds some sample data for you to start with - `$ yarn dev`: Runs the NexJS application that reads data from your database -- `$ yarn db-studio`: Opens Prisma Studio wher you can view and edit your database +- `$ yarn db-studio`: Opens Prisma Studio where you can view and edit your database ### Backend Details -By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other support dialect. +By default, the project is configured to use `sqlite` but you can change this to point to a `PostgreSQL` db instance or any other supported dialect. From e3e7b476f41f95a9821b7f64f5fc1a91cedea5f3 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 12:53:52 +0300 Subject: [PATCH 13/18] more typos --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 749841b..db7c147 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstac ### Clone and Install Dependancies -Start by cloning and installing dependacies. +Start by cloning and installing dependancies. - `$ git clone https://github.com/joeynimu/jamstack-ecommerce.git` From f2a4ca44b89107a3c060ca34dfcbe32292195daa Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 4 Feb 2021 14:22:20 +0300 Subject: [PATCH 14/18] update prisma and seeding script --- package.json | 3 +-- yarn.lock | 12 ------------ 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/package.json b/package.json index f5481bb..25ec13c 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "next build", "start": "next start", "push-db": "npx prisma db push --preview-feature", - "seed-db": "npx ts-node prisma/seed.ts", + "seed-db": "npx prisma db seed --preview-feature", "db-studio": "npx prisma studio" }, "dependencies": { @@ -25,7 +25,6 @@ "uuid": "^8.3.2" }, "devDependencies": { - "@prisma/cli": "2.15.0", "@types/node": "^14.14.22", "prisma": "^2.16.0", "ts-node": "^9.1.1", diff --git a/yarn.lock b/yarn.lock index c153c98..16701bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -160,13 +160,6 @@ resolved "https://registry.yarnpkg.com/@opentelemetry/context-base/-/context-base-0.14.0.tgz#c67fc20a4d891447ca1a855d7d70fa79a3533001" integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw== -"@prisma/cli@2.15.0": - version "2.15.0" - resolved "https://registry.yarnpkg.com/@prisma/cli/-/cli-2.15.0.tgz#a979a67dbd606a966cf475686170128562590713" - integrity sha512-sF2mgn5oH5fL9/CKxS0tqojf0rK2BKODlEUqL+2s3YZqvJRSt4iFpiyjgajyd0wyTyv1k9LDHTV0yOD1mXDBsA== - dependencies: - "@prisma/engines" "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" - "@prisma/client@2.15.0": version "2.15.0" resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.15.0.tgz#41ee22c60778b54aec0f6d4832c2d35fbf9eb423" @@ -179,11 +172,6 @@ resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#d9c887bc8f30d1f107c9021b2565a8672d62622d" integrity sha512-KDxk7Zsc9tDoShCE7v+O1SnCUTUkMdfezjbuz9CBvdEBGMtYLgyHaZAO8M038uqy8KjgwV9PzyoLqvVfzfsngg== -"@prisma/engines@2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54": - version "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" - resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#3093ace7c09cf694214727c4e67109f2a2d8855a" - integrity sha512-AgPxAWtwYhhTNEEsV4lK63HTe9z0GAGL3ofMr2B0TncACmzi9lhdun9TTNie38Oy/3DLfr71TUHKUpV8QjOKUw== - "@prisma/engines@2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1": version "2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1" resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1.tgz#c7a53f31eafca0e4c010663740ee22ea678f757e" From ac55e42577aef8c819978181dc706f78f8193827 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Mon, 1 Mar 2021 22:57:34 +0300 Subject: [PATCH 15/18] added backend for index/home and categories pages --- package.json | 2 + pages/categories.js | 74 ----------------------------------- pages/categories.tsx | 70 +++++++++++++++++++++++++++++++++ pages/{index.js => index.tsx} | 68 ++++++++++++++++++-------------- yarn.lock | 29 ++++++++++---- 5 files changed, 131 insertions(+), 112 deletions(-) delete mode 100644 pages/categories.js create mode 100644 pages/categories.tsx rename pages/{index.js => index.tsx} (74%) diff --git a/package.json b/package.json index 25ec13c..4e95e9f 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "dev": "next dev", "build": "next build", "start": "next start", + "generate": "npx prisma generate", "push-db": "npx prisma db push --preview-feature", "seed-db": "npx prisma db seed --preview-feature", "db-studio": "npx prisma studio" @@ -14,6 +15,7 @@ "@prisma/client": "2.15.0", "@stripe/react-stripe-js": "^1.1.2", "@stripe/stripe-js": "^1.11.0", + "@types/react": "^17.0.2", "autoprefixer": "^10.1.0", "next": "10.0.4", "postcss": "^8.2.2", diff --git a/pages/categories.js b/pages/categories.js deleted file mode 100644 index 58d7e92..0000000 --- a/pages/categories.js +++ /dev/null @@ -1,74 +0,0 @@ -import Head from 'next/head' -import { titleIfy , slugify } from '../utils/helpers' -import { DisplayMedium } from '../components' -import CartLink from '../components/CartLink' -import { fetchInventory } from '../utils/inventoryProvider' - -function Categories ({ categories = [] }) { - return ( - <> -
- - - Jamstack ECommerce - All Categories - - - -
-

All categories

-
-
- - {/*
*/} -
- { - categories.map((category, index) => ( - - )) - } -
-
-
- - ) -} - -export async function getStaticProps() { - const inventory = await fetchInventory() - const inventoryCategories = inventory.reduce((acc, next) => { - const categories = next.categories - categories.forEach(c => { - const index = acc.findIndex(item => item.name === c) - if (index !== -1) { - const item = acc[index] - item.itemCount = item.itemCount + 1 - acc[index] = item - } else { - const item = { - name: c, - image: next.image, - itemCount: 1 - } - acc.push(item) - } - }) - return acc - }, []) - - return { - props: { - categories: inventoryCategories - } - } -} - -export default Categories \ No newline at end of file diff --git a/pages/categories.tsx b/pages/categories.tsx new file mode 100644 index 0000000..e61213f --- /dev/null +++ b/pages/categories.tsx @@ -0,0 +1,70 @@ +import Head from "next/head" +import { titleIfy, slugify } from "../utils/helpers" +import { DisplayMedium } from "../components" +import CartLink from "../components/CartLink" +import prisma from "../lib/prisma-client" +import { FC } from "react" +import { Category, Product } from "@prisma/client" + +type categoryType = Category & { + products: Product[] +} + +type Props = { + categories: categoryType[] +} + +const Categories: FC = ({ categories = [] }) => { + return ( + <> +
+ + + Jamstack ECommerce - All Categories + + + +
+

All categories

+
+
+ {/*
*/} +
+ {categories.map((category, index) => ( + + ))} +
+
+
+ + ) +} + +export async function getStaticProps() { + const categories = await prisma.category.findMany({ + include: { + products: true, + }, + }) + + return { + props: { + categories, + }, + } +} + +export default Categories diff --git a/pages/index.js b/pages/index.tsx similarity index 74% rename from pages/index.js rename to pages/index.tsx index ffe92d5..333102e 100644 --- a/pages/index.js +++ b/pages/index.tsx @@ -7,11 +7,29 @@ import { DisplaySmall, DisplayMedium, } from "../components" +import { FC } from "react" import { titleIfy, slugify } from "../utils/helpers" -import { fetchInventory } from "../utils/inventoryProvider" import CartLink from "../components/CartLink" +import prismaClient from "../lib/prisma-client" +import { Category, Product } from "@prisma/client" -const Home = ({ inventoryData = [], categories: categoryData = [] }) => { +type inventoryDataType = Product & { + categories: Category[] +} + +type categoryDataType = Category & { + products: Product[] +} + +type Props = { + inventoryData: inventoryDataType[] | [] + categories: categoryDataType[] | [] +} + +const Home: FC = ({ + inventoryData = [], + categories: categoryData = [], +}) => { const inventory = inventoryData.slice(0, 4) const categories = categoryData.slice(0, 2) @@ -46,13 +64,13 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
@@ -68,28 +86,28 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
@@ -98,32 +116,22 @@ const Home = ({ inventoryData = [], categories: categoryData = [] }) => { } export async function getStaticProps() { - const inventory = await fetchInventory() + const categories = await prismaClient.category.findMany({ + include: { + products: true, + }, + }) - const inventoryCategorized = inventory.reduce((acc, next) => { - const categories = next.categories - categories.forEach((c) => { - const index = acc.findIndex((item) => item.name === c) - if (index !== -1) { - const item = acc[index] - item.itemCount = item.itemCount + 1 - acc[index] = item - } else { - const item = { - name: c, - image: next.image, - itemCount: 1, - } - acc.push(item) - } - }) - return acc - }, []) + const inventoryData = await prismaClient.product.findMany({ + include: { + categories: true, + }, + }) return { props: { - inventoryData: inventory, - categories: inventoryCategorized, + inventoryData, + categories, }, } } diff --git a/yarn.lock b/yarn.lock index 16701bc..bc01691 100644 --- a/yarn.lock +++ b/yarn.lock @@ -172,10 +172,10 @@ resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#d9c887bc8f30d1f107c9021b2565a8672d62622d" integrity sha512-KDxk7Zsc9tDoShCE7v+O1SnCUTUkMdfezjbuz9CBvdEBGMtYLgyHaZAO8M038uqy8KjgwV9PzyoLqvVfzfsngg== -"@prisma/engines@2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1": - version "2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1" - resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1.tgz#c7a53f31eafca0e4c010663740ee22ea678f757e" - integrity sha512-vt8w+vqCEaTUGZes7mrY5BkF3zZIPTQ9x+C9Ynmr9d+WW54vTqJt7lDFS6eps0LYoqdcCHEs3r/SydCqjII+OQ== +"@prisma/engines@2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223": + version "2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223.tgz#08bc3633fd27fb1935805ef16c37802ed713db5b" + integrity sha512-FKjVD6NYbGiQhwas3hA2uMpNchz+Mf3tv5qA8Ci9cAkKHGqt3jWjjUAK9juVBqeOcv4OPimQYMrkRX6SvaxBjg== "@stripe/react-stripe-js@^1.1.2": version "1.1.2" @@ -199,6 +199,19 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18" integrity sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw== +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== + +"@types/react@^17.0.2": + version "17.0.2" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8" + integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -3157,11 +3170,11 @@ pretty-hrtime@^1.0.3: integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= prisma@^2.16.0: - version "2.16.0" - resolved "https://registry.yarnpkg.com/prisma/-/prisma-2.16.0.tgz#a4d3d82932f8aa4b4c5415d254bd9966ed9b5c33" - integrity sha512-tV+28U0dfmuC0lRWZlqI3PLx+5U2UFw4h5fikBexglXsMOE60S732UDnQPOKS/wztJE7EDS36lk6FInFVDpkPQ== + version "2.17.0" + resolved "https://registry.yarnpkg.com/prisma/-/prisma-2.17.0.tgz#686469914ed13d4b0926ee5f17efb7a9ab741e8a" + integrity sha512-NypJI7OCXCfDkRKubbVb3nmPeRJ1SjQfg6QAwK06KsreBZl1F96rFz2iB2bl4kIrhLAbIySBjwUJlG87Jsxt7g== dependencies: - "@prisma/engines" "2.16.0-44.854c8ba7f0dce66f115af36af24e66989a8c02a1" + "@prisma/engines" "2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223" process-nextick-args@~2.0.0: version "2.0.1" From 09cb93fe5d52c0a8cc83602eb2893838cda2502c Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Tue, 20 Apr 2021 20:11:44 +0300 Subject: [PATCH 16/18] es6 object omit --- prisma/seed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/prisma/seed.ts b/prisma/seed.ts index e39bbb2..ad76eb3 100644 --- a/prisma/seed.ts +++ b/prisma/seed.ts @@ -7,7 +7,7 @@ async function main() { await Promise.all( categories.map(({ name, id, image }) => prisma.category.upsert({ - where: { id: id }, + where: { id }, update: {}, create: { name, id, image }, }) From 1ab4c69c99d737f026f32b17134025de65d7ea1a Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Tue, 20 Apr 2021 20:27:25 +0300 Subject: [PATCH 17/18] update dependancies --- package.json | 8 +++---- prisma/schema.prisma | 3 +-- yarn.lock | 52 ++++++++++++++++++++++---------------------- 3 files changed, 31 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 4e95e9f..8413f6e 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "db-studio": "npx prisma studio" }, "dependencies": { - "@prisma/client": "2.15.0", + "@prisma/client": "^2.21.2", "@stripe/react-stripe-js": "^1.1.2", "@stripe/stripe-js": "^1.11.0", "@types/react": "^17.0.2", @@ -27,9 +27,9 @@ "uuid": "^8.3.2" }, "devDependencies": { - "@types/node": "^14.14.22", - "prisma": "^2.16.0", + "@types/node": "^14.14.41", + "prisma": "^2.21.2", "ts-node": "^9.1.1", - "typescript": "^4.1.3" + "typescript": "^4.2.4" } } diff --git a/prisma/schema.prisma b/prisma/schema.prisma index ef7bf26..e7a82da 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -10,7 +10,6 @@ generator client { provider = "prisma-client-js" } - model Category { id Int @id name String @@ -27,4 +26,4 @@ model Product { categories Category[] @relation(references: [id]) currentInventory Int description String -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index bc01691..5428120 100644 --- a/yarn.lock +++ b/yarn.lock @@ -160,22 +160,22 @@ resolved "https://registry.yarnpkg.com/@opentelemetry/context-base/-/context-base-0.14.0.tgz#c67fc20a4d891447ca1a855d7d70fa79a3533001" integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw== -"@prisma/client@2.15.0": - version "2.15.0" - resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.15.0.tgz#41ee22c60778b54aec0f6d4832c2d35fbf9eb423" - integrity sha512-3j4OoLpAGF104KAenUFJM9sU2+4jRP+RlrlYssBHkwBf+/5+2ihSpcmFiWIw1vXNRdmZtivjwhjcVtmjZPJktw== +"@prisma/client@^2.21.2": + version "2.21.2" + resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.21.2.tgz#ca8489832da1d61add429390210be4d7896e5e29" + integrity sha512-UjkOXYpxLuHyoMDsP2m0LTcxhrjQa1dEOLFe3aDrO/BLrs/2yUxyPdtwSKxizRXFzuXSGkKIK225vcjZRuMpAg== dependencies: - "@prisma/engines-version" "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" + "@prisma/engines-version" "2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d" -"@prisma/engines-version@2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54": - version "2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54" - resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-2.15.0-25.e51dc3b5a9ee790a07104bec1c9477d51740fe54.tgz#d9c887bc8f30d1f107c9021b2565a8672d62622d" - integrity sha512-KDxk7Zsc9tDoShCE7v+O1SnCUTUkMdfezjbuz9CBvdEBGMtYLgyHaZAO8M038uqy8KjgwV9PzyoLqvVfzfsngg== +"@prisma/engines-version@2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d": + version "2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d" + resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d.tgz#b749bae4173eb766dafc298aaa7d883c2dbe555b" + integrity sha512-9/fE1gdPWmjbMjXUJjrTMt848TsgEnSjZCcJ1wu9OAcRlAKKJBLehftqC3gSEShDijvMYgeTdGU5snMpwmv4vg== -"@prisma/engines@2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223": - version "2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223" - resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223.tgz#08bc3633fd27fb1935805ef16c37802ed713db5b" - integrity sha512-FKjVD6NYbGiQhwas3hA2uMpNchz+Mf3tv5qA8Ci9cAkKHGqt3jWjjUAK9juVBqeOcv4OPimQYMrkRX6SvaxBjg== +"@prisma/engines@2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d": + version "2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d.tgz#aafed60c9506bc766e49ea60b9f8ce7da2385bc6" + integrity sha512-L57tvSoom2GDWDqik4wrAUBvLTAv5MTm2OOzNMBKsv0w5cX7ONoZ8KnGQN+csmdJpQVBs93dIvIBm72OO+l/9Q== "@stripe/react-stripe-js@^1.1.2": version "1.1.2" @@ -194,10 +194,10 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== -"@types/node@^14.14.22": - version "14.14.22" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18" - integrity sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw== +"@types/node@^14.14.41": + version "14.14.41" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615" + integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g== "@types/prop-types@*": version "15.7.3" @@ -3169,12 +3169,12 @@ pretty-hrtime@^1.0.3: resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= -prisma@^2.16.0: - version "2.17.0" - resolved "https://registry.yarnpkg.com/prisma/-/prisma-2.17.0.tgz#686469914ed13d4b0926ee5f17efb7a9ab741e8a" - integrity sha512-NypJI7OCXCfDkRKubbVb3nmPeRJ1SjQfg6QAwK06KsreBZl1F96rFz2iB2bl4kIrhLAbIySBjwUJlG87Jsxt7g== +prisma@^2.21.2: + version "2.21.2" + resolved "https://registry.yarnpkg.com/prisma/-/prisma-2.21.2.tgz#a73b4cbe92a884aa98b317684d6741871b5e94a5" + integrity sha512-Ux9ovDIUHsMNLGLtuo6BBKCuuBVLpZmhM2LXF+VBUQvsbmsVfp3u5CRyHGEqaZqMibYQJISy7YZYF/RgozHKkQ== dependencies: - "@prisma/engines" "2.17.0-35.3c463ebd78b1d21d8fdacdd27899e280cf686223" + "@prisma/engines" "2.21.0-36.e421996c87d5f3c8f7eeadd502d4ad402c89464d" process-nextick-args@~2.0.0: version "2.0.1" @@ -4174,10 +4174,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.1.3: - version "4.1.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" - integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg== +typescript@^4.2.4: + version "4.2.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961" + integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg== union-value@^1.0.0: version "1.0.1" From 6d4a1c42b20a271a7d71c9b668d6cf6e44fc9d09 Mon Sep 17 00:00:00 2001 From: Joe Ng'ethe Date: Thu, 6 May 2021 09:49:24 +0300 Subject: [PATCH 18/18] updates --- .gitignore | 1 + README.md | 4 ++++ pages/categories.tsx | 1 + pages/category/[name].js | 1 + pages/index.tsx | 3 +++ pages/product/[name].js | 11 ++++++----- 6 files changed, 16 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 7036a11..ad6fe12 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ # ignore sqlite db file prisma/db +prisma/migrations/** # dependencies /node_modules diff --git a/README.md b/README.md index db7c147..9ff8b67 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ This is a fork from [Nader's Jamstack Ecommerce Next](https://github.com/jamstack-cms/jamstack-ecommerce). He has done all the work with setting up and building the UI among other things. This fork shows you how you can add a backend using Prisma using any supported database dialect. +## Walkthrough/Tuitorial + +If you prefer a walkthrough, I have written a [detailed blog post here](https://joeynimu.com/how-to-build-a-full-stack-jamstack-e-commerce-app-with-nextjs-and-prisma) + ## Getting Started ### Clone and Install Dependancies diff --git a/pages/categories.tsx b/pages/categories.tsx index e61213f..9c1b6c0 100644 --- a/pages/categories.tsx +++ b/pages/categories.tsx @@ -64,6 +64,7 @@ export async function getStaticProps() { props: { categories, }, + revalidate: 1, } } diff --git a/pages/category/[name].js b/pages/category/[name].js index 71a29de..5effcaa 100644 --- a/pages/category/[name].js +++ b/pages/category/[name].js @@ -71,6 +71,7 @@ export async function getStaticProps({ params }) { inventory: products, title: category, }, + revalidate: 1, } } diff --git a/pages/index.tsx b/pages/index.tsx index 333102e..0201228 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -33,6 +33,8 @@ const Home: FC = ({ const inventory = inventoryData.slice(0, 4) const categories = categoryData.slice(0, 2) + console.log({ inventory, categories }) + return ( <> @@ -133,6 +135,7 @@ export async function getStaticProps() { inventoryData, categories, }, + revalidate: 1, } } diff --git a/pages/product/[name].js b/pages/product/[name].js index 238cbd3..82d1d2a 100644 --- a/pages/product/[name].js +++ b/pages/product/[name].js @@ -4,13 +4,13 @@ import Button from "../../components/Button" import Image from "../../components/Image" import QuantityPicker from "../../components/QuantityPicker" import { fetchInventory } from "../../utils/inventoryProvider" -import { slugify } from "../../utils/helpers" +import { slugify } from "utils/helpers" import CartLink from "../../components/CartLink" import { SiteContext, ContextProviderComponent, } from "../../context/mainContext" -import prismaClient from "../../lib/prisma-client" +import prismaClient from "lib/prisma-client" const ItemView = (props) => { const [numberOfitems, updateNumberOfItems] = useState(1) @@ -79,9 +79,9 @@ const ItemView = (props) => { } export async function getStaticPaths() { - const inventory = await fetchInventory() - const paths = inventory.map((item) => { - return { params: { name: slugify(item.name) } } + const products = await prismaClient.product.findMany() + const paths = products.map((product) => { + return { params: { name: slugify(product.name) } } }) return { paths, @@ -102,6 +102,7 @@ export async function getStaticProps({ params }) { props: { product, }, + revalidate: 1, } }