commit

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

+
+# PRODUCT-MANAGEMENT-SYSTEM
+
+## Objective:
+By the end of this session, students will be able to create class and functional components, style components using CSS, and perform CRUD operations in React using MockAPI. The project will be named "product-management-app" and will include pages to register categories and products.
+
+## Agenda:
+### 1. Introduction (10 minutes)
+- Overview of React components: class components vs functional components.
+- Introduction to React's component lifecycle methods.
+- Brief introduction to CSS in React.
+- Introduction to MockAPI for CRUD operations.
+
+### 2. Setting Up the Project (5 minutes)
+- Create a new React project using Create React App.
+- Start the React development server.
+- Brief overview of the project's folder structure.
+
+```bash
+npx create-react-app product-management-app
+cd product-management-app
+npm start
+```
+
+
+
+### 3. Editing App.js (3 minutes)
+- Modify \`App.js\` to include set title project / Hello World! to test this app.js page
+
+```bash
+import React from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import CategoryFormClass from './components/Category/CategoryFormClass';
+import ProductFormClass from './components/Product/ProductFormClass';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <h1>Product Management System</h1>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
+```
+### 4. Setting Up the Project Folder Structure / File System (10 minutes) 
+- Create folder and file according to below file structure page
+- Brief overview of the project's folder structure.
+
+```bash
+product-management-app/
+├── public/
+│   ├── index.html
+│   └── ...
+├── src/
+│   ├── components/
+│   │   ├── Category/
+│   │   │   ├── CategoryFormClass.js
+│   │   │   ├── CategoryListClass.js
+│   │   │   ├── CategoryFormFunction.js
+│   │   │   ├── CategoryListFunction.js
+│   │   │   ├── Category.css
+│   │   ├── Product/
+│   │   │   ├── ProductListClass.js
+│   │   │   ├── ProductFormClass.js
+│   │   │   ├── ProductListFunction.js
+│   │   │   ├── ProductFormFunction.js
+│   │   │   ├── Product.css
+│   ├── services/
+│   │   ├── ApiCategory.js
+│   │   ├── ApiProduct.js
+│   ├── App.js
+│   ├── index.js
+│   └── ...
+├── package.json
+└── ...
+```
+
+### 5. Creating Class Components (30 minutes)
+- Deep dive into creating class components.
+- Create `CategoryFormClass.js` and `CategoryListClass.js` as class components.
+- Discuss state management, event handling, and lifecycle methods.
+  
+CategoryFormClass.js 
+
+
+
+##### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { Component } from 'react';
+```
+
+#### II: Defining the Class Component
+
+```
+class CategoryFormClass extends Component {
+    state = {
+        name: '',
+        description: ''
+    };
+    render() {
+        return (
+            "test"
+      );
+    }
+}     
+```
+
+#### III: Exporting the Component
+
+```
+export default CategoryFormClass;
+
+```
+
+#### IV: Handling Input Changes & Submit Function
+```
+handleChange = (event) => {
+  this.setState({ [event.target.name]: event.target.value });
+};
+
+handleSubmit = (event) => {
+    event.preventDefault();
+    const { name, description } = this.state;
+    console.log(this.state);
+    alert(`Category Name: ${name}\nCategory Description: ${description}`);
+
+    this.setState({ name: "", description: "" });
+
+    // Call the addCategory method passed down from CategoryListClass
+    // this.props.addCategory({ name, description }); 
+    // API integration will be handled in the next chapter
+    // await createCategory({ name, description });
+    // this.props.fetchCategories();
+};
+
+```
+```
+//   handleSubmit = (event) => {
+//     event.preventDefault();
+//     const { name, description } = this.state;
+//     console.log(this.state);
+//     alert(`Category Name: ${name}\nCategory Description: ${description}`);
+
+//     this.setState({ name: "", description: "" });
+
+//     // Call the addCategory method passed down from CategoryListClass
+//     this.props.addCategory({ name, description }); 
+
+//     // Call the createCategory function, which uses axios to create a new category
+//     createCategory({ name, description })
+//         .then(response => {
+//             console.log("Category created successfully:", response.data);
+//             // Optionally, you could call fetchCategories here if you want to refresh the category list
+//             // this.props.fetchCategories();
+//         })
+//         .catch(error => {
+//             console.error("There was an error creating the category:", error);
+//         });
+//     };
+```
+#### V: Rendering the Form
+```
+render() {
+  const { name, description } = this.state;
+
+  return (
+    <form onSubmit={this.handleSubmit}>
+      <input
+        type="text"
+        name="name"
+        value={name}
+        onChange={this.handleChange}
+        placeholder="Category Name"
+      />
+      <input
+        type="text"
+        name="description"
+        value={description}
+        onChange={this.handleChange}
+        placeholder="Category Description"
+      />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+}
+
+```
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { Component } from 'react';
+  import { createCategory } from '../../services/ApiCategory';
+
+  class CategoryFormClass extends Component {
+    state = {
+      name: '',
+      description: ''
+    };
+
+    handleChange = (event) => {
+      this.setState({ [event.target.name]: event.target.value });
+    };
+
+    handleSubmit = async (event) => {
+      event.preventDefault();
+      const { name, description } = this.state;
+      await createCategory({ name, description });
+      this.setState({ name: '', description: '' });
+      this.props.fetchCategories();
+    };
+
+    render() {
+      const { name, description } = this.state;
+
+      return (
+        <form onSubmit={this.handleSubmit}>
+          <input
+            type="text"
+            name="name"
+            value={name}
+            onChange={this.handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={description}
+            onChange={this.handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit">Add Category</button>
+        </form>
+      );
+    }
+  }
+
+  export default CategoryFormClass;
+```
+</details>
+
+
+CategoryListClass.js
+
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { Component } from 'react';
+import './Category.css';
+import CategoryFormClass from './CategoryFormClass';
+// import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+```
+
+#### II: Defining the Class Component and Initial State
+
+
+```
+class CategoryListClass extends Component {
+  state = {
+    categories: [
+      // Hardcoded categories for initial testing
+      { id: 1, name: "Electronics", description: "Devices and gadgets" },
+      { id: 2, name: "Books", description: "Various books and literature" },
+    ],
+    isEditing: false,
+    currentCategory: { id: "", name: "", description: "" },
+  };
+
+  render() {
+    return "test";
+  }
+}
+```
+
+#### III: Lifecycle Method and Fetch Categories
+
+
+```
+componentDidMount() {
+  // this.fetchCategories();
+}
+
+fetchCategories = async () => {
+  // const categories = await getCategories();
+  // this.setState({ categories });
+};
+
+
+```
+
+#### IV: Handling Delete, Edit, and Cancel Edit
+```
+handleDelete = (id) => {
+  const filteredCategories = this.state.categories.filter(category => category.id !== id);
+  this.setState({ categories: filteredCategories });
+  console.log(id);
+  alert(`Deleted Id: ${id}`);
+  // await deleteCategory(id);
+  // this.fetchCategories();
+};
+
+handleEdit = (category) => {
+  this.setState({ isEditing: true, currentCategory: category });
+};
+
+handleCancelEdit = () => {
+  this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+};
+
+```
+#### V: Handling Input Changes and Update and Add using props
+```
+handleChange = (event) => {
+  const { name, value } = event.target;
+  this.setState((prevState) => ({
+    currentCategory: { ...prevState.currentCategory, [name]: value }
+  }));
+};
+
+handleUpdate = (event) => {
+    event.preventDefault();
+
+    const { categories, currentCategory } = this.state;
+
+    const updatedCategories = categories.map((category) =>
+      category.id === currentCategory.id ? { ...currentCategory } : category
+    );
+
+    this.setState({
+      categories: updatedCategories,
+      isEditing: false,
+      currentCategory: { id: "", name: "", description: "" },
+    });
+
+    alert(`Category Name: ${currentCategory.name}\nCategory Description: ${currentCategory.description}`);
+    console.log(this.state);
+    
+    // await updateCategory(currentCategory.id, { name: currentCategory.name, description: currentCategory.description });
+    // this.fetchCategories();
+};
+
+addCategory = (newCategory) => {
+    this.setState((prevState) => ({
+      categories: [...prevState.categories, { id: prevState.categories.length + 1, ...newCategory }],
+    }));
+};
+```
+
+#### VI: Rendering the Component
+
+```
+render() {
+  const { categories, isEditing, currentCategory } = this.state;
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={this.handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={this.handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={this.handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">Update</button>
+          <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+        </form>
+      ) : (
+         <CategoryFormClass addCategory={this.addCategory} />
+        // <CategoryFormClass fetchCategories={this.fetchCategories} />
+      )}
+     <div style={{ display: "inline-block", textAlign: "left", marginTop: "20px"}}>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+```
+
+
+#### VI: Exporting the Component
+
+```
+export default CategoryListClass;
+
+```
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { Component } from 'react';
+// import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormClass from './CategoryFormClass';
+
+class CategoryListClass extends Component {
+  state = {
+    categories: [
+      { id: 1, name: 'Electronics', description: 'Devices and gadgets' },
+      { id: 2, name: 'Books', description: 'Various books and literature' }
+    ],
+    isEditing: false,
+    currentCategory: { id: '', name: '', description: '' },
+  };
+
+  // componentDidMount() {
+  //   this.fetchCategories();
+  // }
+
+  // fetchCategories = async () => {
+  //   const categories = await getCategories();
+  //   this.setState({ categories });
+  // };
+
+  handleDelete = (id) => {
+    const filteredCategories = this.state.categories.filter(category => category.id !== id);
+    this.setState({ categories: filteredCategories });
+  };
+
+  handleEdit = (category) => {
+    this.setState({ isEditing: true, currentCategory: category });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentCategory: { ...prevState.currentCategory, [name]: value }
+    }));
+  };
+
+  handleUpdate = (event) => {
+    event.preventDefault();
+    const { categories, currentCategory } = this.state;
+    const updatedCategories = categories.map(category =>
+      category.id === currentCategory.id
+        ? { ...currentCategory }
+        : category
+    );
+    this.setState({ categories: updatedCategories, isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  render() {
+    const { categories, isEditing, currentCategory } = this.state;
+    return (
+      <div>
+        <h2>Categories</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentCategory.name}
+              onChange={this.handleChange}
+              placeholder="Category Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentCategory.description}
+              onChange={this.handleChange}
+              placeholder="Category Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <CategoryFormClass fetchCategories={this.fetchCategories} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default CategoryListClass;
+
+
+  ```
+</details>
+
+
+### 6. Adding CSS (15 minutes)
+- Demonstrate how to add and apply CSS in React.
+- Style the category and product forms.
+ Category.css *
+```css
+  form {
+     margin: 20px;
+  }
+
+   input {
+    margin-right: 10px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
+```
+### 7. Integrating MockAPI for CRUD Operations (20 minutes)
+- Set up MockAPI for category and product management.
+- Perform CRUD operations (Create, Read, Update, Delete) using MockAPI.
+- Url Localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
+- Discuss Axios/ Await Fectch
+- **Install React Router:**
+```bash
+   npm install axios --save
+```
+- ApiCategory.js
+```jsx
+import axios from 'axios';
+
+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category';
+
+export const getCategories = () => {
+  return axios.get(apiUrl)
+    .then((response) => response.data);
+};
+
+export const createCategory = (category) => {
+  return axios.post(apiUrl, category)
+    .then((response) => response.data);
+};
+
+export const deleteCategory = (id) => {
+  return axios.delete(`${apiUrl}/${id}`)
+    .then((response) => response.data);
+};
+
+export const updateCategory = (id, category) => {
+  return axios.put(`${apiUrl}/${id}`, category)
+    .then((response) => response.data);
+};
+
+
+// Example with custom headers
+// export const createCategory = (category, token) => {
+//     return axios.post(apiUrl, category, {
+//       headers: {
+//         Authorization: `Bearer ${token}` // Example of an auth token
+//       }
+//     }).then((response) => response.data);
+//   };
+
+// export const createCategory = (category) =>
+//     fetch(apiUrl, {
+//       method: 'POST',
+//       headers: {
+//         'Content-Type': 'application/json',
+//       },
+//       body: JSON.stringify(category),
+//     }).then((res) => res.json());
+  
+//   export const deleteCategory = (id) =>
+//     fetch(\`\${apiUrl}/\${id}\`, {
+//       method: 'DELETE',
+//     }).then((res) => res.json());
+  
+//   export const updateCategory = (id, category) =>
+//     fetch(\`\${apiUrl}/\${id}\`, {
+//       method: 'PUT',
+//       headers: {
+//         'Content-Type': 'application/json',
+//       },
+//       body: JSON.stringify(category),
+//     }).then((res) => res.json());
+  
+```
+
+
+
+
+### 8. Routing Navigation (15 minutes)
+
+- Discus how React Rauter works
+- Modify \`App.js\` to include a welcome message and links to the category and product registration pages.
+- Step-by-Step Instructions:
+    -  **Install React Router:**
+    -  Run the following command to install React Router:
+   ```bash
+   npm install react-router-dom
+   ```
+
+  - **Modify App.js:**
+   - Replace the content of \`App.js\` with the following code:
+   ```jsx
+  import React from 'react';
+  import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+  import logo from './logo.svg';
+  import './App.css';
+  import CategoryListClass from './components/Category/CategoryListClass';
+  
+  function App() {
+    return (
+      <Router>
+        <div className="App">
+          <h1>Product Management System</h1>
+          <nav>
+            <ul>
+              <li>
+                <Link to="/category">Register Category</Link>
+              </li>
+              <li>
+                <Link to="/product">Register Product</Link>
+              </li>
+            </ul>
+          </nav>
+          <Routes>
+            <Route path="/category" element={<CategoryListClass />} />
+            <Route path="/product" element={<CategoryListClass />} />
+          </Routes>
+        </div>
+      </Router>
+    );
+  }
+  
+  export default App;
+
+   ```
+
+   
+### 9. Design Content Navigation (15 minutes)
+- Modify \`App.js\` to design topbar,sidebar and contentregistration pages.
+- Step-by-Step Instructions:
+    -  **Modify App.js:**
+    -  Replace code to App.js:
+  ```jsx 
+    import logo from './logo.svg';
+    import './App.css';
+    import CategoryListClass from './components/Category/CategoryListClass';
+    import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
+    
+    function App() {
+      return (
+        <Router>
+          <div className="App">
+            <div className="topbar">
+              <h1>Product Management System</h1>
+            </div>
+            <div className="container">
+              <nav className="sidebar">
+                <ul>
+                  <li>
+                    <Link to="/category1">Category</Link>
+                  </li>
+                  <li>
+                    <Link to="/product">Product</Link>
+                  </li>
+                </ul>
+              </nav>
+              <div className="content">
+                <Routes>
+                  <Route path="/category1" element={<CategoryListClass />} />
+                  {/*<Route path="/product" element={<ProductList />} /> */}
+                </Routes>
+              </div>
+            </div>
+          </div>
+        </Router>
+      );
+    }
+    
+    export default App;
+
+
+   ```
+
+
+  - **Modify App.css:**
+   - Add the content of \`App.css\` with the following code:
+   ```css 
+    .App {
+        font-family: sans-serif;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    .topbar {
+        background-color: #f8f9fa;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+    }
+
+    .container {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    .sidebar {
+        width: 200px;
+        background-color: #f8f9fa;
+        padding: 15px;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+        text-align: left;
+    }
+
+    .sidebar ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .sidebar ul li {
+        margin: 10px 0;
+    }
+
+    .sidebar ul li a {
+        text-decoration: none;
+        color: #007bff;
+        font-weight: bold;
+    }
+
+    .content {
+        flex-grow: 1;
+        padding: 40px;
+    }
+
+   ```
+   
+### 10. Break (5 minutes)
+### 11. Creating Functional Components (30 minutes)
+- Deep dive into creating functional components with hooks.
+- Create `CategoryFormFunction.js` and `CategoryListFunction.js` as functional components.
+- Discuss useState and useEffect hooks.
+CategoryFormFunction.js
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { useState } from 'react';
+//import { createCategory } from '../../services/ApiCategory';
+```
+
+#### II: Defining the Functional Component
+
+```
+const CategoryFormFunction = () => {
+  return (
+    "test"
+  );
+};    
+```
+
+#### III: Introducing useState Hook
+```
+const [categoryName, setCategoryName] = useState('');
+const [description, setDescription] = useState('');
+
+```
+
+#### IV: Handling Input Changes & Submit Function
+```
+const handleChange = (event) => {
+  const { name, value } = event.target;
+  if (name === 'name') setCategoryName(value);
+  if (name === 'description') setDescription(value);
+};
+```
+```
+const handleSubmit = (event) => {
+  event.preventDefault();
+
+  // Log the current state values
+  console.log({
+    categoryName: categoryName,
+    description: description,
+  });
+
+  // Display an alert with the submitted category name and description
+  alert(`Category Name: ${categoryName}\nCategory Description: ${description}`);
+
+  // Clear the input fields after submission
+  setCategoryName('');
+  setDescription('');
+
+  // API integration will be handled in the next chapter
+  //await createCategory({ name: categoryName, description });
+  //fetchCategories();
+};
+```
+
+#### V: Rendering the Form
+```
+const CategoryFormFunction = () => {
+  return (
+    <form>
+      <input type="text" name="name" placeholder="Category Name" />
+      <input type="text" name="description" placeholder="Category Description" />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+};
+```
+
+#### VII: Rendering the Form with Function
+
+Start by importing React and any necessary services:
+
+```
+return (
+  <form onSubmit={handleSubmit}>
+    <input
+      type="text"
+      name="name"
+      value={categoryName}
+      onChange={handleChange}
+      placeholder="Category Name"
+    />
+    <input
+      type="text"
+      name="description"
+      value={description}
+      onChange={handleChange}
+      placeholder="Category Description"
+    />
+    <button type="submit">Add Category</button>
+  </form>
+);
+
+
+```
+
+#### VI: Exporting the Component
+
+```
+export default CategoryFormFunction;
+
+```
+
+
+
+<details>
+  <summary>full code</summary>
+
+  ```jsx
+  import React, { useState } from 'react';
+	import { createCategory } from '../../services/ApiCategory';
+
+	const CategoryFormFunction = ({ fetchCategories }) => {
+	  const [categoryName, setCategoryName] = useState('');
+	  const [description, setDescription] = useState('');
+
+	  const handleChange = (event) => {
+		const { name, value } = event.target;
+		if (name === 'name') setCategoryName(value);
+		if (name === 'description') setDescription(value);
+	  };
+
+	  const handleSubmit = async (event) => {
+		event.preventDefault();
+		await createCategory({ name: categoryName, description });
+		setCategoryName('');
+		setDescription('');
+		fetchCategories();
+	  };
+
+	  return (
+		<form onSubmit={handleSubmit}>
+		  <input
+			type="text"
+			name="name"
+			value={categoryName}
+			onChange={handleChange}
+			placeholder="Category Name"
+		  />
+		  <input
+			type="text"
+			name="description"
+			value={description}
+			onChange={handleChange}
+			placeholder="Category Description"
+		  />
+		  <button type="submit">Add Category</button>
+		</form>
+	  );
+	};
+
+	export default CategoryFormFunction;
+
+
+  ```
+</details>
+
+CategoryListFunction.js
+
+
+#### I: Importing Dependencies
+
+Start by importing React and any necessary services:
+
+```
+import React, { useEffect, useState } from 'react';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormFunction from './CategoryFormFunction';
+
+```
+
+#### II: Defining the Functional Component
+
+```
+const CategoryListFunction = () => {
+  return (
+    "testCategory"
+  );
+
+}   
+```
+
+#### III: Introducing useState Hook
+```
+  const [categories, setCategories] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+
+```
+#### III: Lifecycle Method and Fetch Categories
+
+
+```
+componentDidMount() {
+  // this.fetchCategories();
+}
+
+fetchCategories = async () => {
+  // const categories = await getCategories();
+  // this.setState({ categories });
+};
+
+
+```
+
+#### IV: Handling Delete, Edit, and Cancel Edit
+```
+  const handleDelete = async (id) => {
+    await deleteCategory(id);
+    fetchCategories(); // Refresh the list after deletion
+  };
+
+  const handleEdit = (category) => {
+    setIsEditing(true);
+    setCurrentCategory(category);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+  };
+
+
+```
+#### V: Handling Input Changes and Update and Add using props
+```
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setCurrentCategory((prevCategory) => ({
+      ...prevCategory,
+      [name]: value,
+    }));
+  };
+
+  const handleUpdate = async (event) => {
+    event.preventDefault();
+    await updateCategory(currentCategory.id, {
+      name: currentCategory.name,
+      description: currentCategory.description,
+    });
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+    fetchCategories();
+  };
+
+```
+
+#### II: Rendering the Functional Component
+
+```
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">
+            Update
+          </button>
+          <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+            Cancel
+          </button>
+        </form>
+      ) : (
+        <CategoryFormFunction fetchCategories={fetchCategories} />
+      )}
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category) => (
+            <tr key={category.id}>
+              <td>{category.id}</td>
+              <td>{category.name}</td>
+              <td>{category.description}</td>
+              <td>
+                <button className="button button-update" onClick={() => handleEdit(category)}>
+                  Edit
+                </button>
+                <button className="button button-delete" onClick={() => handleDelete(category.id)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+ 
+```
+
+<details>
+  <summary>full code</summary>
+    ```jsx
+      import React, { useEffect, useState } from 'react';
+    	import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+    	import './Category.css';
+    	import CategoryFormFunction from './CategoryFormFunction';
+    
+    	const CategoryListFunction = () => {
+    	  const [categories, setCategories] = useState([]);
+    	  const [isEditing, setIsEditing] = useState(false);
+    	  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+    
+    	  useEffect(() => {
+    		fetchCategories();
+    	  }, []);
+    
+    	  const fetchCategories = async () => {
+    		const categories = await getCategories();
+    		setCategories(categories);
+    	  };
+    
+    	  const handleDelete = async (id) => {
+    		await deleteCategory(id);
+    		fetchCategories();
+    	  };
+    
+    	  const handleEdit = (category) => {
+    		setIsEditing(true);
+    		setCurrentCategory(category);
+    	  };
+    
+    	  const handleCancelEdit = () => {
+    		setIsEditing(false);
+    		setCurrentCategory({ id: '', name: '', description: '' });
+    	  };
+    
+    	  const handleChange = (event) => {
+    		const { name, value } = event.target;
+    		setCurrentCategory((prevCategory) => ({
+    		  ...prevCategory,
+    		  [name]: value,
+    		}));
+    	  };
+    
+    	  const handleUpdate = async (event) => {
+    		event.preventDefault();
+    		await updateCategory(currentCategory.id, {
+    		  name: currentCategory.name,
+    		  description: currentCategory.description,
+    		});
+    		setIsEditing(false);
+    		setCurrentCategory({ id: '', name: '', description: '' });
+    		fetchCategories();
+    	  };
+    
+    	  return (
+    		<div>
+    		  <h2>Categories</h2>
+    		  {isEditing ? (
+    			<form onSubmit={handleUpdate}>
+    			  <input
+    				type="text"
+    				name="name"
+    				value={currentCategory.name}
+    				onChange={handleChange}
+    				placeholder="Category Name"
+    			  />
+    			  <input
+    				type="text"
+    				name="description"
+    				value={currentCategory.description}
+    				onChange={handleChange}
+    				placeholder="Category Description"
+    			  />
+    			  <button type="submit" className="button button-update">
+    				Update
+    			  </button>
+    			  <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+    				Cancel
+    			  </button>
+    			</form>
+    		  ) : (
+    			<CategoryFormFunction fetchCategories={fetchCategories} />
+    		  )}
+    		  <table>
+    			<thead>
+    			  <tr>
+    				<th>ID</th>
+    				<th>Name</th>
+    				<th>Description</th>
+    				<th>Actions</th>
+    			  </tr>
+    			</thead>
+    			<tbody>
+    			  {categories.map((category) => (
+    				<tr key={category.id}>
+    				  <td>{category.id}</td>
+    				  <td>{category.name}</td>
+    				  <td>{category.description}</td>
+    				  <td>
+    					<button className="button button-update" onClick={() => handleEdit(category)}>
+    					  Edit
+    					</button>
+    					<button className="button button-delete" onClick={() => handleDelete(category.id)}>
+    					  Delete
+    					</button>
+    				  </td>
+    				</tr>
+    			  ))}
+    			</tbody>
+    		  </table>
+    		</div>
+    	  );
+    	};
+  	export default CategoryListFunction;
+  	```
+  </details>
+
+### 12. Task to Create Product Page (60 minutes)
+- Follow category page, task to create product registration page. Can use class / functional component
+- Link forms to MockAPI for data submission.
+- Url localhost / Mockapi: 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/product';
+- Implement similar logic for \`ProductForm.js\` &  \`ProductList.js\`
+Example form and list structure with API integration
+
+```jsx
+import React, { Component } from 'react';
+import ProductForm from './ProductForm';
+import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
+import './Product.css';
+
+class ProductList extends Component {
+  state = {
+    products: [],
+    isEditing: false,
+    currentProduct: { id: '', name: '', description: '', category: '' },
+  };
+
+  componentDidMount() {
+  }
+
+  render() {   
+  }
+}
+
+export default ProductList;
+```
+
+
+## Conclusion (15 minutes)
+- Recap the key concepts covered.
+- Q&A session to address any doubts or questions.
+- Provide resources for further learning.
+
+## Resources:
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [MockAPI Documentation](https://mockapi.io/docs)
+- [CSS Tricks](https://css-tricks.com/)
+- [React Router Documentation](https://reactrouter.com/web/guides/quick-start)
+
+
+## Prerequisite Topics
+- [Explore project files and folders](https://reactjs.org/docs/getting-started.html)
+- [Write basic JSX elements](https://reactjs.org/docs/introducing-jsx.html)
+- [Practice embedding expressions and adding attributes](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx)
+- [Create functional and class components](https://reactjs.org/docs/components-and-props.html)
+- [Pass data via props and set default props](https://reactjs.org/docs/components-and-props.html#props-are-read-only)
+- [State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
+- [Explore basic lifecycle methods in class components](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
+- [Use useState to manage state in functional components](https://reactjs.org/docs/hooks-state.html)
+- [Event Handling](https://reactjs.org/docs/handling-events.html)
+- [Handle button clicks and form submissions](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
+- [Practice passing arguments to event handlers](https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers)
+- [Implement conditional rendering in components](https://reactjs.org/docs/conditional-rendering.html)
+- [Render a list of tasks and add keys to list items](https://reactjs.org/docs/lists-and-keys.html)
+- [Create a form to add new tasks](https://reactjs.org/docs/forms.html)
+- [Manage form input state](https://reactjs.org/docs/forms.html#controlled-components)
+- [Style components using CSS classes and inline styles](https://reactjs.org/docs/faq-styling.html)
+
+
+## Advanced Topics
+- [Building and Using Reusable Component Libraries (axios, sweetalert, formik, bootstrap/tailwind)](https://reactjs.org/docs/reusable-components.html)
+- [Forms and Validation / Error handling](https://reactjs.org/docs/forms.html#controlled-components)
+- [Complex Forms and Validation](https://formik.org/)
+- [Higher-Order Components (HOCs)](https://reactjs.org/docs/higher-order-components.html)
+- [Context API](https://reactjs.org/docs/context.html)
+- [Advanced State Management](https://redux.js.org/)
+- [Side Effects and Data Fetching](https://reactjs.org/docs/hooks-effect.html)
+- [Performance Optimization (React.memo, React.PureComponent, Code Splitting, and Lazy Loading)](https://reactjs.org/docs/optimizing-performance.html)
+- [Advanced Performance Optimization](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
+- [GraphQL](https://graphql.org/)
+- [Server-Side Rendering (SSR) with Next.js](https://nextjs.org/docs)
+- [Animation in React](https://reactcommunity.org/react-transition-group/)
+
+
+
+
+This comprehensive 4-hour training module ensures that students gain an in-depth understanding of React components, styling, and CRUD operations, with ample time for hands-on practice and advanced topics.
+

package.json

+{
+  "name": "product-management-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.topbar {
+  background-color: #f8f9fa;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+
+.container {
+  display: flex;
+  flex-grow: 1;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #f8f9fa;
+  padding: 15px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+.sidebar ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar ul li {
+  margin: 10px 0;
+}
+
+.sidebar ul li a {
+  text-decoration: none;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.content {
+  flex-grow: 1;
+  padding: 40px;
+}

src/App.js

+import logo from './logo.svg';
+import './App.css';
+import CategoryListClass from './components/Category/CategoryListClass';
+import CategoryListFunction from './components/Category/CategoryListFunction';
+import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
+import ProductList from './components/Product/ProductList';
+
+function App() {
+  return (
+    <Router>
+      <div className="App">
+        <div className="topbar">
+          <h1>Product Management System</h1>
+        </div>
+        <div className="container">
+          <nav className="sidebar">
+            <ul>
+              <li>
+                <Link to="/category1">Category Class</Link>
+              </li>
+              <li>
+                <Link to="/category2">Category Functional</Link>
+              </li>
+              <li>
+                <Link to="/product">Product</Link>
+              </li>
+            </ul>
+          </nav>
+          <div className="content">
+            <Routes>
+              <Route path="/category1" element={<CategoryListClass />} />
+              <Route path="/category2" element={<CategoryListFunction />} />
+              <Route path="/product" element={<ProductList />} />
+            </Routes>
+          </div>
+        </div>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

src/App.test.js

+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/Category/Category.css

+form {
+  margin: 20px;
+}
+
+input {
+ margin-right: 10px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
\ No newline at end of file

src/components/Category/CategoryFormClass.js

+import React, { Component } from 'react';
+import { createCategory } from '../../services/ApiCategory';
+
+class CategoryFormClass extends Component {
+  state = {
+    name: '',
+    description: ''
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = async (event) => {
+    event.preventDefault();
+    const { name, description } = this.state;
+    await createCategory({ name: name, description });
+    this.setState({ name: '', description: '' });
+    this.props.fetchCategories();
+  };
+
+  render() {
+    const { name, description } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input 
+          type="text" 
+          name="name"
+          value={name} 
+          onChange={this.handleChange} 
+          placeholder="Category Name" 
+        />
+        <input 
+          type="text" 
+          name="description"
+          value={description} 
+          onChange={this.handleChange} 
+          placeholder="Category Description" 
+        />
+        <button type="submit">Add Category</button>
+      </form>
+    );
+  }
+}
+
+export default CategoryFormClass;

src/components/Category/CategoryFormFunction.js

+// CategoryFormFunction.js
+import React, { useState } from 'react';
+import { createCategory } from '../../services/ApiCategory';
+
+const CategoryFormFunction = ({ fetchCategories }) => {
+  const [categoryName, setCategoryName] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    if (name === 'name') setCategoryName(value);
+    if (name === 'description') setDescription(value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    await createCategory({ name: categoryName, description });
+    setCategoryName('');
+    setDescription('');
+    fetchCategories();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="name"
+        value={categoryName}
+        onChange={handleChange}
+        placeholder="Category Name"
+      />
+      <input
+        type="text"
+        name="description"
+        value={description}
+        onChange={handleChange}
+        placeholder="Category Description"
+      />
+      <button type="submit">Add Category</button>
+    </form>
+  );
+};
+
+export default CategoryFormFunction;

src/components/Category/CategoryListClass.js

+import React, { Component } from 'react';
+import CategoryFormClass from './CategoryFormClass';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+
+class CategoryListClass extends Component {
+  state = {
+    categories: [],
+    isEditing: false,
+    currentCategory: { id: '', name: '', description: '' },
+  };
+
+  componentDidMount() {
+    this.fetchCategories();
+  }
+
+  fetchCategories = async () => {
+    const categories = await getCategories();
+    this.setState({ categories });
+  };
+
+  handleDelete = async (id) => {
+    await deleteCategory(id);
+    this.fetchCategories();
+  };
+
+  handleEdit = (category) => {
+    this.setState({ isEditing: true, currentCategory: category });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentCategory: { ...prevState.currentCategory, [name]: value }
+    }));
+  };
+
+  handleUpdate = async (event) => {
+    event.preventDefault();
+    const { currentCategory } = this.state;
+    await updateCategory(currentCategory.id, { name: currentCategory.name, description: currentCategory.description });
+    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
+    this.fetchCategories();
+  };
+
+  render() {
+    const { categories, isEditing, currentCategory } = this.state;
+    return (
+      <div>
+        <h2>Categories</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentCategory.name}
+              onChange={this.handleChange}
+              placeholder="Category Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentCategory.description}
+              onChange={this.handleChange}
+              placeholder="Category Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <CategoryFormClass fetchCategories={this.fetchCategories} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {categories.map(category => (
+              <tr key={category.id}>
+                <td>{category.id}</td>
+                <td>{category.name}</td>
+                <td>{category.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(category)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default CategoryListClass;

src/components/Category/CategoryListFunction.js

+// CategoryListFunction.js
+import React, { useEffect, useState } from 'react';
+import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
+import './Category.css';
+import CategoryFormFunction from './CategoryFormFunction';
+
+const CategoryListFunction = () => {
+  const [categories, setCategories] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const fetchCategories = async () => {
+    const categories = await getCategories();
+    setCategories(categories);
+  };
+
+  const handleDelete = async (id) => {
+    await deleteCategory(id);
+    fetchCategories();
+  };
+
+  const handleEdit = (category) => {
+    setIsEditing(true);
+    setCurrentCategory(category);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+  };
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setCurrentCategory((prevCategory) => ({
+      ...prevCategory,
+      [name]: value,
+    }));
+  };
+
+  const handleUpdate = async (event) => {
+    event.preventDefault();
+    await updateCategory(currentCategory.id, {
+      name: currentCategory.name,
+      description: currentCategory.description,
+    });
+    setIsEditing(false);
+    setCurrentCategory({ id: '', name: '', description: '' });
+    fetchCategories();
+  };
+
+  return (
+    <div>
+      <h2>Categories</h2>
+      {isEditing ? (
+        <form onSubmit={handleUpdate}>
+          <input
+            type="text"
+            name="name"
+            value={currentCategory.name}
+            onChange={handleChange}
+            placeholder="Category Name"
+          />
+          <input
+            type="text"
+            name="description"
+            value={currentCategory.description}
+            onChange={handleChange}
+            placeholder="Category Description"
+          />
+          <button type="submit" className="button button-update">
+            Update
+          </button>
+          <button type="button" className="button button-delete" onClick={handleCancelEdit}>
+            Cancel
+          </button>
+        </form>
+      ) : (
+        <CategoryFormFunction fetchCategories={fetchCategories} />
+      )}
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {categories.map((category) => (
+            <tr key={category.id}>
+              <td>{category.id}</td>
+              <td>{category.name}</td>
+              <td>{category.description}</td>
+              <td>
+                <button className="button button-update" onClick={() => handleEdit(category)}>
+                  Edit
+                </button>
+                <button className="button button-delete" onClick={() => handleDelete(category.id)}>
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CategoryListFunction;

src/components/Product/Product.css

+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 18px;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 12px 15px;
+    border: 1px solid #ddd;
+  }
+  
+  th {
+    background-color: #f4f4f4;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .button {
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+  
+  .button-delete {
+    background-color: #ff4d4d;
+  }
+  
+  .button-delete:hover {
+    background-color: #ff1a1a;
+  }
+  
+  .button-update {
+    background-color:blue;
+  }
+  
+  .button-update:hover {
+    background-color: blue;
+  }
+  
\ No newline at end of file

src/components/Product/ProductForm.js

+import React, { Component } from 'react';
+import { createProduct } from '../../services/ApiProduct';
+import { getCategories } from '../../services/ApiCategory';
+
+class ProductForm extends Component {
+  state = {
+    name: '',
+    description: '',
+    categoryId: '',
+    categories: [],
+  };
+
+  componentDidMount() {
+    this.fetchCategories();
+  }
+
+  fetchCategories = async () => {
+    const categories = await getCategories();
+    this.setState({ categories });
+  };
+
+  handleChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = async (event) => {
+    event.preventDefault();
+    const { name, description, categoryId } = this.state;
+    await createProduct({ name, description, categoryId });
+    this.setState({ name: '', description: '', categoryId: '' });
+    this.props.fetchProducts();
+  };
+
+  render() {
+    const { name, description, categoryId, categories } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input 
+          type="text" 
+          name="name"
+          value={name} 
+          onChange={this.handleChange} 
+          placeholder="Product Name" 
+        />
+        <input 
+          type="text" 
+          name="description"
+          value={description} 
+          onChange={this.handleChange} 
+          placeholder="Product Description" 
+        />
+        <select name="categoryId" value={categoryId} onChange={this.handleChange}>
+          <option value="">Select Category</option>
+          {categories.map(category => (
+            <option key={category.id} value={category.id}>
+              {category.name}
+            </option>
+          ))}
+        </select>
+        <button type="submit">Add Product</button>
+      </form>
+    );
+  }
+}
+
+export default ProductForm;

src/components/Product/ProductList.js

+import React, { Component } from 'react';
+import ProductForm from './ProductForm';
+import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
+import './Product.css';
+
+class ProductList extends Component {
+  state = {
+    products: [],
+    isEditing: false,
+    currentProduct: { id: '', name: '', description: '' },
+  };
+
+  componentDidMount() {
+    this.fetchProducts();
+  }
+
+  fetchProducts = async () => {
+    const products = await getProduct();
+    this.setState({ products });
+  };
+
+  handleDelete = async (id) => {
+    await deleteProduct(id);
+    this.fetchProducts();
+  };
+
+  handleEdit = (product) => {
+    this.setState({ isEditing: true, currentProduct: product });
+  };
+
+  handleCancelEdit = () => {
+    this.setState({ isEditing: false, currentProduct: { id: '', name: '', description: '' } });
+  };
+
+  handleChange = (event) => {
+    const { name, value } = event.target;
+    this.setState((prevState) => ({
+      currentProduct: { ...prevState.currentProduct, [name]: value }
+    }));
+  };
+
+  handleUpdate = async (event) => {
+    event.preventDefault();
+    const { currentProduct } = this.state;
+    await updateProduct(currentProduct.id, { name: currentProduct.name, description: currentProduct.description });
+    this.setState({ isEditing: false, currentProduct: { id: '', name: '', description: '' } });
+    this.fetchProducts();
+  };
+
+  render() {
+    const { products, isEditing, currentProduct } = this.state;
+    return (
+      <div>
+        <h2>Products</h2>
+        {isEditing ? (
+          <form onSubmit={this.handleUpdate}>
+            <input
+              type="text"
+              name="name"
+              value={currentProduct.name}
+              onChange={this.handleChange}
+              placeholder="Product Name"
+            />
+            <input
+              type="text"
+              name="description"
+              value={currentProduct.description}
+              onChange={this.handleChange}
+              placeholder="Product Description"
+            />
+            <button type="submit" className="button button-update">Update</button>
+            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
+          </form>
+        ) : (
+          <ProductForm fetchProducts={this.fetchProducts} />
+        )}
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Category</th>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map(product => (
+              <tr key={product.id}>
+                <td>{product.id}</td>
+                <td>{product.category}</td>
+                <td>{product.name}</td>
+                <td>{product.description}</td>
+                <td>
+                  <button className="button button-update" onClick={() => this.handleEdit(product)}>Edit</button>
+                  <button className="button button-delete" onClick={() => this.handleDelete(product.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default ProductList;

src/index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file

src/reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/services/ApiCategory.js

+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/category'; // Replace with your MockAPI URL
+
+export const getCategories = async () => {
+  const response = await fetch(`${apiUrl}`);
+  return response.json();
+};
+
+export const getCategoryById = async (id) => {
+  const response = await fetch(`${apiUrl}/${id}`);
+  return response.json();
+};
+
+export const createCategory = async (category) => {
+  await fetch(`${apiUrl}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const updateCategory = async (id, category) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const deleteCategory = async (id) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'DELETE',
+  });
+};

src/services/ApiProduct.js

+const apiUrl = 'https://66b1b4381ca8ad33d4f4d9c0.mockapi.io/api/v1/product'; // Replace with your MockAPI URL
+
+export const getProduct = async () => {
+  const response = await fetch(`${apiUrl}`);
+  return response.json();
+};
+
+export const getProductById = async (id) => {
+  const response = await fetch(`${apiUrl}/${id}`);
+  return response.json();
+};
+
+export const createProduct = async (category) => {
+  await fetch(`${apiUrl}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const updateProduct = async (id, category) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(category),
+  });
+};
+
+export const deleteProduct = async (id) => {
+  await fetch(`${apiUrl}/${id}`, {
+    method: 'DELETE',
+  });
+};

src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';