create MainLayout component

client/src/components/MainLayout/MainLayout.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { View } from 'react-native'
+import styled from 'styled-components'
+import Sidebar from './Sidebar'
+import MenuIcon from './MenuIcon'
+
+const Wrapper = styled(View)`
+  flex: 1;
+  flex-direction: row;
+  height: 100%;
+  min-height: 100vh;
+  background: var(--light-grayish-blue);
+`
+
+interface MainLayoutProps {
+  children: JSX.Element
+}
+
+export const SidebarContext = React.createContext({ sidebarOpen: false })
+
+const MainLayout = ({ children }: MainLayoutProps) => {
+  const [sidebarOpen, setSidebarOpen] = React.useState(true)
+  return (
+    <SidebarContext.Provider value={{ sidebarOpen }}>
+      <Wrapper>
+        <Sidebar open={sidebarOpen} />
+        <MenuIcon onPress={() => setSidebarOpen(!sidebarOpen)} />
+        {children}
+      </Wrapper>
+    </SidebarContext.Provider>
+  )
+}
+
+export default MainLayout

client/src/screens/Home/components/MenuIcon.tsx → client/src/components/MainLayout/MenuIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Image, TouchableOpacity } from 'react-native'
 import styled from 'styled-components'
-import menuIcon from '../../../assets/images/icons/menu.svg'
+import menuIcon from '../../assets/images/icons/menu.svg'
 
 const Wrapper = styled(TouchableOpacity)`
   padding: 10px;

client/src/screens/Home/components/Sidebar.tsx → client/src/components/MainLayout/Sidebar.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { View, Image } from 'react-native'
 import styled from 'styled-components'
-import logoSmall from '../../../assets/images/logo-small.svg'
-import { Link } from '../../../components/Router'
-import Button, { Variants as ButtonVariants } from '../../../components/Button'
+import logoSmall from '../../assets/images/logo-small.svg'
+import { Link } from '../Router'
+import Button, { Variants as ButtonVariants } from '../Button'
 import SidebarItem from './SidebarItem'
-import dashbaordIcon from '../../../assets/images/icons/dashboard.svg'
-import rewardsIcon from '../../../assets/images/icons/rewards.svg'
-import settingsIcon from '../../../assets/images/icons/settings.svg'
+import dashbaordIcon from '../../assets/images/icons/dashboard.svg'
+import rewardsIcon from '../../assets/images/icons/rewards.svg'
+import settingsIcon from '../../assets/images/icons/settings.svg'
 
 const Wrapper = styled(View)<{ open: boolean }>`
   width: 300px;

client/src/screens/Home/components/SidebarItem.tsx → client/src/components/MainLayout/SidebarItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { View, Text, Image } from 'react-native'
 import styled from 'styled-components'
