Update Error routes

Author: tduyng

src/components/Auth/Auth.thunks.ts

@@ -7,34 +7,27 @@ export const loadUser = () => async dispatch => {
   const userJson = localStorage.getItem('user') || '{}';
   const user = JSON.parse(userJson) as IUser;
   const id = user.id;
-  console.log('Load user running!');
-  console.log('User from loadUser', user);
   if (!id) {
     return dispatch(actions.authError());
   }
   try {
     const res = await axios.get(`${URL.baseAPIUrl}/api/users/${id}`);
-    console.log('Response', res);
-    console.log('Hey loadUser function triggered');
     if (res) {
       return dispatch(actions.userLoaded(res.data));
     }
     return dispatch(actions.authError());
   } catch (error) {
-    console.log('Some error loadUser running', error);
     return dispatch(actions.authError());
   }
 };
 
 export const login = (payload: ReqLogin) => async dispatch => {
   const { username, password } = payload;
-  console.log('Login triggered');
   try {
     const res = await axios.get(`${URL.baseAPIUrl}/api/users`);
     const allUsers = res.data;
 
     let user = allUsers.filter(x => x.username === username)[0];
-    console.log('user found  from login', user);
     if (user && user.password === password) {
       dispatch(actions.loginSuccess(user));
       dispatch(loadUser());
@@ -47,21 +40,18 @@ export const login = (payload: ReqLogin) => async dispatch => {
 };
 
 export const register = (payload: ReqLogin) => async dispatch => {
-  console.log('Register triggered');
   try {
     const id = uuid();
     const accessToken = id;
 
     const newUser = { ...payload, id, accessToken };
     await axios.post(`${URL.baseAPIUrl}/api/users`, newUser);
     dispatch(actions.registerSuccess(newUser));
-    console.log('Resgister success', newUser);
     dispatch(loadUser());
   } catch (error) {
     return dispatch(actions.registerFailed());
   }
 };
 export const logout = () => async dispatch => {
-  console.log('Logout triggered');
   return dispatch(actions.logoutSuccess());
 };

src/components/Error/404.tsx

@@ -0,0 +1,27 @@
+import { ExclamationOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+export const NotFound = () => {
+  const history = useHistory();
+  const goBack = () => {
+    history.goBack();
+  };
+  return (
+    <div className="static-pages-section">
+      <div className="container">
+        <div className="block-title">
+          <h2>
+            <ExclamationOutlined />
+            Page Not Found
+          </h2>
+          <p className="large">Sorry, this page does not exist</p>
+          <Button type="primary" onClick={goBack}>
+            Go Back
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Products/Product.thunks.ts

@@ -8,7 +8,6 @@ export const getProducts = () => async dispatch => {
     const res = await axios.get(`${URL.baseAPIUrl}/api/products`);
     const products = res.data;
     dispatch(actions.getProductsSuccess(products));
-    console.log('REs product', res);
   } catch (error) {
     const payload = {
       msg: error.response?.statusText,
@@ -20,6 +19,7 @@ export const getProducts = () => async dispatch => {
 
 export const getProduct = id => async dispatch => {
   try {
+    console.log('Get Product triggered');
     const res = await axios.get(`${URL.baseAPIUrl}/api/products/${id}`);
     const product = res.data as Product;
     dispatch(actions.getProductSuccess(product));

src/components/Products/ProductItem.tsx

@@ -1,9 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { getProduct } from './Product.thunks';
+import { useParams } from 'react-router-dom';
+import { Row, Col, Image } from 'antd';
 
-export const ProductItem = () => {
+const mapStateToProps = (state: AppState) => ({
+  product: state.products.product,
+});
+const mapDispatchToProps = {
+  getProduct,
+};
+interface Params {
+  id: string;
+}
+const connector = connect(mapStateToProps, mapDispatchToProps);
+interface Props extends ConnectedProps<typeof connector> {}
+
+export const _ProductItem = (props: Props) => {
+  const { product, getProduct } = props;
+  const params: Params = useParams();
+  useEffect(() => {
+    const { id } = params;
+    getProduct(id);
+  }, [params, getProduct]);
   return (
-    <div>
-      <h1>ProductItem Components</h1>
+    <div className="container">
+      <Row>
+        <Col span={12}>
+          <Image src={product.image_url} />
+        </Col>
+        <Col span={8} offset={4}>
+          <h2>Name: {product.name}</h2>
+          <p>Brand: {product.brand}</p>
+        </Col>
+      </Row>
     </div>
   );
 };
+export const ProductItem = connector(_ProductItem);

src/components/Products/ProductList.tsx

@@ -1,11 +1,10 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Col, Row, Table, Image } from 'antd';
-import React, { useEffect, useState } from 'react';
+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 imgDefault from 'src/assets/images/products/apple/iphone-8-plus.jpg';
 
 const mapStateToProps = (state: AppState) => ({
   loading: state.products.loading,

src/pages/ErrorPages/404Pages.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NotFound } from 'src/components/Error/404';
+import { MainLayout } from 'src/layouts/MainLayout';
+
+const _NotFoundPage = () => {
+  return (
+    <MainLayout>
+      <NotFound />
+    </MainLayout>
+  );
+};
+const NotFoundPage = React.memo(_NotFoundPage);
+export default NotFoundPage;

src/routes/ErrorRoutes.tsx

@@ -0,0 +1,17 @@
+import React, { lazy, Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { Loading } from 'src/components/Loading';
+const NotFoundPage = lazy(() => import('src/pages/ErrorPages/404Pages'));
+export const ErrorRoutes = () => {
+  return (
+    <Switch>
+      <Route
+        component={() => (
+          <Suspense fallback={<Loading />}>
+            <NotFoundPage />
+          </Suspense>
+        )}
+      />
+    </Switch>
+  );
+};

src/routes/ProductRoutes.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
 import { PATH } from 'src/constants/paths';
 import { Loading } from 'src/components/Loading';
 import { AuthenticatedGuard } from 'src/guards/AuthenticatedGuard';
@@ -24,7 +24,7 @@ export const AuthRoutes = () => {
       />
       <AuthenticatedGuard
         exact
-        path={PATH.PRODUCTS + '/:id'}
+        path="/products/:id"
         component={() => (
           <Suspense fallback={<Loading />}>
             <ProductItem />

src/routes/index.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { StaticPageRoutes } from './StaticPageRoutes';
 import { AuthRoutes } from './AuthRoutes';
+import { ErrorRoutes } from './ErrorRoutes';
 
 export const Routes = () => {
   return (
     <BrowserRouter>
       <StaticPageRoutes />
       <AuthRoutes />
+      <ErrorRoutes />
     </BrowserRouter>
   );
 };