Update new Layout and fallback of Suspence REACT3

tduyng · tduyng · commit 444b4961553d · 2020-12-11T11:59:52.000+01:00
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
@@ -7,7 +7,7 @@ const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 export const Loading = () => {
   return (
     <div className="container">
-      <div style={{ margin: 'auto', textAlign: 'center' }}>
+      <div style={{ margin: '1rem auto auto auto', textAlign: 'center' }}>
         <Spin indicator={antIcon} />
       </div>
     </div>
diff --git a/src/pages/AuthPages/LoginPage.tsx b/src/pages/AuthPages/LoginPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Login } from 'src/components/Auth/Login';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _LoginPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <Login />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/AuthPages/ProfilePage.tsx b/src/pages/AuthPages/ProfilePage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Profile } from 'src/components/Auth/Profile';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ProfilePage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <Profile />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/AuthPages/RegisterPage.tsx b/src/pages/AuthPages/RegisterPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Register } from 'src/components/Auth/Register';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _RegisterPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <Register />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/ErrorPages/404Pages.tsx b/src/pages/ErrorPages/404Pages.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { NotFound } from 'src/components/Error/404';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _NotFoundPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <NotFound />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const NotFoundPage = React.memo(_NotFoundPage);
diff --git a/src/pages/HomePages/HomePage.tsx b/src/pages/HomePages/HomePage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Home } from 'src/components/Home';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _HomePage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <Home />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const HomePage = React.memo(_HomePage);
diff --git a/src/pages/ProductPages/ProductEditPage.tsx b/src/pages/ProductPages/ProductEditPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ProductForm } from 'src/components/Products/ProductForm';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ProductNewPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <ProductForm edit={true} />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const ProductNewPage = React.memo(_ProductNewPage);
diff --git a/src/pages/ProductPages/ProductItemPage.tsx b/src/pages/ProductPages/ProductItemPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ProductItem } from 'src/components/Products/ProductItem';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ProductItemPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <ProductItem />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const ProductItemPage = React.memo(_ProductItemPage);
diff --git a/src/pages/ProductPages/ProductListPage.tsx b/src/pages/ProductPages/ProductListPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ProductList } from 'src/components/Products/ProductList';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ProductListPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <ProductList />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const ProductListPage = React.memo(_ProductListPage);
diff --git a/src/pages/ProductPages/ProductNewPage.tsx b/src/pages/ProductPages/ProductNewPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ProductForm } from 'src/components/Products/ProductForm';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ProductNewPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <ProductForm edit={false} />
-    </MainLayout>
+    </PageLayout>
   );
 };
 const ProductNewPage = React.memo(_ProductNewPage);
diff --git a/src/pages/StaticPages/AboutPage.tsx b/src/pages/StaticPages/AboutPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { About } from 'src/components/StaticPages/About';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _AboutPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <About />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/StaticPages/ContactPage.tsx b/src/pages/StaticPages/ContactPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Contact } from 'src/components/StaticPages/Contact';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _ContactPage = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <Contact />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/StaticPages/Demo1Page.tsx b/src/pages/StaticPages/Demo1Page.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { DemoOption1 } from 'src/components/StaticPages/Demo.option.1';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _Demo1 = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <DemoOption1 />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/StaticPages/Demo2Page.tsx b/src/pages/StaticPages/Demo2Page.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { DemoOption2 } from 'src/components/StaticPages/Demo.option.2';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _Demo2 = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <DemoOption2 />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/StaticPages/Feature1Page.tsx b/src/pages/StaticPages/Feature1Page.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { FeatureOption1 } from 'src/components/StaticPages/Feature.option.1';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _Feature1 = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <FeatureOption1 />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/StaticPages/Feature2Page.tsx b/src/pages/StaticPages/Feature2Page.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { FeatureOption2 } from 'src/components/StaticPages/Feature.option.2';
-import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { PageLayout } from 'src/pages/layouts/PageLayout';
 
 const _Feature2 = () => {
   return (
-    <MainLayout>
+    <PageLayout>
       <FeatureOption2 />
-    </MainLayout>
+    </PageLayout>
   );
 };
 