-import { Link } from '../../../components/Router'
+import { Link } from '../Router'
 
 const Wrapper = styled(View)`
   flex-direction: row;

client/src/components/MainLayout/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './MainLayout'
+export * from './MainLayout'

client/src/components/Router/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Router, Route, Switch, Redirect, Link } from './Router'
+import MainLayout from '../MainLayout'
 import Login from '../../screens/Login'
 import Home from '../../screens/Home'
 import { useUserContext } from '../../screens/Login/UserContext'
@@ -13,16 +14,18 @@ export default () => {
   return (
     <Router>
       {!userState.user ? (
-        <Route
-          path="/"
-          render={() => (
-            <Switch>
-              <Route path="/" exact component={Home} />
-              {/* <Route path="/policies" component={Policies} /> */}
-              <Route path="*" render={() => <Redirect to="/" />} />
-            </Switch>
-          )}
-        />
+        <MainLayout>
+          <Route
+            path="/"
+            render={() => (
+              <Switch>
+                <Route path="/" exact component={Home} />
+                {/* <Route path="/policies" component={Policies} /> */}
+                <Route path="*" render={() => <Redirect to="/" />} />
+              </Switch>
+            )}
+          />
+        </MainLayout>
       ) : (
         <Switch>
           <Route path="/login" component={Login} />

client/src/screens/Home/Home.tsx

@@ -2,16 +2,15 @@ import * as React from 'react'
 import { View, Text } from 'react-native'
 import styled from 'styled-components'
 import { Flex, Box as FlexBox } from '@rebass/grid'
-import Sidebar from './components/Sidebar'
-import MenuIcon from './components/MenuIcon'
+import { SidebarContext } from '../../components/MainLayout'
 import ContentBox, { Variants as ContentBoxVariants } from './components/ContentBox'
 
-const Wrapper = styled(View)`
+const Wrapper = styled(View)<{ sidebarOpen: boolean }>`
   flex: 1;
-  flex-direction: row;
-  height: 100%;
-  min-height: 100vh;
-  background: var(--light-grayish-blue);
+  align-items: center;
+  margin-top: 97px;
+  ${props => props.sidebarOpen && 'margin-left: 300px;'}
+  transition: margin-left 0.3s ease;
 `
 
 const Title = styled(Text)`
@@ -24,59 +23,47 @@ const Title = styled(Text)`
   margin-bottom: 60px;
 `
 
-const ContentWrapper = styled(View)<{ sidebarOpen: boolean }>`
-  flex: 1;
-  align-items: center;
-  margin-top: 97px;
-  ${props => props.sidebarOpen && 'margin-left: 300px;'}
-  transition: margin-left 0.3s ease;
-`
-
 const Home = () => {
+  const { sidebarOpen } = React.useContext(SidebarContext)
   const firstName = 'Jason'
-  const [sidebarOpen, setSidebarOpen] = React.useState(true)
   return (
-    <Wrapper>
-      <Sidebar open={sidebarOpen} />
-      <MenuIcon onPress={() => setSidebarOpen(!sidebarOpen)} />
-      <ContentWrapper sidebarOpen={sidebarOpen}>
-        <View style={{ width: '75%' }}>
-          <Title>{`Hello, ${firstName}!`}</Title>
-          <Flex
-            width={1}
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            mb={50}
-          >
-            <FlexBox width={1} pr="15px">
-              <ContentBox
-                title="4.8"
-                subtitle="Your Renter Rating"
-                variant={ContentBoxVariants.rating}
-              />
-            </FlexBox>
-            <FlexBox width={1} px="15px">
-              <ContentBox title="$8420" subtitle="Total Savings" />
-            </FlexBox>
-            <FlexBox width={1} pl="15px">
-              <ContentBox title="$4210" subtitle="Savings from Landlord" />
-            </FlexBox>
-          </Flex>
-          <Flex width={1} flexDirection="row" justifyContent="space-between" alignItems="center">
-            <FlexBox width={2 / 3} pr="10px">
-              <ContentBox title="4.8" subtitle="Your Renter Rating" />
-            </FlexBox>
-            <FlexBox width={1 / 3} pl="15px">
-              <ContentBox
-                title="$262"
-                subtitle="Earned Interest"
-                variant={ContentBoxVariants.cyanTitle}
-              />
-            </FlexBox>
-          </Flex>
-        </View>
-      </ContentWrapper>
+    <Wrapper sidebarOpen={sidebarOpen}>
+      <View style={{ width: '75%' }}>
+        <Title>{`Hello, ${firstName}!`}</Title>
+        <Flex
+          width={1}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={50}
+        >
+          <FlexBox width={1} pr="15px">
+            <ContentBox
+              title="4.8"
+              subtitle="Your Renter Rating"
+              variant={ContentBoxVariants.rating}
+            />
+          </FlexBox>
+          <FlexBox width={1} px="15px">
+            <ContentBox title="$8420" subtitle="Total Savings" />
+          </FlexBox>
+          <FlexBox width={1} pl="15px">
+            <ContentBox title="$4210" subtitle="Savings from Landlord" />
+          </FlexBox>
+        </Flex>
+        <Flex width={1} flexDirection="row" justifyContent="space-between" alignItems="center">
+          <FlexBox width={2 / 3} pr="10px">
+            <ContentBox title="4.8" subtitle="Your Renter Rating" />
+          </FlexBox>
+          <FlexBox width={1 / 3} pl="15px">
+            <ContentBox
+              title="$262"
+              subtitle="Earned Interest"
+              variant={ContentBoxVariants.cyanTitle}
+            />
+          </FlexBox>
+        </Flex>
+      </View>
     </Wrapper>
   )
 }