From de9b3ecd68d7da3fc7beb4f5c96f63b53dde0206 Mon Sep 17 00:00:00 2001
From: crusader <crusader@loafle.com>
Date: Fri, 21 Jul 2017 17:10:06 +0900
Subject: [PATCH] router

---
 src/ts/@overflow/app/index.tsx                | 17 ++++++-----
 src/ts/@overflow/app/views/App.tsx            |  4 +++
 src/ts/@overflow/app/views/error/Error404.tsx | 27 +++++++++++++++++
 .../@overflow/app/views/layout/AppLayout.tsx  |  8 +++--
 .../app/views/layout/ErrorLayout.tsx          | 29 +++++++++++++++++++
 5 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 src/ts/@overflow/app/views/error/Error404.tsx
 create mode 100644 src/ts/@overflow/app/views/layout/ErrorLayout.tsx

diff --git a/src/ts/@overflow/app/index.tsx b/src/ts/@overflow/app/index.tsx
index 9e66e88..7e28aec 100644
--- a/src/ts/@overflow/app/index.tsx
+++ b/src/ts/@overflow/app/index.tsx
@@ -41,7 +41,12 @@ class Application {
     this.history = history;
   }
 
-  public async start(): Promise<void> {
+  public static async Run(): Promise<void> {
+    let application = new Application();
+    return application.start();
+  }
+
+  private async start(): Promise<void> {
     try {
       this.container = await Platform.getAppContainer(this.config.container.placeholderID);
       this.displayLoading();
@@ -59,7 +64,7 @@ class Application {
     }
   }
 
-  public initContext(): Promise<AppContext> {
+  private initContext(): Promise<AppContext> {
     const appContext = new Promise<AppContext>(resolve => {
       const context = AppContext.getContext();
       resolve(context);
@@ -68,7 +73,7 @@ class Application {
     return appContext;
   }
 
-  public initRpcClient(): Promise<WebSocketRPC> {
+  private initRpcClient(): Promise<WebSocketRPC> {
     const rpcClient = new Promise<WebSocketRPC>((resolve, reject) => {
       let client = new WebSocketRPC(this.config.rpc.url);
       client.initialize()
@@ -83,7 +88,7 @@ class Application {
     return rpcClient;
   }
 
-  public initSagaEffect(): Promise<void> {
+  private initSagaEffect(): Promise<void> {
     const rpcClient = new Promise<void>(resolve => {
       this.sagaMiddleware.run(sagas);
       resolve();
@@ -139,6 +144,4 @@ class Application {
 
 }
 
-let application = new Application();
-application.start();
-
+Application.Run();
diff --git a/src/ts/@overflow/app/views/App.tsx b/src/ts/@overflow/app/views/App.tsx
index fffbcb1..6805834 100644
--- a/src/ts/@overflow/app/views/App.tsx
+++ b/src/ts/@overflow/app/views/App.tsx
@@ -3,6 +3,9 @@ import { Route, Switch } from 'react-router-dom';
 
 import AccountLayout from './layout/AccountLayout';
 import AppLayout from './layout/AppLayout';
+import ErrorLayout from './layout/ErrorLayout';
+
+
 
 import TempLayout from './layout/TempLayout';
 
@@ -20,6 +23,7 @@ class App extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Switch>
+        <Route path='/error' component={ErrorLayout}/>
         <Route path='/temp' component={TempLayout}/>
         <Route path='/account' component={AccountLayout}/>
         <Route path='/' component={AppLayout}/>
diff --git a/src/ts/@overflow/app/views/error/Error404.tsx b/src/ts/@overflow/app/views/error/Error404.tsx
new file mode 100644
index 0000000..90c05d1
--- /dev/null
+++ b/src/ts/@overflow/app/views/error/Error404.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+class Error404 extends React.Component<Props, State> {
+
+  public constructor(props?: Props, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        URL is not exist.
+      </div>
+    );
+  }
+
+}
+
+
+export default Error404;
diff --git a/src/ts/@overflow/app/views/layout/AppLayout.tsx b/src/ts/@overflow/app/views/layout/AppLayout.tsx
index d996b3e..8059018 100644
--- a/src/ts/@overflow/app/views/layout/AppLayout.tsx
+++ b/src/ts/@overflow/app/views/layout/AppLayout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RouteComponentProps, RouteProps, Route } from 'react-router-dom';
+import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
@@ -34,8 +34,10 @@ export class AppLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-            <Route path={`${this.props.match.url}`} component={Home}/>
-
+            <Switch>
+              <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
+              <Redirect to='/error/404' />
+            </Switch>
           <Footer />
         </Segment>
       </Container >
diff --git a/src/ts/@overflow/app/views/layout/ErrorLayout.tsx b/src/ts/@overflow/app/views/layout/ErrorLayout.tsx
new file mode 100644
index 0000000..7e54b3f
--- /dev/null
+++ b/src/ts/@overflow/app/views/layout/ErrorLayout.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+
+import Error404 from '../error/Error404';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+class ErrorLayout extends React.Component<Props, State> {
+
+  public constructor(props?: Props, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+        <Switch>
+          <Route path={`${this.props.match.url}/404`} component={Error404}/>
+        </Switch>
+    );
+  }
+
+}
+
+
+export default ErrorLayout;