Update create product actions

Author: tduyng

server/db/db.json

@@ -1,5 +1,6 @@
 {
-  "users": [{
+  "users": [
+    {
       "id": "idtest",
       "username": "tester",
       "email": "tester@gmail.com",
@@ -24,7 +25,8 @@
       "password": "123456"
     }
   ],
-  "products": [{
+  "products": [
+    {
       "id": "iphone-8-plus",
       "name": "Iphone 8 Plus",
       "image_url": "/images/iphone-8-plus.jpg",
@@ -71,6 +73,42 @@
       "name": "Iphone XS Max",
       "image_url": "/images/iphone-xs-max.jpg",
       "brand": "APPLE"
+    },
+    {
+      "name": "Iphone 7s plus",
+      "brand": "APPLE",
+      "image_url": "https://images-na.ssl-images-amazon.com/images/I/71Q5RFc7NVL._AC_SL1500_.jpg",
+      "id": "00528308-fb0f-4d60-85b3-473ebd1aed76"
+    },
+    {
+      "name": "Iphone 12 Pro",
+      "brand": "APPLE",
+      "image_url": "https://images.frandroid.com/wp-content/uploads/2020/10/iphone-12-max-frandroid-2020.png",
+      "id": "5695c3c0-10b3-40d7-b39b-f8f807323dc4"
+    },
+    {
+      "name": "Iphone 12 Pro Max",
+      "brand": "APPLE",
+      "image_url": "https://www.apple.com/newsroom/images/product/iphone/standard/Apple_announce-iphone12pro_10132020.jpg.landing-big_2x.jpg",
+      "id": "4a36b6d8-e8e4-4f13-a19a-ca3c155e479a"
+    },
+    {
+      "name": "Iphone 12 Pro Max",
+      "brand": "APPLE",
+      "image_url": "https://www.apple.com/newsroom/images/product/iphone/standard/Apple_announce-iphone12pro_10132020.jpg.landing-big_2x.jpg",
+      "id": "f7882d67-2207-4dfd-919e-c60a6477cdbd"
+    },
+    {
+      "name": "Iphone 11 Pro max gold",
+      "brand": "APPLE",
+      "image_url": "https://leronza.com/wp-content/uploads/2020/10/iPhone-12-Pro-24k-Gold-copy.png",
+      "id": "4c0ae0b4-9a15-4be7-96cf-6bf47366805c"
+    },
+    {
+      "name": "Iphone 12 Pro Gold",
+      "brand": "APPLE",
+      "image_url": "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-12-pro-gold-hero?wid=470&hei=556&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1604021659000",
+      "id": "f1d30887-14f9-4238-8ecd-c106d5f529e8"
     }
   ]
 }

src/components/Auth/Login.tsx

@@ -21,10 +21,8 @@ const _Login = (props: Props) => {
   const { login, isAuthenticated } = props;
 
   const onFinish = async formData => {
-    const { username, password } = formData;
-    const payload = { username, password };
     try {
-      await login(payload);
+      await login(formData);
     } catch (error) {
       message.error(error.message);
       setError(error.payload.message);

src/components/Products/Product.thunks.ts

@@ -36,12 +36,15 @@ export const clearProduct = () => dispatch => {
 
 export const createProduct = (formData: ProductForm) => async dispatch => {
   try {
+    const img_default = '/images/image-default.jpg';
     const newProduct = {
-      id: uuid(),
       ...formData,
+      id: uuid(),
+      image_url: formData.image_url || img_default,
     };
     await axios.post(`${URL.baseAPIUrl}/api/products`, newProduct);
     dispatch(actions.createProductSuccess(newProduct));
+    dispatch(getProducts());
   } catch (error) {
     const payload = {
       msg: error.response?.statusText,

src/components/Products/ProductForm.tsx

@@ -1,21 +1,31 @@
 import React from 'react';
+import { connect, ConnectedProps } from 'react-redux';
 import { Form, Input, Button, Select } from 'antd';
 import { PhoneBrand } from 'src/constants/products';
-import { is } from 'immer/dist/internal';
+import { useHistory } from 'react-router-dom';
+
+import { createProduct } from './Product.thunks';
+import { PATH } from 'src/constants/paths';
 const { Option } = Select;
 
-export const ProductForm = () => {
-  const onSelectChange = value => {
-    //eslint-disable-next-line
-    console.log(`selected ${value}`);
-  };
+const mapStateToProps = (state: AppState) => ({
+  products: state.products.products,
+});
+const mapDispatchToProps = { createProduct };
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+export const _ProductForm = (props: Props) => {
+  const { createProduct } = props;
+  const history = useHistory();
   const layout = {
     labelCol: { span: 4 },
     wrapperCol: { span: 16 },
   };
 
   const onFinish = values => {
-    console.log(values);
+    createProduct(values);
+    history.push(PATH.HOME);
   };
 
   const allBrands = Object.values(PhoneBrand).filter(
@@ -63,7 +73,6 @@ export const ProductForm = () => {
                 style={{ width: 200 }}
                 placeholder="Select a brand"
                 optionFilterProp="children"
-                onChange={onSelectChange}
                 filterOption={(input, option) =>
                   option?.children.toLowerCase().indexOf(input.toLowerCase()) >=
                   0
@@ -89,3 +98,5 @@ export const ProductForm = () => {
     </div>
   );
 };
+
+export const ProductForm = connector(_ProductForm);

src/components/Products/ProductList.tsx

@@ -76,7 +76,7 @@ export const _ProductList = (props: Props) => {
   let data = [{}];
   useEffect(() => {
     getProducts();
-  }, []);
+  }, [getProducts]);
   products.map((product: Product, index: number) => {
     if (index === 0) {
       data = [