Update Edit products actions

Author: tduyng

src/components/Products/Product.actions.ts

@@ -25,8 +25,9 @@ export const updateProductSuccess = (payload: Product) => ({
   payload,
 });
 
-export const deleteProductSuccess = () => ({
+export const deleteProductSuccess = (payload: string) => ({
   type: types.DELETE_PRODUCT,
+  payload,
 });
 
 export const productError = (payload: ProductError) => ({

src/components/Products/Product.reducers.ts

@@ -37,7 +37,7 @@ export const productReducer = (state = initialState, action) =>
         draft.loading = false;
         break;
       case types.DELETE_PRODUCT:
-        draft.products = state.products.filter(p => p.id !== payload);
+        draft.products = state.products.filter(p => p.id != payload);
         draft.loading = false;
         break;
       case types.PRODUCT_ERROR:

src/components/Products/Product.thunks.ts

@@ -57,7 +57,7 @@ export const createProduct = (formData: ProductForm) => async dispatch => {
 export const deleteProduct = (id: string) => async dispatch => {
   try {
     await axios.delete(`${URL.baseAPIUrl}/api/products/${id}`);
-    dispatch(actions.deleteProductSuccess());
+    dispatch(actions.deleteProductSuccess(id));
     dispatch(getProducts());
   } catch (error) {
     const payload = {
@@ -86,6 +86,7 @@ export const updateProduct = (product: Product) => async dispatch => {
   try {
     await axios.put(`${URL.baseAPIUrl}/api/products/${product.id}`, product);
     dispatch(actions.updateProductSuccess(product));
+    dispatch(getProducts());
   } catch (error) {
     const payload = {
       msg: error.response?.statusText,

src/components/Products/ProductForm.tsx

@@ -29,6 +29,9 @@ export const _ProductForm = (props: Props) => {
   const onFinish = values => {
     if (!edit) {
       createProduct(values);
+    } else {
+      const changedProduct = { ...product, ...values };
+      updateProduct(changedProduct);
     }
 
     history.push(PATH.HOME);
@@ -101,10 +104,11 @@ export const _ProductForm = (props: Props) => {
               <Input />
             </Form.Item>
 
-            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 10 }}>
-              <Button type="primary" htmlType="submit">
+            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+              <Button type="primary" htmlType="submit" className="mr-1">
                 Submit
               </Button>
+              <Button onClick={e => history.goBack()}>Back</Button>
             </Form.Item>
           </Form>
         </div>

src/components/Products/ProductItem.tsx

@@ -31,7 +31,7 @@ export const _ProductItem = (props: Props) => {
     history.goBack();
   };
   const goEdit = () => {
-    history.push(PATH.PRODUCT_EDIT);
+    history.push(`${PATH.PRODUCTS}/${product.id}/edit`);
   };
   const onDelete = () => {
     deleteProduct(product.id);
@@ -43,7 +43,7 @@ export const _ProductItem = (props: Props) => {
       return (
         <div className="product-item-section mt-2">
           <div className="container">
-            <Row>
+            <Row gutter={[40, 0]}>
               <Col span={12}>
                 <Image src={item.image_url} />
               </Col>