perf: optimization logout and router framework

bigcommerce · Aug 23, 2022 · 40815d6 · 40815d6
1 parent 43785f4
commit 40815d6
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 277 deletions.
diff --git a/apps/storefront/index.html b/apps/storefront/index.html
@@ -14,6 +14,12 @@
             'is_local_debugging': true,
         },
         'dom.checkoutRegisterParentElement': "#b2bParent",
+        b3Context: {
+          channelId: 1,
+          customer: {
+            email: 'xxxxx.com'
+          }
+        }
       }
     </script>
   </head>

diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -3,6 +3,11 @@ import {
   lazy,
   Suspense,
 } from 'react'
+
+import {
+  Box,
+} from '@mui/material'
+
 import {
   HashRouter,
   Route,
@@ -12,7 +17,6 @@ import {
 import {
   useB3AppOpen,
 } from '@b3/hooks'
-import styled from '@emotion/styled'
 
 import {
   Layout,
@@ -30,16 +34,16 @@ body {
   font-family: Roboto;
 };
 `
-const HeaderContainer = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-end',
-  marginBottom: '1rem',
-}))
+// const HeaderContainer = styled('div')(() => ({
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'flex-end',
+//   marginBottom: '1rem',
+// }))
 
-const PageContainer = styled('div')(() => ({
-  padding: '40px',
-}))
+// const PageContainer = styled('div')(() => ({
+//   padding: '40px',
+// }))
 
 const {
   height: defaultHeight,
@@ -71,7 +75,12 @@ export default function App() {
       document.body.style.height = '100%'
       document.body.style.overflow = 'hidden'
       if (openUrl) {
-        window.location.href = `#${openUrl}`
+        const {
+          origin,
+          pathname,
+          search,
+        } = window.location
+        window.location.href = `${origin}${pathname}${search}#${openUrl}`
       }
     } else {
       document.body.style.height = defaultHeight
@@ -82,9 +91,10 @@ export default function App() {
   useEffect(() => {
     const {
       pathname,
+      hash,
     } = window.location
 
-    if (/login.php/.test(pathname)) {
+    if (/login.php/.test(pathname) || (hash === '#/login' && pathname === '/checkout')) {
       setOpenPage({
         isOpen: true,
         openUrl: '/login',
@@ -102,64 +112,25 @@ export default function App() {
         >
 
           {isOpen ? (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={(
+              <Box sx={{
+                display: 'flex',
+                width: '100%',
+                height: '100vh',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              >
+                Loading...
+              </Box>
+            )}
+            >
               <Routes>
-                <Route
-                  path="/registered"
-                  element={(
-                    <PageContainer>
-                      <HeaderContainer>
-                        <RegisteredCloseButton setOpenPage={setOpenPage} />
-                      </HeaderContainer>
-                      <RegisteredProvider>
-                        <Registered setOpenPage={setOpenPage} />
-                      </RegisteredProvider>
-                    </PageContainer>
-                )}
-                />
-                <Route
-                  path="/registeredbctob2b"
-                  element={(
-                    <PageContainer>
-                      <HeaderContainer>
-                        <RegisteredCloseButton setOpenPage={setOpenPage} />
-                      </HeaderContainer>
-                      <RegisteredProvider>
-                        <RegisteredBCToB2B />
-                      </RegisteredProvider>
-                    </PageContainer>
-                )}
-                />
-                <Route
-                  path="login"
-                  element={(
-                    <PageContainer>
-                      <RegisteredProvider>
-                        <Login />
-                      </RegisteredProvider>
-                    </PageContainer>
-                    )}
-                />
-                <Route
-                  path="/forgotpassword"
-                  element={(
-                    <PageContainer>
-                      <RegisteredProvider>
-                        <ForgotPassword />
-                      </RegisteredProvider>
-                    </PageContainer>
-                  )}
-                />
                 <Route
                   path="/"
                   element={(
-                    <Layout close={() => setOpenPage({
-                      isOpen: false,
-                    })}
-                    >
-                      <HeaderContainer>
-                        <RegisteredCloseButton setOpenPage={setOpenPage} />
-                      </HeaderContainer>
+                    <Layout>
+                      <RegisteredCloseButton setOpenPage={setOpenPage} />
                       <Outlet />
                     </Layout>
                 )}
@@ -172,6 +143,30 @@ export default function App() {
                     path="form"
                     element={<Form />}
                   />
+                  <Route
+                    path="login"
+                    element={<Login />}
+                  />
+                  <Route
+                    path="forgotpassword"
+                    element={<ForgotPassword />}
+                  />
+                  <Route
+                    path="registeredbctob2b"
+                    element={(
+                      <RegisteredProvider>
+                        <RegisteredBCToB2B />
+                      </RegisteredProvider>
+                    )}
+                  />
+                  <Route
+                    path="registered"
+                    element={(
+                      <RegisteredProvider>
+                        <Registered />
+                      </RegisteredProvider>
+                    )}
+                  />
                 </Route>
               </Routes>
             </Suspense>

diff --git a/apps/storefront/src/components/Layout.tsx b/apps/storefront/src/components/Layout.tsx
@@ -1,34 +1,10 @@
 import {
-  Link as RouterLink,
-} from 'react-router-dom'
-
-import {
-  Home as HomeIcon,
-  Logout as LogoutIcon,
-  VerifiedUser as VerifiedUserIcon,
-} from '@mui/icons-material'
-import {
-  AppBar,
   Box,
-  CssBaseline,
-  Divider,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Typography,
 } from '@mui/material'
 
-const drawerWidth = 240
-
 export function Layout({
-  close,
   children,
 }: {
-  close: () => void;
   children: any;
 }) {
   return (
@@ -37,94 +13,6 @@ export function Layout({
         display: 'flex',
       }}
     >
-      <CssBaseline />
-      <AppBar
-        position="fixed"
-        sx={{
-          width: `calc(100% - ${drawerWidth}px)`,
-          ml: `${drawerWidth}px`,
-        }}
-      >
-        <Toolbar>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-          >
-            B2B App
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        sx={{
-          width: drawerWidth,
-          flexShrink: 0,
-          '& .MuiDrawer-paper': {
-            width: drawerWidth,
-            boxSizing: 'border-box',
-          },
-        }}
-        variant="permanent"
-        anchor="left"
-      >
-        <Toolbar />
-        <Divider />
-        <List>
-          {[
-            {
-              label: 'Home',
-              to: '/',
-              icon: HomeIcon,
-            },
-            {
-              label: 'Form',
-              to: '/form',
-              icon: VerifiedUserIcon,
-            },
-            {
-              label: 'Registered',
-              to: '/registered',
-              icon: VerifiedUserIcon,
-            },
-            {
-              label: 'registeredbctob2b',
-              to: '/registeredbctob2b',
-              icon: VerifiedUserIcon,
-            },
-            {
-              label: 'Login',
-              to: '/login',
-              icon: VerifiedUserIcon,
-            },
-          ].map(({
-            label, icon: Icon,
-            to,
-          }) => (
-            <ListItem
-              disablePadding
-              key={label}
-            >
-              <ListItemButton
-                component={RouterLink}
-                to={to}
-              >
-                <ListItemIcon>
-                  <Icon />
-                </ListItemIcon>
-                <ListItemText primary={label} />
-              </ListItemButton>
-            </ListItem>
-          ))}
-          <ListItem disablePadding>
-            <ListItemButton onClick={close}>
-              <ListItemIcon>
-                <LogoutIcon />
-              </ListItemIcon>
-              <ListItemText primary="Close" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </Drawer>
       <Box
         component="main"
         sx={{
@@ -133,7 +21,6 @@ export function Layout({
           p: 3,
         }}
       >
-        <Toolbar />
         {children}
       </Box>
     </Box>

diff --git a/apps/storefront/src/components/RegisteredCloseButton.tsx b/apps/storefront/src/components/RegisteredCloseButton.tsx
@@ -7,6 +7,13 @@ import {
   SetStateAction,
 } from 'react'
 
+import {
+  Box,
+} from '@mui/material'
+import {
+  B3SStorage,
+} from '@/utils'
+
 import {
   CloseButton,
 } from './styled'
@@ -21,14 +28,28 @@ export function RegisteredCloseButton(props: CloseButtonProps) {
   } = props
 
   const handleCloseForm = () => {
-    setOpenPage({
-      isOpen: false,
-    })
+    const isGotoBCHome = B3SStorage.get('isGotoBCHome') || ''
+    if (isGotoBCHome) {
+      window.location.href = '/'
+    } else {
+      setOpenPage({
+        isOpen: false,
+        openUrl: '',
+      })
+    }
   }
 
   return (
-    <CloseButton
-      onClick={handleCloseForm}
-    />
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'row-reverse',
+      pr: 2,
+    }}
+    >
+      <CloseButton
+        onClick={handleCloseForm}
+      />
+    </Box>
+
   )
 }