commit bdf06580f6056f471643d00bcc8ec9b83138c80c parent 850c558cd0b10304525b6f968aec70c0315ee90a Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Wed, 25 Mar 2020 21:23:48 +0700 refactor(core): declutter main component App Diffstat:
| M | src/App.js | | | 102 | ++++++++++++++------------------------------------------------------------------ |
| A | src/Components/HeaderFooter.js | | | 77 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | src/index.js | | | 10 | +--------- |
| A | src/routes.js | | | 27 | +++++++++++++++++++++++++++ |
4 files changed, 122 insertions(+), 94 deletions(-)
diff --git a/src/App.js b/src/App.js @@ -1,16 +1,12 @@ // @flow import React from 'react'; -import {Route, Switch} from 'react-router'; import styled, {ThemeProvider} from 'styled-components'; +import {Router} from 'react-router'; +import {createBrowserHistory} from 'history'; import theme from 'styled-theming'; -import AboutPage from './Pages/AboutPage'; -import CVPage from './Pages/CVPage'; -import UsesPage from './Pages/UsesPage'; -import NotFoundPage from './Pages/NotFoundPage'; -import Button from './Components/Button'; -import Link from './Components/Link'; -import Text from './Components/Text'; +import routes from './routes'; +import HeaderFooter from './Components/HeaderFooter'; import Style from './Theme/Style'; import {colors} from './Theme/colors'; @@ -19,11 +15,6 @@ const backgroundColor = theme('mode', { dark: colors.dark, }); -const borderColor = theme('mode', { - light: colors.dark, - dark: colors.light, -}); - const OuterWrapper = styled.div` min-height: calc(100vh - 2px); background-color: ${backgroundColor}; @@ -39,15 +30,7 @@ const InnerWrapper = styled.div` } `; -const Header = styled.header` - margin-bottom: 30px; -`; - -const Footer = styled.footer` - margin-top: 70px; - padding: 20px 0; - border-top: 2px dashed ${borderColor}; -`; +const history = createBrowserHistory(); const App = () => { const [dark, setDark] = React.useState(true); @@ -64,69 +47,18 @@ const App = () => { }; return ( - <ThemeProvider theme={{mode: dark ? 'dark' : 'light'}}> - <Style dark={dark} /> - <OuterWrapper> - <InnerWrapper> - <Header> - <Text as="h1"> - Yohanes Bandung Bondowoso{' '} - <Button - aria-label="Toggle dark mode, is current mode dark?" - aria-pressed={dark} - onClick={toggleDark} - tabindex="0" - > - {dark ? '🌛' : '🌞'} - </Button> - </Text> - <Text> - <Link aria-label="Go to CV Page" to="/"> - CV - </Link>{' '} - -{' '} - <Link - aria-label="Go to page that lists the tools I use" - to="/uses" - > - Uses - </Link>{' '} - -{' '} - <Link aria-label="Go to About Page" to="/about"> - About - </Link>{' '} - </Text> - </Header> - <Switch> - <Route exact path="/"> - <CVPage /> - </Route> - <Route path="/uses"> - <UsesPage /> - </Route> - <Route path="/about"> - <AboutPage /> - </Route> - <Route> - <NotFoundPage /> - </Route> - </Switch> - <Footer> - <Text>See you sooner :)</Text> - <Text> - Contact:{' '} - <Link to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"> - bandungpenting@gmail.com - </Link> - </Text> - <Text> - Other site:{' '} - <Link to="https://reason.ybbond.dev">reason.ybbond.dev</Link> - </Text> - </Footer> - </InnerWrapper> - </OuterWrapper> - </ThemeProvider> + <Router history={history}> + <ThemeProvider theme={{mode: dark ? 'dark' : 'light'}}> + <Style dark={dark} /> + <OuterWrapper> + <InnerWrapper> + <HeaderFooter dark={dark} toggleDark={toggleDark}> + {routes()} + </HeaderFooter> + </InnerWrapper> + </OuterWrapper> + </ThemeProvider> + </Router> ); }; diff --git a/src/Components/HeaderFooter.js b/src/Components/HeaderFooter.js @@ -0,0 +1,77 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import theme from 'styled-theming'; + +import Button from './Button'; +import Link from './Link'; +import Text from './Text'; +import {colors} from '../Theme/colors'; + +const borderColor = theme('mode', { + light: colors.dark, + dark: colors.light, +}); + +const Header = styled.header` + margin-bottom: 30px; +`; + +const Footer = styled.footer` + margin-top: 70px; + padding: 20px 0; + border-top: 2px dashed ${borderColor}; +`; + +type HeaderFooterProps = { + children: React$Node, + dark: boolean, + toggleDark: () => void, +}; + +const HeaderFooter = ({children, dark, toggleDark}: HeaderFooterProps) => ( + <> + <Header> + <Text as="h1"> + Yohanes Bandung Bondowoso{' '} + <Button + aria-label="Toggle dark mode, is current mode dark?" + aria-pressed={dark} + onClick={toggleDark} + tabindex="0" + > + {dark ? '🌛' : '🌞'} + </Button> + </Text> + <Text> + <Link aria-label="Go to CV Page" to="/"> + CV + </Link>{' '} + -{' '} + <Link aria-label="Go to page that lists the tools I use" to="/uses"> + Uses + </Link>{' '} + -{' '} + <Link aria-label="Go to About Page" to="/about"> + About + </Link>{' '} + </Text> + </Header> + {children} + <Footer> + <Text>See you sooner :)</Text> + <Text> + Contact:{' '} + <Link to="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"> + bandungpenting@gmail.com + </Link> + </Text> + <Text> + Other site:{' '} + <Link to="https://reason.ybbond.dev">reason.ybbond.dev</Link> + </Text> + </Footer> + </> +); + +export default React.memo<HeaderFooterProps>(HeaderFooter); diff --git a/src/index.js b/src/index.js @@ -1,18 +1,10 @@ // @flow import React from 'react'; import {render} from 'react-dom'; -import {Router} from 'react-router'; -import {createBrowserHistory} from 'history'; import App from './App.js'; -const history = createBrowserHistory(); const rootElement = document.getElementById('react-app'); if (rootElement) { - render( - <Router history={history}> - <App /> - </Router>, - rootElement, - ); + render(<App />, rootElement); } diff --git a/src/routes.js b/src/routes.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; +import {Route, Switch} from 'react-router'; + +import AboutPage from './Pages/AboutPage'; +import CVPage from './Pages/CVPage'; +import UsesPage from './Pages/UsesPage'; +import NotFoundPage from './Pages/NotFoundPage'; + +export default function routes() { + return ( + <Switch> + <Route exact path="/"> + <CVPage /> + </Route> + <Route path="/uses"> + <UsesPage /> + </Route> + <Route path="/about"> + <AboutPage /> + </Route> + <Route> + <NotFoundPage /> + </Route> + </Switch> + ); +}