refactor: move layout logic to separate component (#257)

hasadna · Nov 29, 2023 · 7e8c160 · 7e8c160
1 parent 61e7794
commit 7e8c160
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,13 @@
 import { useCallback, useEffect } from 'react'
 import 'antd/dist/antd.min.css'
 import './App.scss'
-import { ConfigProvider, Layout } from 'antd'
+import { ConfigProvider } from 'antd'
 import 'leaflet/dist/leaflet.css'
-import styled from 'styled-components'
 import heIL from 'antd/es/locale/he_IL'
 import { BrowserRouter as Router, useSearchParams } from 'react-router-dom'
 import { PageSearchState, SearchContext } from './model/pageState'
 import moment from 'moment'
 import { useSessionStorage } from 'usehooks-ts'
-
 import { useLocation } from 'react-router-dom'
 import ReactGA from 'react-ga4'
 import { CacheProvider } from '@emotion/react'
@@ -21,25 +19,9 @@ import { ThemeProvider, createTheme } from '@mui/material'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 
-import RoutesList, { PAGES } from './routes'
-import MainHeader from './layout/header/Header'
-import SideBar from './layout/sidebar/SideBar'
-import LayoutContext from './layout/LayoutContext'
+import { PAGES } from './routes'
 import { EasterEgg } from './pages/EasterEgg/EasterEgg'
-const { Content } = Layout
-
-const StyledLayout = styled(Layout)`
-  height: 100vh;
-`
-const StyledContent = styled(Content)`
-  margin: 24px 16px 0;
-  overflow: auto;
-`
-
-const StyledBody = styled.div`
-  padding: 24px;
-  min-height: 360px;
-`
+import MainLayout from './layout'
 
 const theme = createTheme(
   {
@@ -110,19 +92,7 @@ const App = () => {
         <ThemeProvider theme={theme}>
           <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
             <ConfigProvider direction="rtl" locale={heIL}>
-              <StyledLayout className="main">
-                <LayoutContext>
-                  <SideBar />
-                  <Layout>
-                    <MainHeader />
-                    <StyledContent>
-                      <StyledBody>
-                        <RoutesList />
-                      </StyledBody>
-                    </StyledContent>
-                  </Layout>
-                </LayoutContext>
-              </StyledLayout>
+              <MainLayout />
             </ConfigProvider>
           </LocalizationProvider>
         </ThemeProvider>

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -0,0 +1,40 @@
+import { Layout } from 'antd'
+import MainHeader from './header/Header'
+import SideBar from './sidebar/SideBar'
+import styled from 'styled-components'
+import LayoutContext from './LayoutContext'
+import RoutesList from '../routes'
+
+const { Content } = Layout
+
+const StyledLayout = styled(Layout)`
+  height: 100vh;
+`
+const StyledContent = styled(Content)`
+  margin: 24px 16px 0;
+  overflow: auto;
+`
+const StyledBody = styled.div`
+  padding: 24px;
+  min-height: 360px;
+`
+
+function MainLayout() {
+  return (
+    <StyledLayout className="main">
+      <LayoutContext>
+        <SideBar />
+        <Layout>
+          <MainHeader />
+          <StyledContent>
+            <StyledBody>
+              <RoutesList />
+            </StyledBody>
+          </StyledContent>
+        </Layout>
+      </LayoutContext>
+    </StyledLayout>
+  )
+}
+
+export default MainLayout