Skip to content

M
my-product-management-system
Commit d536cf75 by rahimie-hub
Options

first commit

parent 559e853c
Showing with 739 additions and 14 deletions
package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.26.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
......
src/App.css
...@@ -36,3 +36,53 @@ ...@@ -36,3 +36,53 @@
transform: rotate(360deg); 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 logo from './logo.svg';
import './App.css'; 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() { function App() {
return ( return (
<Router>
<div className="App"> <div className="App">
<header className="App-header"> <div className="topbar">
<img src={logo} className="App-logo" alt="logo" /> <h1>Product Management System</h1>
<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>
</header>
</div> </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>
); );
} }
......
src/components/Category/Category.css 0 → 100644
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 0 → 100644
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 0 → 100644
// 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 0 → 100644
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 0 → 100644
// 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 0 → 100644
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 0 → 100644
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 0 → 100644
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/services/ApiCategory.js 0 → 100644
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 0 → 100644
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',
});
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment