<repo_name>tauseef89/React-CRUD<file_sep>/src/admin/Products.js
import React, {useEffect, useState} from 'react'
import Wrapper from './Wrapper'
import { Link } from 'react-router-dom'


function Products() {

    const [products, setProducts] = useState([])

    useEffect(() => {
        fetch('http://localhost:3004/products')
          .then(res => res.json())
          .then(data => setProducts(data))
      }, [])

    const del = (id) => {
        fetch(`http://localhost:3004/products/${id}`, {
            method: 'DELETE'
        });

        setProducts(products.filter(p => p.id !== id));

    }
    return (
        <Wrapper>
            <Link to='/admin/products/create' className='btn'>Add Product</Link>
            <table>
                <thead>
                    <tr>
                        <th>#Id</th>
                        <th>Title</th>
                        <th>Image</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {products.map(p => {
                    return (
                        <tr key={p.id}>
                    <td>{p.id}</td>
                    <td>{p.title}</td>
                    <td><img src={p.image} alt={p.title} width="90" /></td>
                    <td>
                        <Link to={`/admin/products/${p.id}/edit`} className='btn'>Edit</Link>
                        <button onClick={() => del(p.id)}>Delete</button>
                    </td>
                </tr>
                    )
                })}
                </tbody>
            </table>
        </Wrapper>
    )
}

export default Products
<file_sep>/src/admin/ProductCreate.js
import React, { useState } from 'react'
import { useHistory } from 'react-router-dom';
import Wrapper from './Wrapper'

function ProductCreate() {
    const [title, setTitle] = useState('');
    const [image, setImage] = useState('');

    const history = useHistory();

    const submit = (e) => {
        e.preventDefault();
        fetch('http://localhost:3004/products', {
            method: 'POST',
            headers: {"Content-type": "application/json"},
            body: JSON.stringify({ title, image })
        }).then(() => history.push('/admin/products'));
    }

    return (
        <Wrapper>
            <form onSubmit={submit}>
                <label>Title</label>
                <input type="text" name="title" 
                onChange={e => setTitle(e.target.value)}
                 />
                <label>Image</label>
                <input type="text" name="image"
                onChange={e => setImage(e.target.value)}
                
                />
                <button type="submit">Add Product</button>
            </form>
        </Wrapper>
    )
}

export default ProductCreate
<file_sep>/src/admin/Wrapper.js
import React from 'react'
import Nav from './components/Nav'
import SideBar from './components/SideBar'

function Wrapper(props) {
    return (
        <>
           <Nav />
           <div class="wrraper">
                <div class="left-content">
                <SideBar />
                </div>
                <div class="right-content">
                {props.children}
                </div>
            </div> 
        </>
    )
}

export default Wrapper
