Minor update clear product when button create new product clicked

Author: tduyng

src/components/Products/Product.actions.ts

@@ -28,3 +28,7 @@ export const productError = (payload: ProductError) => ({
   type: types.PRODUCT_ERROR,
   payload,
 });
+
+export const clearProductSuccess = () => ({
+  type: types.CLEAR_PRODUCT,
+});

src/components/Products/Product.constants.ts

@@ -4,3 +4,4 @@ export const PRODUCT_ERROR = 'views/Product/PRODUCT_ERROR';
 export const CREATE_PRODUCT = 'views/Product/CREATE_PRODUCT';
 export const UPDATE_PRODUCT = 'views/Product/UPDATE_PRODUCT';
 export const DELETE_PRODUCT = 'views/Product/DELETE_PRODUCT';
+export const CLEAR_PRODUCT = 'views/Product/CLEAR_PRODUCT';

src/components/Products/Product.reducers.ts

@@ -47,6 +47,14 @@ export const productReducer = (state = initialState, action) => {
         ...state,
         error: payload,
         loading: false,
+        products: [],
+        product: null,
+      };
+    case types.CLEAR_PRODUCT:
+      return {
+        ...state,
+        product: null,
+        loading: false,
       };
 
     default:

src/components/Products/Product.thunks.ts

@@ -30,6 +30,9 @@ export const getProduct = id => async dispatch => {
     dispatch(actions.productError(payload));
   }
 };
+export const clearProduct = () => dispatch => {
+  dispatch(actions.clearProductSuccess());
+};
 
 export const createProduct = (formData: ProductForm) => async dispatch => {
   try {

src/components/Products/ProductList.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import { PATH } from 'src/constants/paths';
-import { getProducts } from './Product.thunks';
+import { getProducts, clearProduct } from './Product.thunks';
 
 const mapStateToProps = (state: AppState) => ({
   loading: state.products.loading,
@@ -13,6 +13,7 @@ const mapStateToProps = (state: AppState) => ({
 
 const mapDispatchToProps = {
   getProducts,
+  clearProduct,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -21,7 +22,7 @@ interface Props extends ConnectedProps<typeof connector> {}
 export const _ProductList = (props: Props) => {
   const history = useHistory();
 
-  const { products, getProducts } = props;
+  const { products, getProducts, clearProduct } = props;
 
   const columns = [
     {
@@ -64,6 +65,7 @@ export const _ProductList = (props: Props) => {
   };
 
   const addNewProduct = () => {
+    clearProduct();
     history.push(PATH.PRODUCT_NEW);
   };