Navigation Project

......................................................................................................................................................................................................................................
Add.js
import React, { Component } from 'react'
import { connect } from 'react-redux'

class AddProduct extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            name: '',
            price: ''
        }
    }
handelTextInput=(e)=>{
    this.setState({
        [e.target.name]: e.target.value
    })
}

onSubmit=(e)=>{
    e.preventDefault()
    this.props.dispatch({
        type: 'ADD_PRODUCT',
        sapan: this.state
    })
 
    this.props.history.push('/')
}
    render() {
        return (
            <>
                <h1>Add Product</h1>
                <form onSubmit={this.onSubmit}>
                    <input type='text' name='id' value={this.state.id}  onChange={this.handelTextInput} /><br></br><br></br>
                    <input type='text' name='name' value={this.state.name} onChange={this.handelTextInput} /><br></br><br></br>
                    <input type='text' name='price' value={this.state.price} onChange={this.handelTextInput} /> <br></br><br></br>
                   <button type='submit'>Save</button>
                </form>
            </>
        )
    }
}

export default connect()(AddProduct)
....................................................................................................................................................................................................................................
Edit.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

class EditProduct extends Component {


onSubmit=(e)=>{
    e.preventDefault()
    this.props.dispatch({
        type: 'UP_PRODUCT',
        product: {
            id: e.target.id.value,
            name: e.target.name.value,
            price: e.target.price.value
        }
    })
 
    this.props.history.push('/')
}

    render() {
        return (
            <>
                <h1>Edit Product</h1>
                <form onSubmit={this.onSubmit}>
                    <input type='text' name='id' readOnly={true} defaultValue={this.props.product.id}/>
                    <input type='text' name='name' defaultValue={this.props.product.name} />

                    <input type='text' name='price' defaultValue={this.props.product.price} />
                    <input type='submit' value='Save'/>
                </form>
            </>
        )
    }
}
const mapStateToProps=(state)=>{
    return{
        product:state.products[0]
    }
}

export default connect(mapStateToProps)(EditProduct)

..........................................................................................................................................................................................................................
List.js

import React, { Component } from 'react'
import { connect } from 'react-redux'


class ListProduct extends Component {
    Edit=(e)=>{
        var id = e.target.getAttribute('data-id')
        this.props.dispatch({
            type:'EDIT_PRODUCT',
            id:id
        })
        this.props.history.push('/edit/'+ id)

    }

    Delete=(e)=>{
        var id = e.target.getAttribute('data-id')
        alert(id)
        this.props.dispatch({
            type:'DELETE_PRODUCT',
            id:id
        })
        this.props.history.push('/')
    }
    render() {
        return (
            <>
                <h1>List Product</h1>
                <table border='2'>
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>price</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.product.map((sapan, index)=>{
                            return(
                                <tr key={index}>
                                    <td>{sapan.id}</td>
                                    <td>{sapan.name}</td>
                                    <td>{sapan.price}</td>
                                    <td>
                                        <input type='button' value='Edit' data-id={sapan.id} onClick={this.Edit}/>
     
                                        <input type='button' value='Delete' data-id={sapan.id} onClick={this.Delete}/>
                                        </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>

            </>
        )
    }
}
const mapStateToProps=(state)=>{
    return{
        product:state.products
    }
}
export default connect(mapStateToProps)(ListProduct)
......................................................................................................................................................................................................................
reducers
reducer.js

const initialState = {
    products: []
}

const productReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_PRODUCT':
            return {
                ...state,
                products:state.products.concat([action.M])
            }
            case'DELETE_PRODUCT':
            return{
                ...state,
                products: state.products.filter((p)=>p.id !==action.id)
            }
            case 'EDIT_PRODUCT':
                return{
                    ...state,
                    products: state.products.filter((p)=>p.id ===action.id)
                }
                case 'UP_PRODUCT':
                    var pro =state.products.map((p)=>{
                        if(p.id === action.product.id){
                            return{
                                ...p,
                                id:action.product.id,
                                name: action.product.name,
                                price: action.product.price
                            }
                        }
                        else {
                            return p
                        }
                    })
                    return{
                        ...state,
                        products: pro
                    }
        default:
            return state

    }

}

export default  productReducer

..................................................................................................................................................................................................................

App.js
import React, { Component } from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import productReducer from './reducers/reducers'

import ListProduct from './products/List'
import AddProduct from './products/Add'
import EditProduct from './products/Edit'

const store = createStore(productReducer)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Link to="/">Home | </Link>
          <Link to="/add"> Add | </Link>
          <Link to="/edit/:id">Edit | </Link>
          <Switch>
            <Route path="/" exact strict component={ListProduct} />
            <Route path="/add" exact component={AddProduct} />
            <Route path="/edit/:id" exact component={EditProduct} />
          </Switch>
        </BrowserRouter >
      </Provider>

    )
  }
}