Update actions products

Author: tduyng

src/@types/alert.d.ts

@@ -0,0 +1,4 @@
+enum AlertTypes {
+  SUCCESS = 'sucess',
+  ERROR = 'error',
+}

src/@types/product.d.ts

@@ -1,31 +1,21 @@
 interface Product {
   id: string;
   name: string;
-  quantity: string;
-  price: number;
+  image_url: string;
+  brand: string;
 }
-
-interface ResGetProductApi extends Res {
-  data: {
-    products: Product[];
-  };
-}
-
-interface ResGetProduct extends ActionRedux {
-  payload: ResGetProductApi;
+interface ProductError {
+  msg: string;
+  status: number;
 }
 
-interface ResGetProductItemApi extends Res {
-  data: {
-    product: Product;
-  };
-}
-
-interface ResGetProductItem extends ActionRedux {
-  payload: ResGetProductItemApi;
+interface ProductForm {
+  name: string;
+  image_url: string;
+  brand: string;
 }
 
-enum PhoneMark {
+enum PhoneBrand {
   APPLE,
   SAMSUM,
   XIAOMI,

src/components/Home/AuthLinks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProductList } from 'src/components/Product/ProductList';
+import { ProductList } from 'src/components/Products/ProductList';
 
 export const AuthLinks = () => {
   return <ProductList />;

src/components/Product/Product.actions.ts

@@ -0,0 +1,30 @@
+import * as types from './Product.constants';
+
+export const getProductsSuccess = (payload: Product[]) => ({
+  type: types.GET_PRODUCTS,
+  payload,
+});
+
+export const getProductSuccess = (payload: Product) => ({
+  type: types.GET_PRODUCT,
+  payload,
+});
+
+export const createProductSuccess = (payload: Product) => ({
+  type: types.CREATE_PRODUCT,
+  payload,
+});
+
+export const updateProductSuccess = (payload: Product) => ({
+  type: types.UPDATE_PRODUCT,
+  payload,
+});
+
+export const deleteProductSuccess = (payload: string) => ({
+  type: types.DELETE_PRODUCT,
+});
+
+export const productError = (payload: ProductError) => ({
+  type: types.PRODUCT_ERROR,
+  payload,
+});

src/components/Product/Product.reducers.ts

@@ -0,0 +1,6 @@
+export const GET_PRODUCTS = 'views/Product/GET_PRODUCTS';
+export const GET_PRODUCT = 'views/Product/GET_PRODUCT';
+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';

src/components/Product/Product.thunks.ts

@@ -0,0 +1,55 @@
+import * as types from './Product.constants';
+
+const products = [] as Product[];
+const initialState = {
+  loading: true,
+  error: {},
+  product: null,
+  products: products,
+};
+
+export const productReducer = (state = initialState, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case types.GET_PRODUCTS:
+      return {
+        ...state,
+        products: payload,
+        loading: false,
+      };
+    case types.GET_PRODUCT:
+      return {
+        ...state,
+        product: payload,
+        loading: false,
+      };
+    case types.CREATE_PRODUCT:
+      return {
+        ...state,
+        products: [payload, ...state.products],
+        loading: false,
+      };
+    case types.UPDATE_PRODUCT:
+      return {
+        ...state,
+        product: payload,
+        loading: false,
+      };
+    case types.DELETE_PRODUCT:
+      return {
+        ...state,
+        products: state.products.filter(p => p.id !== payload),
+        loading: false,
+      };
+    case types.PRODUCT_ERROR:
+      return {
+        ...state,
+        error: payload,
+        loading: false,
+      };
+
+    default:
+      return state;
+  }
+};

src/components/Products/Product.actions.ts

@@ -0,0 +1,62 @@
+import axios from 'axios';
+import { URL } from 'src/constants/urls';
+import * as actions from './Product.actions';
+import { v4 as uuid } from 'uuid';
+
+export const getProducts = () => async dispatch => {
+  try {
+    const res = await axios.get(`${URL.baseAPIUrl}/api/products`);
+    const products = res.data as Product[];
+    dispatch(actions.getProductsSuccess(products));
+  } catch (error) {
+    const payload = {
+      msg: error.response.statusText,
+      status: error.response.status,
+    };
+    dispatch(actions.productError(payload));
+  }
+};
+
+export const getProduct = id => async dispatch => {
+  try {
+    const res = await axios.get(`${URL.baseAPIUrl}/api/products/${id}`);
+    const product = res.data as Product;
+    dispatch(actions.getProductSuccess(product));
+  } catch (error) {
+    const payload = {
+      msg: error.response.statusText,
+      status: error.response.status,
+    };
+    dispatch(actions.productError(payload));
+  }
+};
+
+export const createProduct = (formData: ProductForm) => async dispatch => {
+  try {
+    const newProduct = {
+      id: uuid(),
+      ...formData,
+    };
+    await axios.post(`${URL.baseAPIUrl}/api/products`, newProduct);
+    dispatch(actions.createProductSuccess(newProduct));
+  } catch (error) {
+    const payload = {
+      msg: error.response.statusText,
+      status: error.response.status,
+    };
+    dispatch(actions.productError(payload));
+  }
+};
+
+export const deleteProduct = (id: string) => async dispatch => {
+  try {
+    await axios.delete(`${URL.baseAPIUrl}/api/products/${id}`);
+    dispatch(actions.deleteProductSuccess(id));
+  } catch (error) {
+    const payload = {
+      msg: error.response.statusText,
+      status: error.response.status,
+    };
+    dispatch(actions.productError(payload));
+  }
+};