old-ybbond

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

commit 5fe4429e9038cbbb6545b15c5123b4ca7452b00d
parent 9f5d0ecaf38d5a36fd8f3e214713170017fead5e
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon,  9 Mar 2020 20:29:57 +0700

feature(core): router and 2 placeholder pages

Diffstat:
Aflow-typed/npm/react-router_v5.x.x.js | 156+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mpackage.json | 2+-
Msrc/App.js | 43+++++++++++++++----------------------------
Asrc/Pages/CVPage.js | 49+++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/Pages/NotFoundPage.js | 21+++++++++++++++++++++
Asrc/Pages/UsesPage.js | 43+++++++++++++++++++++++++++++++++++++++++++
Msrc/index.js | 10+++++++++-
Mwebpack.config.js | 31++++++++++++++++---------------
Myarn.lock | 15+--------------

9 files changed, 311 insertions(+), 59 deletions(-)

diff --git a/flow-typed/npm/react-router_v5.x.x.js b/flow-typed/npm/react-router_v5.x.x.js
@@ -0,0 +1,156 @@
+// flow-typed signature: 38d16d2099bb076f9f375a333a268246
+// flow-typed version: 45d63d67fa/react-router_v5.x.x/flow_>=v0.104.x
+
+declare module "react-router" {
+  // NOTE: many of these are re-exported by react-router-dom and
+  // react-router-native, so when making changes, please be sure to update those
+  // as well.
+  declare export type Location = {
+    pathname: string,
+    search: string,
+    hash: string,
+    ...
+  };
+
+  declare export type LocationShape = {
+    pathname?: string,
+    search?: string,
+    hash?: string,
+    ...
+  };
+
+  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
+
+  declare export type RouterHistory = {
+    length: number,
+    location: Location,
+    action: HistoryAction,
+    listen(
+      callback: (location: Location, action: HistoryAction) => void
+    ): () => void,
+    push(path: string | LocationShape, state?: any): void,
+    replace(path: string | LocationShape, state?: any): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    canGo?: (n: number) => boolean,
+    block(
+      callback: string | (location: Location, action: HistoryAction) => ?string
+    ): () => void,
+    ...
+  };
+
+  declare export type Match = {
+    params: { [key: string]: ?string, ... },
+    isExact: boolean,
+    path: string,
+    url: string,
+    ...
+  };
+
+  declare export type ContextRouter = {|
+    history: RouterHistory,
+    location: Location,
+    match: Match,
+    staticContext?: StaticRouterContext
+  |};
+
+  declare export type GetUserConfirmation = (
+    message: string,
+    callback: (confirmed: boolean) => void
+  ) => void;
+
+  declare type StaticRouterContext = { url?: string, ... };
+
+  declare export class StaticRouter extends React$Component<{
+    basename?: string,
+    location?: string | Location,
+    context: StaticRouterContext,
+    children?: React$Node,
+    ...
+  }> {}
+
+  declare export class MemoryRouter extends React$Component<{
+    initialEntries?: Array<LocationShape | string>,
+    initialIndex?: number,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: React$Node,
+    ...
+  }> {}
+
+  declare export class Router extends React$Component<{
+    history: RouterHistory,
+    children?: React$Node,
+    ...
+  }> {}
+
+  declare export class Prompt extends React$Component<{
+    message: string | ((location: Location) => string | true),
+    when?: boolean,
+    ...
+  }> {}
+
+  declare export class Redirect extends React$Component<{|
+    to: string | LocationShape,
+    push?: boolean,
+    from?: string,
+    exact?: boolean,
+    strict?: boolean
+  |}> {}
+
+
+  declare export class Route extends React$Component<{|
+    component?: React$ComponentType<*>,
+    render?: (router: ContextRouter) => React$Node,
+    children?: React$ComponentType<ContextRouter> | React$Node,
+    path?: string | Array<string>,
+    exact?: boolean,
+    strict?: boolean,
+    location?: LocationShape,
+    sensitive?: boolean
+  |}> {}
+
+  declare export class Switch extends React$Component<{|
+    children?: React$Node,
+    location?: Location
+  |}> {}
+
+  declare export function withRouter<P>(
+    Component: React$ComponentType<{| ...ContextRouter, ...P |}>
+  ): React$ComponentType<P>;
+
+  declare type MatchPathOptions = {
+    path?: string | string[],
+    exact?: boolean,
+    strict?: boolean,
+    sensitive?: boolean,
+    ...
+  };
+
+  declare export function matchPath(
+    pathname: string,
+    options?: MatchPathOptions | string | string[]
+  ): null | Match;
+
+  declare export function useHistory(): $PropertyType<ContextRouter, 'history'>;
+  declare export function useLocation(): $PropertyType<ContextRouter, 'location'>;
+  declare export function useParams(): $PropertyType<$PropertyType<ContextRouter, 'match'>, 'params'>;
+  declare export function useRouteMatch(path?: MatchPathOptions | string | string[]): $PropertyType<ContextRouter, 'match'>;
+
+  declare export function generatePath(pattern?: string, params?: {...}): string;
+
+  declare export default {
+    StaticRouter: typeof StaticRouter,
+    MemoryRouter: typeof MemoryRouter,
+    Router: typeof Router,
+    Prompt: typeof Prompt,
+    Redirect: typeof Redirect,
+    Route: typeof Route,
+    Switch: typeof Switch,
+    withRouter: typeof withRouter,
+    matchPath: typeof matchPath,
+    generatePath: typeof generatePath,
+    ...
+  };
+}
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^5.1.2",
     "styled-components": "^5.0.1",
     "styled-theming": "^2.2.0"
   },
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,13 @@
 // @flow
 import React from 'react';
+import {Route, Switch} from 'react-router';
 import styled, {ThemeProvider} from 'styled-components';
 import theme from 'styled-theming';
 
+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 Style from './Theme/Style';
 import {colors} from './Theme/colors';
@@ -54,33 +57,17 @@ const App = () => {
               {dark ? '🌛' : '🌞'}
             </Button>
           </Text>
-          <Text>
-            Currently work as Frontend Engineer of kumparan.com in Jakarta,
-            Indonesia. Building it with React, React Native for Android and iOS.
-            <br />
-            <br />
-            Eager to learn.
-            <br />
-            Hardships.
-            <br />
-            I cannot say that I am humble, but I learn from experience that each
-            individuals, their own excellences.
-            <br />
-            I try to learn from everyone, and everything.
-            <br />
-            <br />
-            Contact:{' '}
-            <Link
-              href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"
-              target="_top"
-            >
-              bandungpenting@gmail.com
-            </Link>
-          </Text>
-          <Text>
-            Other site:{' '}
-            <Link href="https://reason.ybbond.dev">reason.ybbond.dev</Link>
-          </Text>
+          <Switch>
+            <Route exact path="/">
+              <CVPage />
+            </Route>
+            <Route path="/uses">
+              <UsesPage />
+            </Route>
+            <Route>
+              <NotFoundPage />
+            </Route>
+          </Switch>
         </InnerWrapper>
       </OuterWrapper>
     </ThemeProvider>
diff --git a/src/Pages/CVPage.js b/src/Pages/CVPage.js
@@ -0,0 +1,49 @@
+// @flow
+import React from 'react';
+import {useHistory} from 'react-router';
+
+import Link from '../Components/Link';
+import Text from '../Components/Text';
+
+const CVPage = () => {
+  let history = useHistory();
+
+  const handleClick = () => {
+    history.push('/uses');
+  };
+
+  return (
+    <React.Fragment>
+      <Text onClick={handleClick}>hehe</Text>
+      <Text>
+        Currently work as Frontend Engineer of kumparan.com in Jakarta,
+        Indonesia. Building it with React, React Native for Android and iOS.
+        <br />
+        <br />
+        Eager to learn.
+        <br />
+        Hardships.
+        <br />
+        I cannot say that I am humble, but I learn from experience that each
+        individuals, their own excellences.
+        <br />
+        I try to learn from everyone, and everything.
+        <br />
+        <br />
+        Contact:{' '}
+        <Link
+          href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"
+          target="_top"
+        >
+          bandungpenting@gmail.com
+        </Link>
+      </Text>
+      <Text>
+        Other site:{' '}
+        <Link href="https://reason.ybbond.dev">reason.ybbond.dev</Link>
+      </Text>
+    </React.Fragment>
+  );
+};
+
+export default React.memo<{}>(CVPage);
diff --git a/src/Pages/NotFoundPage.js b/src/Pages/NotFoundPage.js
@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+
+import Link from '../Components/Link';
+import Text from '../Components/Text';
+
+const NotFoundPage = () => {
+  return (
+    <Text>
+      Contact:{' '}
+      <Link
+        href="mailto:bandungpenting@gmail.com?Subject=From%20ybbond.dev"
+        target="_top"
+      >
+        bandungpenting@gmail.com
+      </Link>
+    </Text>
+  );
+};
+
+export default React.memo<{}>(NotFoundPage);
diff --git a/src/Pages/UsesPage.js b/src/Pages/UsesPage.js
@@ -0,0 +1,43 @@
+// @flow
+import React from 'react';
+import {useHistory} from 'react-router';
+
+import Text from '../Components/Text';
+import List from '../Components/List';
+
+const UsesPage = () => {
+  let history = useHistory();
+
+  const handleClick = () => {
+    history.push('/');
+  };
+  return (
+    <React.Fragment>
+      <Text onClick={handleClick}>hehe</Text>
+      <Text as="h2">Platform</Text>
+      <List>
+        <List as="li">{'Macbook Pro 2018 13" (Office)'}</List>
+        <List as="li">{'Low-End PC with Manjaro Linux XFCE (Home)'}</List>
+      </List>
+      <Text as="h2">Hardware</Text>
+      <List>
+        <List as="li">Ducky One 2 Mini Keyboard image</List>
+      </List>
+      <Text as="h2">Code Editor</Text>
+      <List>
+        <List as="li">Neovim image settings</List>
+        <List as="li">Visual Studio Code settings</List>
+      </List>
+      <Text as="h2">Terminal</Text>
+      <List>
+        <List as="li">tmux on Alacritty settings</List>
+        <List as="li">Kitty settings</List>
+        <List as="li">Z Shell (zsh) settings</List>
+        <List as="li">Ranger File Manager settings</List>
+        <List as="li">lazygit</List>
+      </List>
+    </React.Fragment>
+  );
+};
+
+export default React.memo<{}>(UsesPage);
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,18 @@
 // @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(<App />, rootElement);
+  render(
+    <Router history={history}>
+      <App />
+    </Router>,
+    rootElement,
+  );
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,30 +1,31 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: path.resolve(__dirname, "src/index"),
+  entry: path.resolve(__dirname, 'src/index'),
   module: {
     rules: [
       {
         test: /\.js$/,
-        include: path.resolve(__dirname, "src"),
-        loader: "babel-loader"
-      }
-    ]
+        include: path.resolve(__dirname, 'src'),
+        loader: 'babel-loader',
+      },
+    ],
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: "public/index.html",
-      favicon: "public/favicon.ico"
-    })
+      template: 'public/index.html',
+      favicon: 'public/favicon.ico',
+    }),
   ],
   devServer: {
-    contentBase: path.resolve(__dirname, "build"),
+    contentBase: path.resolve(__dirname, 'build'),
+    historyApiFallback: true,
     hot: true,
-    port: 3000
+    port: 3000,
   },
   output: {
-    path: path.resolve(__dirname, "build"),
-    filename: "bundle.js"
-  }
+    path: path.resolve(__dirname, 'build'),
+    filename: 'bundle.js',
+  },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -4672,20 +4672,7 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
   integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==
 
-react-router-dom@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
-  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.1.2"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-router@5.1.2:
+react-router@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
   integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==