diff --git a/src/pages/layouts/PageLayout.tsx b/src/pages/layouts/PageLayout.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { Layout } from 'antd';
+import { AppAlert } from 'src/components/Alert';
+const { Content } = Layout;
+
+interface Props {
+  children: ReactNode;
+}
+export const PageLayout = (props: Props) => {
+  const { children } = props;
+  return (
+    <Layout className="page-layout">
+      <Content className="layout-children">
+        <AppAlert />
+        {children}
+      </Content>
+    </Layout>
+  );
+};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -4,6 +4,7 @@ import { PATH } from 'src/constants/paths';
 import { Loading } from 'src/components/Loading';
 import { Route, Switch } from 'react-router-dom';
 import { PrivateRoute } from './PrivateRoute';
+import { MainLayout } from 'src/pages/layouts/MainLayout';
 
 // ---> Static pages
 const HomePage = lazy(() => import('src/pages/HomePages/HomePage'));
@@ -38,49 +39,51 @@ const NotFoundPage = lazy(() => import('src/pages/ErrorPages/404Pages'));
 
 export const Routes = () => {
   return (
-    <Suspense fallback={<Loading />}>
-      <BrowserRouter>
-        <Switch>
-          {/* Static pages routes */}
-          <Route exact path={PATH.HOME} component={HomePage} />
-          <Route exact path={PATH.ABOUT} component={AboutPage} />
-          <Route exact path={PATH.DEMO1} component={Demo1Page} />
-          <Route exact path={PATH.DEMO2} component={Demo2Page} />
-          <Route exact path={PATH.FEATURE1} component={Feature1Page} />
-          <Route exact path={PATH.FEATURE2} component={Feature2Page} />
-          <Route exact path={PATH.CONTACT} component={ContactPage} />
+    <BrowserRouter>
+      <MainLayout>
+        <Suspense fallback={<Loading />}>
+          <Switch>
+            {/* Static pages routes */}
+            <Route exact path={PATH.HOME} component={HomePage} />
+            <Route exact path={PATH.ABOUT} component={AboutPage} />
+            <Route exact path={PATH.DEMO1} component={Demo1Page} />
+            <Route exact path={PATH.DEMO2} component={Demo2Page} />
+            <Route exact path={PATH.FEATURE1} component={Feature1Page} />
+            <Route exact path={PATH.FEATURE2} component={Feature2Page} />
+            <Route exact path={PATH.CONTACT} component={ContactPage} />
 
-          {/* Auth routes */}
-          <Route exact path={PATH.LOGIN} component={LoginPage} />
-          <Route exact path={PATH.REGISTER} component={RegisterPage} />
-          <PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
+            {/* Auth routes */}
+            <Route exact path={PATH.LOGIN} component={LoginPage} />
+            <Route exact path={PATH.REGISTER} component={RegisterPage} />
+            <PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
 
-          {/* Products routes */}
-          <PrivateRoute
-            exact
-            path={PATH.PRODUCTS}
-            component={ProductListPage}
-          />
-          <PrivateRoute
-            exact
-            path={PATH.PRODUCT_NEW}
-            component={ProductNewPage}
-          />
-          <PrivateRoute
-            exact
-            path={PATH.PRODUCT_SHOW}
-            component={ProductItemPage}
-          />
-          <PrivateRoute
-            exact
-            path={PATH.PRODUCT_EDIT}
-            component={ProductEditPage}
-          />
+            {/* Products routes */}
+            <PrivateRoute
+              exact
+              path={PATH.PRODUCTS}
+              component={ProductListPage}
+            />
+            <PrivateRoute
+              exact
+              path={PATH.PRODUCT_NEW}
+              component={ProductNewPage}
+            />
+            <PrivateRoute
+              exact
+              path={PATH.PRODUCT_SHOW}
+              component={ProductItemPage}
+            />
+            <PrivateRoute
+              exact
+              path={PATH.PRODUCT_EDIT}
+              component={ProductEditPage}
+            />
 
-          {/* Error routes */}
-          <Route component={NotFoundPage} />
-        </Switch>
-      </BrowserRouter>
-    </Suspense>
+            {/* Error routes */}
+            <Route component={NotFoundPage} />
+          </Switch>
+        </Suspense>
+      </MainLayout>
+    </BrowserRouter>
   );
 };
