From 69fd397b3b6ae68b2d3a223b8936dada9d490590 Mon Sep 17 00:00:00 2001 From: SameeraChinta13 Date: Tue, 3 Jun 2025 07:41:37 -0700 Subject: [PATCH 001/119] Added columns and routes --- package-lock.json | 166 +++++++++++++++++++++++++++++++++++++++-- package.json | 3 +- server/models/Item.js | 14 +++- server/routes/items.js | 46 +++++++++++- 4 files changed, 220 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index c54e745..c32a736 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "sequelize": "^6.37.7", - "sqlite3": "^5.1.7" + "sqlite3": "^5.1.7", + "styled-components": "^6.1.18" }, "devDependencies": { "@babel/preset-env": "^7.27.2", @@ -1857,6 +1858,27 @@ "dev": true, "license": "MIT" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -4683,6 +4705,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/validator": { "version": "13.15.0", "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.0.tgz", @@ -5466,6 +5494,15 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001718", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz", @@ -5783,6 +5820,26 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -5814,9 +5871,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/data-urls": { "version": "2.0.0", @@ -9261,6 +9316,24 @@ "node-gyp-build-optional-packages-test": "build-test.js" } }, + "node_modules/nanoid": { + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/napi-build-utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz", @@ -9824,7 +9897,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -9873,11 +9945,38 @@ "node": ">= 0.4" } }, + "node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true, "license": "MIT" }, "node_modules/prebuild-install": { @@ -10687,6 +10786,12 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "license": "ISC" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -10928,6 +11033,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -11103,6 +11217,46 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.18", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.18.tgz", + "integrity": "sha512-Mvf3gJFzZCkhjY2Y/Fx9z1m3dxbza0uI9H1CbNZm/jSHCojzJhQ0R7bByrlFJINnMzz/gPulpoFFGymNwrsMcw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.49", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 6d6102f..15efd28 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "sequelize": "^6.37.7", - "sqlite3": "^5.1.7" + "sqlite3": "^5.1.7", + "styled-components": "^6.1.18" }, "devDependencies": { "@babel/preset-env": "^7.27.2", diff --git a/server/models/Item.js b/server/models/Item.js index 764313c..e60dbce 100644 --- a/server/models/Item.js +++ b/server/models/Item.js @@ -5,11 +5,23 @@ class Item extends Model {} Item.init( { - // Define your columns here + name: { + type: DataTypes.STRING, + allowNull: false, + }, + price: { + type: DataTypes.FLOAT, + allowNull: false, + }, + description: { + type: DataTypes.TEXT, + }, }, { sequelize, + modelName: "Item", } ); + module.exports = Item; diff --git a/server/routes/items.js b/server/routes/items.js index 9ec053a..f918975 100644 --- a/server/routes/items.js +++ b/server/routes/items.js @@ -5,5 +5,49 @@ const router = express.Router(); router.use(express.json()); // Define your routes here - +// GET all items +router.get("/", async (req, res) => { + const items = await Item.findAll(); + res.json(items); + }); + + // GET one item + router.get("/:id", async (req, res) => { + const item = await Item.findByPk(req.params.id); + if (!item) return res.status(404).json({ error: "Item not found" }); + res.json(item); + }); + + // CREATE new item + router.post("/", async (req, res) => { + try { + const newItem = await Item.create(req.body); + res.status(201).json(newItem); + } catch (err) { + res.status(400).json({ error: err.message }); + } + }); + + // UPDATE item + router.put("/:id", async (req, res) => { + const item = await Item.findByPk(req.params.id); + if (!item) return res.status(404).json({ error: "Item not found" }); + + try { + await item.update(req.body); + res.json(item); + } catch (err) { + res.status(400).json({ error: err.message }); + } + }); + + // DELETE item + router.delete("/:id", async (req, res) => { + const item = await Item.findByPk(req.params.id); + if (!item) return res.status(404).json({ error: "Item not found" }); + + await item.destroy(); + res.json({ message: "Item deleted" }); + }); + module.exports = router; From 504f4f41ac31511a44fd5d972524cb7b10e70f5e Mon Sep 17 00:00:00 2001 From: SameeraChinta13 Date: Tue, 3 Jun 2025 07:52:16 -0700 Subject: [PATCH 002/119] Added category and image columns --- server/models/Item.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/server/models/Item.js b/server/models/Item.js index e60dbce..362b3b8 100644 --- a/server/models/Item.js +++ b/server/models/Item.js @@ -16,6 +16,14 @@ Item.init( description: { type: DataTypes.TEXT, }, + category: { + type: DataTypes.STRING, + allowNull: false + }, + image: { + type: DataTypes.STRING, + allowNull: false + } }, { sequelize, From 3394b50bf7bfe5662e5cb6cb94f40165fda4c227 Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 11:37:55 -0500 Subject: [PATCH 003/119] add Header component into App --- public/react/components/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/react/components/App.js b/public/react/components/App.js index 8ac41fe..942cdd4 100644 --- a/public/react/components/App.js +++ b/public/react/components/App.js @@ -1,4 +1,5 @@ import React, { useEffect, useState } from "react"; +import Header from "./Header"; // Prepend the API URL to any fetch calls. import apiURL from "../api"; @@ -12,7 +13,7 @@ function App() { return ( <> -

Inventory App

+
{/* Render the items */} ); From bc3acc4236333c02ef2e1be18677dc4372329151 Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 11:38:22 -0500 Subject: [PATCH 004/119] create Header component --- public/react/components/Header.jsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 public/react/components/Header.jsx diff --git a/public/react/components/Header.jsx b/public/react/components/Header.jsx new file mode 100644 index 0000000..7f13e46 --- /dev/null +++ b/public/react/components/Header.jsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +const HeaderWrapper = styled.div` + background-color: gray; + height: 4rem; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; +` + +export default function Header() { + return ( + <> + + + + + ) +} From 94c33568d7f965159116da70785e9b50a48d201e Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 11:41:30 -0500 Subject: [PATCH 005/119] removed max-width, max-height of body; added 0 margin and padding to root --- public/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/public/style.css b/public/style.css index 805db96..b656636 100644 --- a/public/style.css +++ b/public/style.css @@ -1,11 +1,10 @@ * { box-sizing: border-box; + margin: 0; + padding: 0; } body { - width: 88%; - max-width: 70em; - margin: 1em auto; line-height: 1.5; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; From 73e37e3a60d341fd774619de1867c89d99b1a42d Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 12:30:38 -0500 Subject: [PATCH 006/119] made Card component for items display --- public/react/components/Card.jsx | 102 +++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 public/react/components/Card.jsx diff --git a/public/react/components/Card.jsx b/public/react/components/Card.jsx new file mode 100644 index 0000000..5f74932 --- /dev/null +++ b/public/react/components/Card.jsx @@ -0,0 +1,102 @@ +import styled from "styled-components"; +import CardsList from "./CardsList"; + +const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-flow: column nowrap; + margin-top: 20px; +`; + +const CardStyle = styled.div` + background-color: lightgray; + height: auto; + width: auto; + min-width: 300px; + display: flex; + justify-content: center; + flex-flow: column nowrap; + box-shadow: 0px 0px 20px black; + border-radius: 10px; +`; + +const ItemImage = styled.img` + width: 100%; + height: 200px; + object-fit: scale-down; + background-color: white; + padding: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +`; + +const InfoWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid black; +`; + +const TitleAndPart = styled.div` + padding: 0px 0 5px 5px; + width: 50%; + height: 100%; +`; + +const TitleFont = styled.div` + font-weight: 600; + font-size: 1.2rem; +`; + +const PartFont = styled.div` + font-weight: 400; + font-size: 1rem; +`; + +const QuantityNumber = styled.div` + padding: 0px 0 5px 5px; + width: 50%; + height: 100%; + border-left: 1px solid black; +`; + +const AddToCardButton = styled.div` + text-align: center; + width: 100%; + background-color: black; + color: white; + height: auto; + font-size: 1.4rem; + margin-top: 7px; + border-radius: 15px; + user-select: none; + box-shadow: 0px 0px 20px gray; + + + &:active { + background-color: gray; + } +`; + +export default function Card() { + return ( + <> + + + + + + Title + Part# + + + {10}

in stock

+ + + + Add to Cart + + + ); +} From 42285d19464f2e14b5438f9e3777809ccada3d1f Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 12:31:09 -0500 Subject: [PATCH 007/119] add Card component for styling and rendering testing --- public/react/components/App.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/public/react/components/App.js b/public/react/components/App.js index 942cdd4..ed0e6bb 100644 --- a/public/react/components/App.js +++ b/public/react/components/App.js @@ -1,5 +1,14 @@ import React, { useEffect, useState } from "react"; +import styled from "styled-components"; import Header from "./Header"; +import CardsList from "./CardsList"; +import Card from "./Card"; + +const BodyStyle = styled.div` + display: flex; + justify-content: center; + align-content: center; +` // Prepend the API URL to any fetch calls. import apiURL from "../api"; @@ -14,7 +23,9 @@ function App() { return ( <>
- {/* Render the items */} + + + ); } From d133877bda5f47d53bfd613d5577ffdc02724656 Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 12:32:17 -0500 Subject: [PATCH 008/119] made CardWrapper component to make displaying all Cards look better --- public/react/components/CardsList.jsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 public/react/components/CardsList.jsx diff --git a/public/react/components/CardsList.jsx b/public/react/components/CardsList.jsx new file mode 100644 index 0000000..2a2047d --- /dev/null +++ b/public/react/components/CardsList.jsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; +import Card from "./Card"; + +const CardWrapper = styled.div` + background-color: gray; + height: 4rem; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +` + +export default function CardsList() { + return ( + <> + + + + + ) +} From 15165158999b5094f221bc52defbe4b32536b99e Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 12:33:54 -0500 Subject: [PATCH 009/119] add 100vh and 100vw to the body --- public/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/style.css b/public/style.css index b656636..d1c7c98 100644 --- a/public/style.css +++ b/public/style.css @@ -5,6 +5,8 @@ } body { + height: 100vh; + width: 100vw; line-height: 1.5; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; From ec82cbe8bf1ee84d5302929ca509439080f413b2 Mon Sep 17 00:00:00 2001 From: Jamal Date: Tue, 3 Jun 2025 14:15:24 -0500 Subject: [PATCH 010/119] added single page view functionality. No single page component yet. Implemented grid list --- public/react/components/App.js | 19 +++++++++++++++++-- public/react/components/CardsList.jsx | 21 ++++++++++++++++++--- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/public/react/components/App.js b/public/react/components/App.js index ed0e6bb..f521023 100644 --- a/public/react/components/App.js +++ b/public/react/components/App.js @@ -15,16 +15,31 @@ import apiURL from "../api"; function App() { const [items, setItems] = useState([]); + const [singleView, setSingleView] = useState(false); + const [item, setItem] = useState(null); //this is for single item view useEffect(() => { - // Fetch the items + async function fetchItems () { + try { + const response = await fetch(`${apiURL}/items`) + const itemsData = await response.json() + setItems(itemsData); + //console.log(itemsData); + //setPage(false); + //setShowCreate(false); + } catch (err) { + console.log('Oh no an error! ', err) + } + } + + fetchItems() }, []); return ( <>
- + {!singleView ? : <>THIS IS SINGLE PAGE} ); diff --git a/public/react/components/CardsList.jsx b/public/react/components/CardsList.jsx index 2a2047d..1b5a042 100644 --- a/public/react/components/CardsList.jsx +++ b/public/react/components/CardsList.jsx @@ -1,5 +1,6 @@ import styled from "styled-components"; import Card from "./Card"; +import React, { useEffect, useState } from 'react'; const CardWrapper = styled.div` background-color: gray; @@ -8,13 +9,27 @@ const CardWrapper = styled.div` display: flex; justify-content: center; align-items: center; -` + flex-wrap: wrap; + gap: 15px; + ` + + + +export default function CardsList({items, setSingleView, setItem}) { + + async function singleView(itm){ + setSingleView(true); + setItem(itm); + } -export default function CardsList() { return ( <> - + {items.map((item, idx)=>( +
singleView(item)}> + +
+ ))} ) From ade2d0d742132138bbb9fb804ae51c801782560d Mon Sep 17 00:00:00 2001 From: Jamal Date: Tue, 3 Jun 2025 14:21:49 -0500 Subject: [PATCH 011/119] added browserrouter --- public/react/components/App.js | 4 +++- public/react/index.js | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/public/react/components/App.js b/public/react/components/App.js index f521023..c2b69e8 100644 --- a/public/react/components/App.js +++ b/public/react/components/App.js @@ -39,7 +39,9 @@ function App() { <>
- {!singleView ? : <>THIS IS SINGLE PAGE} + {!singleView + ? + : <>THIS IS SINGLE PAGE} ); diff --git a/public/react/index.js b/public/react/index.js index 9142169..e19ae92 100644 --- a/public/react/index.js +++ b/public/react/index.js @@ -1,4 +1,4 @@ -import React, { StrictMode } from "react"; +import React, { BrowserRouter } from "react"; import { createRoot } from "react-dom/client"; import "regenerator-runtime/runtime"; import App from "./components/App"; @@ -7,7 +7,7 @@ const container = document.getElementById("root"); const root = createRoot(container); root.render( - - - + + + ); From e200b6361518f8e1acd4beec9935f7788b32b88d Mon Sep 17 00:00:00 2001 From: LaneLR Date: Tue, 3 Jun 2025 15:04:13 -0500 Subject: [PATCH 012/119] added BrowserRouter for routing --- public/react/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/react/index.js b/public/react/index.js index 9142169..ccedbea 100644 --- a/public/react/index.js +++ b/public/react/index.js @@ -1,4 +1,5 @@ import React, { StrictMode } from "react"; +import { BrowserRouter } from "react-router"; import { createRoot } from "react-dom/client"; import "regenerator-runtime/runtime"; import App from "./components/App"; @@ -7,7 +8,7 @@ const container = document.getElementById("root"); const root = createRoot(container); root.render( - + - + ); From e1667c50f283e7d332721901a14206628ed6e28a Mon Sep 17 00:00:00 2001 From: Jamal Date: Tue, 3 Jun 2025 15:49:16 -0500 Subject: [PATCH 013/119] finished single page view that reproduces only a single card --- package-lock.json | 59 +++++++++++++++++ package.json | 2 + public/react/components/App.js | 3 +- public/react/components/Card.jsx | 24 ++++--- public/react/components/CardsList.jsx | 8 +-- public/react/components/SinglePage.jsx | 90 ++++++++++++++++++++++++++ public/react/index.js | 8 +-- 7 files changed, 176 insertions(+), 18 deletions(-) create mode 100644 public/react/components/SinglePage.jsx diff --git a/package-lock.json b/package-lock.json index c32a736..fe0064b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,8 @@ "jest": "^27.5.1", "nodemon": "^3.1.10", "parcel": "^2.15.1", + "react-router": "^7.6.1", + "react-router-dom": "^7.6.1", "react-test-renderer": "^18.3.1" } }, @@ -10251,6 +10253,56 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz", + "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz", + "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==", + "dev": true, + "license": "MIT", + "dependencies": { + "react-router": "7.6.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/react-router/node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/react-shallow-renderer": { "version": "16.15.0", "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", @@ -10746,6 +10798,13 @@ "license": "ISC", "optional": true }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "dev": true, + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", diff --git a/package.json b/package.json index 15efd28..4745350 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "jest": "^27.5.1", "nodemon": "^3.1.10", "parcel": "^2.15.1", + "react-router": "^7.6.1", + "react-router-dom": "^7.6.1", "react-test-renderer": "^18.3.1" } } diff --git a/public/react/components/App.js b/public/react/components/App.js index c2b69e8..ba0e4b0 100644 --- a/public/react/components/App.js +++ b/public/react/components/App.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; import Header from "./Header"; import CardsList from "./CardsList"; +import SinglePage from "./SinglePage" import Card from "./Card"; const BodyStyle = styled.div` @@ -41,7 +42,7 @@ function App() { {!singleView ? - : <>THIS IS SINGLE PAGE} + : } ); diff --git a/public/react/components/Card.jsx b/public/react/components/Card.jsx index 5f74932..4aa9167 100644 --- a/public/react/components/Card.jsx +++ b/public/react/components/Card.jsx @@ -11,9 +11,8 @@ const Wrapper = styled.div` const CardStyle = styled.div` background-color: lightgray; - height: auto; - width: auto; - min-width: 300px; + width: 300px; + height: 350px; display: flex; justify-content: center; flex-flow: column nowrap; @@ -36,12 +35,14 @@ const InfoWrapper = styled.div` justify-content: space-between; align-items: center; border-top: 1px solid black; + overflow: hidden; + `; const TitleAndPart = styled.div` padding: 0px 0 5px 5px; width: 50%; - height: 100%; + height: 100px; `; const TitleFont = styled.div` @@ -79,19 +80,24 @@ const AddToCardButton = styled.div` } `; -export default function Card() { +export default function Card({item}) { + + if (!item){ + return <>null! + } + return ( <> - + - Title - Part# + {item.name} + #{item.id} - {10}

in stock

+ {item.price}

in stock

 diff --git a/public/react/components/CardsList.jsx b/public/react/components/CardsList.jsx index 1b5a042..22c1d38 100644 --- a/public/react/components/CardsList.jsx +++ b/public/react/components/CardsList.jsx @@ -17,17 +17,17 @@ const CardWrapper = styled.div` export default function CardsList({items, setSingleView, setItem}) { - async function singleView(itm){ + function singleView(itm){ + setItem(itm.item); setSingleView(true); - setItem(itm); } return ( <> {items.map((item, idx)=>( -
singleView(item)}> - +
singleView({item})}> +
))} diff --git a/public/react/components/SinglePage.jsx b/public/react/components/SinglePage.jsx new file mode 100644 index 0000000..ddd876d --- /dev/null +++ b/public/react/components/SinglePage.jsx @@ -0,0 +1,90 @@ +import styled from "styled-components"; +import CardsList from "./CardsList"; +import Card from "./Card"; + +const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-flow: column nowrap; + margin-top: 20px; +`; + +const CardStyle = styled.div` + background-color: lightgray; + width: 300px; + height: 350px; + display: flex; + justify-content: center; + flex-flow: column nowrap; + box-shadow: 0px 0px 20px black; + border-radius: 10px; +`; + +const ItemImage = styled.img` + width: 100%; + height: 200px; + object-fit: scale-down; + background-color: white; + padding: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +`; + +const InfoWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid black; + overflow: hidden; + +`; + +const TitleAndPart = styled.div` + padding: 0px 0 5px 5px; + width: 50%; + height: 100px; +`; + +const TitleFont = styled.div` + font-weight: 600; + font-size: 1.2rem; +`; + +const PartFont = styled.div` + font-weight: 400; + font-size: 1rem; +`; + +const QuantityNumber = styled.div` + padding: 0px 0 5px 5px; + width: 50%; + height: 100%; + border-left: 1px solid black; +`; + +const AddToCardButton = styled.div` + text-align: center; + width: 100%; + background-color: black; + color: white; + height: auto; + font-size: 1.4rem; + margin-top: 7px; + border-radius: 15px; + user-select: none; + box-shadow: 0px 0px 20px gray; + + + &:active { + background-color: gray; + } +`; + +export default function SinglePage({item}) { + return ( + <> + + + ); +} diff --git a/public/react/index.js b/public/react/index.js index e19ae92..9142169 100644 --- a/public/react/index.js +++ b/public/react/index.js @@ -1,4 +1,4 @@ -import React, { BrowserRouter } from "react"; +import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "regenerator-runtime/runtime"; import App from "./components/App"; @@ -7,7 +7,7 @@ const container = document.getElementById("root"); const root = createRoot(container); root.render( - - - + + + ); From eda30c20c71bdfb83233c1c3472ed99296cc8f26 Mon Sep 17 00:00:00 2001 From: SameeraChinta13 Date: Wed, 4 Jun 2025 07:20:50 -0700 Subject: [PATCH 014/119] Created AddForm.js --- package-lock.json | 18 +++++----- package.json | 7 ++-- public/react/components/AddForm.jsx | 52 +++++++++++++++++++++++++++++ public/react/components/App.js | 5 ++- server/seed.js | 3 +- 5 files changed, 71 insertions(+), 14 deletions(-) create mode 100644 public/react/components/AddForm.jsx diff --git a/package-lock.json b/package-lock.json index fe0064b..9dd964a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,8 +27,8 @@ "jest": "^27.5.1", "nodemon": "^3.1.10", "parcel": "^2.15.1", - "react-router": "^7.6.1", - "react-router-dom": "^7.6.1", + "react-router": "^7.6.2", + "react-router-dom": "^7.6.2", "react-test-renderer": "^18.3.1" } }, @@ -10254,9 +10254,9 @@ } }, "node_modules/react-router": { - "version": "7.6.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz", - "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz", + "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==", "dev": true, "license": "MIT", "dependencies": { @@ -10277,13 +10277,13 @@ } }, "node_modules/react-router-dom": { - "version": "7.6.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz", - "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz", + "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==", "dev": true, "license": "MIT", "dependencies": { - "react-router": "7.6.1" + "react-router": "7.6.2" }, "engines": { "node": ">=20.0.0" diff --git a/package.json b/package.json index 4745350..4b6b2f1 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "client-dev": "parcel public/index.html --open", "server-dev": "nodemon server.js", "seed": "node server/seed.js", - "start": "parcel build public/index.html && npm run seed && node server.js" + "start": "parcel build public/index.html && node server.js" + }, "dependencies": { "cors": "^2.8.5", @@ -28,8 +29,8 @@ "jest": "^27.5.1", "nodemon": "^3.1.10", "parcel": "^2.15.1", - "react-router": "^7.6.1", - "react-router-dom": "^7.6.1", + "react-router": "^7.6.2", + "react-router-dom": "^7.6.2", "react-test-renderer": "^18.3.1" } } diff --git a/public/react/components/AddForm.jsx b/public/react/components/AddForm.jsx new file mode 100644 index 0000000..e8f426f --- /dev/null +++ b/public/react/components/AddForm.jsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; + +function AddForm({ onItemAdded }) { + const [formData, setFormData] = useState({ + name: '', + price: '', + description: '', + category: '', + image: '' + }); + + const handleChange = (e) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value + }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const res = await fetch("http://localhost:3000/api/items", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(formData) + }); + const data = await res.json(); + if (res.ok) { + onItemAdded(data); + setFormData({ name: '', price: '', description: '', category: '', image: '' }); + } else { + alert("Error: " + data.error); + } + } catch (error) { + console.error("Failed to add item", error); + } + }; + + return ( +
+

Add New Item

+ + +