Init product pages

Author: tduyng

src/components/Product/ProductItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ProductItem = () => {
+  return (
+    <div>
+      <h1>ProductItem Components</h1>
+    </div>
+  );
+};

src/components/Product/ProductList.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ProductList = () => {
+  return (
+    <div>
+      <h1>ProductList Components</h1>
+    </div>
+  );
+};

src/pages/ProductPages/ProductItemPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ProductItem } from 'src/components/Product/ProductItem';
+import { MainLayout } from 'src/layouts/MainLayout';
+
+const _ProductItemPage = () => {
+  return (
+    <MainLayout>
+      <ProductItem />
+    </MainLayout>
+  );
+};
+const ProductItemPage = React.memo(_ProductItemPage);
+export default ProductItemPage;

src/pages/ProductPages/ProductListPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ProductList } from 'src/components/Product/ProductList';
+import { MainLayout } from 'src/layouts/MainLayout';
+
+const _ProductListPage = () => {
+  return (
+    <MainLayout>
+      <ProductList />
+    </MainLayout>
+  );
+};
+const ProductListPage = React.memo(_ProductListPage);
+export default ProductListPage;

src/routes/ProductRoutes.tsx

@@ -0,0 +1,36 @@
+import React, { lazy, Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { PATH } from 'src/constants/paths';
+import { Loading } from 'src/components/Loading';
+import { AuthenticatedGuard } from 'src/guards/AuthenticatedGuard';
+const ProductList = lazy(
+  () => import('src/pages/ProductPages/ProductListPage'),
+);
+const ProductItem = lazy(
+  () => import('src/pages/ProductPages/ProductItemPage'),
+);
+
+export const AuthRoutes = () => {
+  return (
+    <Switch>
+      <AuthenticatedGuard
+        exact
+        path={PATH.PROFILE}
+        component={() => (
+          <Suspense fallback={<Loading />}>
+            <ProductList />
+          </Suspense>
+        )}
+      />
+      <AuthenticatedGuard
+        exact
+        path={PATH.PROFILE}
+        component={() => (
+          <Suspense fallback={<Loading />}>
+            <ProductItem />
+          </Suspense>
+        )}
+      />
+    </Switch>
+  );
+};