finished project

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",

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 (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        {/* PackageForm component for adding new packages */}
+        <PackageForm setPackages={setPackages} packages={packages}/>
+        <br/>
+        {/* PackageList component to display the list of packages */}
+        <PackageList packages={packages} 
+        editPackage={editPackage} 
+        deletePackage={deletePackage}/>
       </header>
     </div>
   );

src/components/PackageList.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PackageItem from './packageItem';
+
+const PackageList = ({ packages, editPackage, deletePackage }) => {
+    return (
+        <div>
+            List:
+            {/* Mapping through the list of packages and rendering PackageItem component for each */}
+            {
+                packages.map(( pkg ) =>
+                <PackageItem key={ pkg.id } currentPackage={ pkg } editPackage={editPackage}
+                deletePackage={deletePackage}/>)
+            }
+        </div>
+    )
+}
+
+export default PackageList;

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 (
+      <div>
+        {/* Form for adding a new package */}
+        <form className="form">
+          {/* Input fields for package information */}
+        <label>
+          Name: 
+          <input
+            type="text"
+            name="name"
+            value={packageInfo.name}
+            onChange={handleInputChange}
+            placeholder="Enter package name"
+          />
+        </label>
+        <hr/>
+
+        <label>
+          Description:
+          <input
+            type="text"
+            name="description"
+            value={packageInfo.description}
+            onChange={handleInputChange}
+            placeholder=" Enter package description"
+          />
+        </label>
+        <hr/>
+
+        <label>
+          Category:
+          <input
+            type="text"
+            name="category"
+            value={packageInfo.category}
+            onChange={handleInputChange}
+            placeholder="Enter package category"
+          />
+        </label>
+        <hr/>
+
+        <label>
+          Price:
+          <input
+            type="number"
+            name="price"
+            value={packageInfo.price}
+            onChange={handleInputChange}
+            placeholder="Enter package price"
+          />
+        </label>
+        <hr/>
+
+        <button type="submit" onClick={handleAddPackage}>Add Package</button>
+        </form>
+      </div>
+    );
+};
+
+export default PackageForm;

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 (
+        <div className="item">
+            {/* Displaying package information */}
+            <br />
+            <label>
+                <span>ID: </span>{currentPackage.id}
+            </label>
+
+            <hr />
+            <label>
+                <span>Name: </span>{currentPackage.name}
+            </label>
+
+            <hr />
+            <label>
+                <span>Description: </span>{currentPackage.description}
+            </label>
+
+            <hr />
+            <label>
+                <span>Category: </span>{currentPackage.category}
+            </label>
+
+            <hr />
+            <label>
+                <span>Price: </span>${currentPackage.price}
+            </label>
+
+            <br />
+
+            <div/>
+            {/* Edit form when editForm state is true */}    
+            {
+                editForm ? (
+                <form name='editForm'>
+                {/* Input fields for editing package information */}
+                <label>
+                    <span> 
+                        ID: 
+                    </span> 
+                    <hr />
+                </label>
+
+                <label>
+                    <span>
+                        Package Name: 
+                    </span>  
+                    <input onChange={handleEdit} 
+                    name='name' 
+                    value={editedPackage.name} 
+                    type='text'/> 
+                    <hr />
+                </label>
+
+                <label>
+                    <span>
+                        Package Description:
+                    </span>
+                    <input onChange={handleEdit} 
+                    name='description' 
+                    value={editedPackage.description} 
+                    type='text' />
+                    <hr />
+                </label>
+
+                <label>
+                    <span>
+                        Package Category:
+                    </span>
+                        <input onChange={handleEdit} 
+                        name='category' 
+                        value={editedPackage.category} 
+                        type='text' />
+                    <hr />
+                </label>
+
+                <label>
+                    <span>
+                        Package Price:  
+                    </span>
+                    <input onChange={handleEdit} 
+                    type='number'
+                    name='price' 
+                    value={editedPackage.price} />
+                </label>
+
+                <button onClick={handleSave} name="save">
+                    Save
+                </button>
+            </form>
+                ) : (
+                    <div>
+                        {/* Buttons to edit or delete the package */}
+                        <button name='edit' 
+                        onClick={() => setEdit(true)} >
+                            Edit
+                        </button>
+
+                        <button name='delete' 
+                        onClick={() => deletePackage(currentPackage.id)} >
+                            Delete
+                        </button>
+                    </div>
+                )}
+        </div>
+    )
+}
+
+export default PackageItem;