From 3828da0a33d7c9b10e8e1c7aa60c69dac34e5e16 Mon Sep 17 00:00:00 2001 From: athomas227 Date: Wed, 17 Jan 2024 18:28:40 -0500 Subject: [PATCH] finished project and added comments --- package-lock.json | 28 +++++-- package.json | 1 + src/App.js | 51 +++++++++---- src/components/PackageList.js | 18 +++++ src/components/packageForm.js | 101 ++++++++++++++++++++++++++ src/components/packageItem.js | 133 ++++++++++++++++++++++++++++++++++ 6 files changed, 314 insertions(+), 18 deletions(-) create mode 100644 src/components/PackageList.js create mode 100644 src/components/packageForm.js create mode 100644 src/components/packageItem.js diff --git a/package-lock.json b/package-lock.json index ec7c5ba..b9f2a51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "nanoid": "^5.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -12480,9 +12481,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.4.tgz", + "integrity": "sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==", "funding": [ { "type": "github", @@ -12490,10 +12491,10 @@ } ], "bin": { - "nanoid": "bin/nanoid.cjs" + "nanoid": "bin/nanoid.js" }, "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + "node": "^18 || >=20" } }, "node_modules/natural-compare": { @@ -14333,6 +14334,23 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/postcss/node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/package.json b/package.json index fb3919f..8e099e6 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "nanoid": "^5.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index 3784575..03e8a0e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,47 @@ -import logo from './logo.svg'; +import React, { useState } from 'react'; import './App.css'; +import PackageForm from './components/packageForm'; +import PackageList from './components/PackageList'; +import { nanoid } from 'nanoid' function App() { + // State to manage the list of packages + const [packages, setPackages] = useState([ + { + id: nanoid(6), + name: "House of Leaves", + description: "by Mark Danielewski", + category: "Fiction", + price: "20.99", + }]); + + // Function to edit a package + const editPackage = (packageToUpdate) => { + const updatedPackage = [...packages]; + + const packageIndex = updatedPackage.findIndex((pkg) => pkg.id === packageToUpdate.id); + + updatedPackage[packageIndex] = packageToUpdate; + + setPackages(updatedPackage); + } + + // Function to delete a package + const deletePackage = (id) => { + const delPackage = packages.filter((pkg) => pkg.id !== id); + setPackages(delPackage); + } + return (
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - + {/* PackageForm component for adding new packages */} + +
+ {/* PackageList component to display the list of packages */} +
); diff --git a/src/components/PackageList.js b/src/components/PackageList.js new file mode 100644 index 0000000..d9fcdb3 --- /dev/null +++ b/src/components/PackageList.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PackageItem from './packageItem'; + +const PackageList = ({ packages, editPackage, deletePackage }) => { + return ( +
+ List: + {/* Mapping through the list of packages and rendering PackageItem component for each */} + { + packages.map(( pkg ) => + ) + } +
+ ) +} + +export default PackageList; \ No newline at end of file diff --git a/src/components/packageForm.js b/src/components/packageForm.js new file mode 100644 index 0000000..cff29fd --- /dev/null +++ b/src/components/packageForm.js @@ -0,0 +1,101 @@ +import React, { useState } from 'react'; +import { nanoid } from 'nanoid'; + + +function PackageForm({ setPackages, packages }) { + // State to manage the form data for a new package + const [packageInfo, setPackageInfo] = useState({ + id: nanoid(6), + name: "", + description: "", + category: "", + price: "", + }); + + // Function to handle input changes in the form + const handleInputChange = (e) => { + const field = e.target.getAttribute('name'); + + const formInfo = { + ...packageInfo, + [field]: e.target.value + }; + + setPackageInfo(formInfo); + }; + + // Function to add a new package + const handleAddPackage = (e) => { + e.preventDefault(); + + setPackages((prevPackages) => [...prevPackages, packageInfo]); + setPackageInfo({ + id: nanoid(6), + name: "", + description: "", + category: "", + price: "", + }); + }; + + + return ( +
+ {/* Form for adding a new package */} +
+ {/* Input fields for package information */} + +
+ + +
+ + +
+ + +
+ + +
+
+ ); +}; + +export default PackageForm; \ No newline at end of file diff --git a/src/components/packageItem.js b/src/components/packageItem.js new file mode 100644 index 0000000..74a7561 --- /dev/null +++ b/src/components/packageItem.js @@ -0,0 +1,133 @@ +import React, { useState } from 'react'; + +function PackageItem({ currentPackage, editPackage, deletePackage }) { + // State to manage whether the edit form is open or not + const [editForm, setEdit] = useState(false); + // State to manage the edited package data + const [editedPackage, setEditPackage] = useState({ ...currentPackage }); + + // Function to handle input changes in the edit form + function handleEdit(e) { + e.preventDefault(); + + const field = e.target.name; + + setEditPackage({ ...editedPackage, [field]: e.target.value }); + } + + // Function to save the edited package + function handleSave() { + editPackage(editedPackage); + + setEdit(false); + } + + return ( +
+ {/* Displaying package information */} +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ {/* Edit form when editForm state is true */} + { + editForm ? ( +
+ {/* Input fields for editing package information */} + + + + + + + + + + + +
+ ) : ( +
+ {/* Buttons to edit or delete the package */} + + + +
+ )} +
+ ) +} + +export default PackageItem; \ No newline at end of file