9. Tạo detail product (ok)

C:\Users\Administrator\Desktop\typescript\src\routes\ProductRoutes.tsx

import React from 'react';
import { Switch } from 'react-router-dom';
import AuthenticatedGuard from './../guards/AuthenticatedGuard';
import ProductList from './../pages/Product/ProductList';
import { PATH } from './../constants/paths';
import ProductItem from './../pages/Product/ProductItem';
export default function ProductRoutes() {
  return (
    <Switch>
      <AuthenticatedGuard exact path={PATH.PRODUCT} component={ProductList} />
      <AuthenticatedGuard exact path={PATH.PRODUCT + '/:idProduct'} component={ProductItem} />
    </Switch>
  )
}

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductItem\index.tsx

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { useParams } from 'react-router-dom';
import MainLayout from './../../../layouts/MainLayout';
import { getProductItem } from './../../../middlewares/thunks';
import { handlePrice } from './../../../helpers/string';
import * as interfaces from './../../../interface';
interface ReduxProps {
  productItem: interfaces.Product
  getProductItem(id: string): Promise<interfaces.ResGetProductItem>
}
interface Props extends ReduxProps {}
function ProductItem(props: Props) {
  const { productItem, getProductItem } = props;
  const params: { idProduct: string } = useParams()
  useEffect(() => {
    const { idProduct } = params
    getProductItem(idProduct)
  }, [params, getProductItem])
  return (
    <MainLayout>
      {productItem && (
        <>
          <h2>{productItem.name}</h2>
          <p>Price: {handlePrice(productItem.price)}</p>
          <p>Quantity: {productItem.quantity}</p>
        </>
      )}
    </MainLayout>
  )
}
const mapStateToProps = state => ({
  productItem: state.productItem.productItem
})
const mapDispatchToProps = {
  getProductItem
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductItem)

C:\Users\Administrator\Desktop\typescript\src\reducer\productlists.tsx

import * as products from './../constants/products';
import produce from 'immer';
import * as interfaces from './../interface';
const initialState = {
  loading: false,
  productList: [] as interfaces.Product[]
}
export const ProductListReducer = (state = initialState, action) =>
produce(state, draft => {
  switch (action.type) {
    case products.GET_PRODUCT_LIST_REQUESTED:
      draft.loading = true
      break
    case products.GET_PRODUCT_LIST_SUCCESS:
      draft.loading = false
      draft.productList = action.payload.data.products
      break
    case products.GET_PRODUCT_LIST_FAILED:
      draft.loading = false
      break
    default:
      return state
  }
})

C:\Users\Administrator\Desktop\typescript\src\reducer\productitems.tsx

import produce from 'immer';
import * as products from './../constants/products';
import * as interfaces from './../interface';
const initialState = {
  loading: false,
  productItem: null as interfaces.Product | null
}
export const productItemReducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case products.GET_PRODUCT_ITEM_REQUESTED:
        draft.loading = true
        draft.productItem = null
        break
      case products.GET_PRODUCT_ITEM_SUCCESS:
        draft.loading = false
        draft.productItem = action.payload.data.product
        break
      case products.GET_PRODUCT_ITEM_FAILED:
        draft.loading = false
        break
      default:
        return state
    }
  })

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductList\index.tsx

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import MainLayout from './../../../layouts/MainLayout';
import { TableContainer } from './ProductList.styles';
import { getProductList } from './../../../middlewares/thunks';
import * as interfaces from './../../../interface';
import { handlePrice } from './../../../helpers/string';
interface ReduxProps {
  productList: interfaces.Product[]
  getProductList(): Promise<interfaces.ResGetProduct>
}
interface Props extends ReduxProps {}
const ProductList = (props: Props) => {
	const { getProductList, productList } = props;
	useEffect(() => {
    getProductList()
  }, [getProductList])
  return (
    <MainLayout>
      <h2>Product List</h2>
      <TableContainer>
        <table className="table table-striped">
				  <thead>
				    <tr>
				      <th>#</th>
				      <th>Name</th>
				      <th>Quantity</th>
				      <th>Price</th>
				      <th>Actions</th>
				    </tr>
				  </thead>
				  <tbody>
				  	{productList.map((product, index) => (
					    <tr key={product.id}>
					      <th>{index + 1}</th>
					      <td>{product.name}</td>
                <td>{product.quantity}</td>
                <td>{handlePrice(product.price)}</td>
					      <td><a className="btn btn-primary" href="/product/1">Detail</a></td>
					    </tr>
				  	))}
				  </tbody>
				</table>
      </TableContainer>
    </MainLayout>
  )
}
const mapStateToProps = state => ({
  productList: state.productList.productList
})
const mapDispatchToProps = {
  getProductList
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductList);