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:
| A | flow-typed/npm/react-router_v5.x.x.js | | | 156 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | package.json | | | 2 | +- |
| M | src/App.js | | | 43 | +++++++++++++++---------------------------- |
| A | src/Pages/CVPage.js | | | 49 | +++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | src/Pages/NotFoundPage.js | | | 21 | +++++++++++++++++++++ |
| A | src/Pages/UsesPage.js | | | 43 | +++++++++++++++++++++++++++++++++++++++++++ |
| M | src/index.js | | | 10 | +++++++++- |
| M | webpack.config.js | | | 31 | ++++++++++++++++--------------- |
| M | yarn.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==