old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README

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:
Msrc/App.js | 102++++++++++++++------------------------------------------------------------------
Asrc/Components/HeaderFooter.js | 77+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/index.js | 10+---------
Asrc/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>
+  );
+}