router

package.json

@@ -30,6 +30,7 @@
     "@types/react-redux": "^4.4.46",
     "@types/react-router": "^4.0.14",
     "@types/react-router-dom": "^4.0.7",
+    "@types/react-router-redux": "^5.0.3",
     "@types/react-tap-event-plugin": "^0.0.30",
     "@types/redux": "^3.6.0",
     "awesome-typescript-loader": "^3.1.3",

src/ts/@overflow/app/index.tsx

@@ -21,14 +21,14 @@ import appConfig, { Config } from './config';
 import sagas from './redux/saga';
 // import routes from './router';
 
-import {Layout} from './views/layout/Layout';
+import App from './views/App';
 
 injectTapEventPlugin();
 
 const rpcURL = 'ws://127.0.0.1:18081/rpc';
 
 
-class App {
+class Application {
   private config: Config;
   private container: HTMLElement;
   private context: AppContext;
@@ -41,6 +41,7 @@ class App {
     this.config = appConfig;
     this.sagaMiddleware = sagaMiddleware;
     this.store = store;
+    this.history = history;
   }
 
   public async start(): Promise<void> {
@@ -56,6 +57,7 @@ class App {
 
       this.displayApp();
     } catch (e) {
+      console.error(e);
       this.displayError(e);
     }
   }
@@ -129,13 +131,13 @@ class App {
 
   private displayApp(): void {
     ReactDOM.render(
-      <div><Layout /></div>,
+      <App store={this.store} history={this.history} />,
       this.container,
     );
   }
 
 }
 
-let app = new App();
+let application = new Application();
-app.start();
+application.start();
 

src/ts/@overflow/app/redux/store.ts

@@ -1,8 +1,8 @@
 import { applyMiddleware, compose, createStore, Store } from 'redux';
 import { routerMiddleware } from 'react-router-redux';
 import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
-import { History } from 'history';
+import { createHashHistory, History } from 'history';
-import { createHashHistory } from 'history';
+
 
 import reducer from './reducer';
 import State from './state';

src/ts/@overflow/app/views/App.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { History } from 'history';
+import { Provider, Store } from 'react-redux';
+import { Route, Switch } from 'react-router-dom';
+import { ConnectedRouter } from 'react-router-redux';
+
+import AccountLayout from './layout/AccountLayout';
+import AppLayout from './layout/AppLayout';
+
+export interface Props {
+  store: Store<any>;
+  history: History;
+}
+export interface State {
+}
+
+class App extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Provider store={this.props.store}>
+        <ConnectedRouter history={this.props.history}>
+          <Switch>
+            <Route path='/account' component={AccountLayout}/>
+            <Route path='/' component={AppLayout}/>
+          </Switch>
+        </ConnectedRouter>
+      </Provider>
+    );
+  }
+}
+
+export default App;
+

src/ts/@overflow/app/views/layout/AccountLayout.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route } from 'react-router-dom';
+
+import SignIn from '../member/SignIn';
+import SignUp from '../member/SignUp';
+import EmailConfirm from '../member/EmailConfirm';
+import ForgotPassword from '../member/ForgotPassword';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+}
+
+class AccountLayout extends React.Component<Props, State> {
+
+  public constructor(props?: Props, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+        <div>
+          <Route path={`${this.props.match.url}/signin`} component={SignIn}/>
+          <Route path={`${this.props.match.url}/signup`} component={SignUp}/>
+          <Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/>
+          <Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/>
+        </div>
+    );
+  }
+
+}
+
+
+export default AccountLayout;

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { RouteComponentProps, RouteProps, Route } 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';
+import { LeftMenu } from './LeftMenu';
+
+import Home from '../Home';
+
+export interface Props extends RouteComponentProps<any> {
+}
+export interface State {
+  sidebar_visible: boolean;
+  notification_visible: boolean;
+}
+
+export class AppLayout extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      sidebar_visible: true,
+      notification_visible: false,
+    };
+  }
+
+  public onSidebar = () => {
+    this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <LeftMenu />
+        <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
+          <Header />
+            <Route path={`${this.props.match.url}`} component={Home}/>
+
+          <Footer />
+        </Segment>
+      </Container >
+    );
+  }
+}
+
+export default AppLayout;
+

src/ts/@overflow/app/views/member/EmailConfirm.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import PWChangeContainer from '@overflow/member/react/PWChange';
+
+export interface Props {
+}
+export interface State {
+}
+
+class EmailConfirm extends React.Component<RouteComponentProps<Props>, State> {
+  public constructor(props?: RouteComponentProps<Props>, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <PWChangeContainer/>
+    );
+  }
+}
+
+
+export default EmailConfirm;

src/ts/@overflow/app/views/member/ForgotPassword.tsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import PWChangeContainer from '@overflow/member/react/PWChange';
-import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
-import AppContext from '@overflow/commons/context';
-import inject from '@overflow/commons/context/decorator/inject';
 
-class PWChange extends React.Component<RouteComponentProps<object>, object> {
+export interface Props {
-  @inject()
+}
-  private client: WebSocketRPC;
+export interface State {
+}
 
-  public constructor(props?: RouteComponentProps<object>, context?: object) {
+class ForgotPassword extends React.Component<RouteComponentProps<Props>, State> {
+  public constructor(props?: RouteComponentProps<Props>, context?: State) {
     super(props, context);
 
-    let con = AppContext.get<WebSocketRPC>();
   }
 
   public render(): JSX.Element {
@@ -20,11 +18,7 @@ class PWChange extends React.Component<RouteComponentProps<object>, object> {
       <PWChangeContainer/>
     );
   }
-
-  private test(@inject() c: WebSocketRPC): void {
-    console.log('');
-  }
 }
 
 
-export default PWChange;
+export default ForgotPassword;

src/ts/@overflow/app/views/member/SignIn.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import SignInContainer from '@overflow/member/react/SignIn';
-import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
-import AppContext from '@overflow/commons/context';
-import inject from '@overflow/commons/context/decorator/inject';
 
-class Signin extends React.Component<RouteComponentProps<object>, object> {
+export interface Props {
-  @inject()
+}
-  private client: WebSocketRPC;
+export interface State {
+}
 
-  public constructor(props?: RouteComponentProps<object>, context?: object) {
+class Signin extends React.Component<RouteComponentProps<Props>, object> {
+
+  public constructor(props?: RouteComponentProps<Props>, context?: State) {
     super(props, context);
 
-    let con = AppContext.get<WebSocketRPC>();
   }
 
   public render(): JSX.Element {
@@ -21,9 +20,6 @@ class Signin extends React.Component<RouteComponentProps<object>, object> {
     );
   }
 
-  private test(@inject() c: WebSocketRPC): void {
-    console.log('');
-  }
 }
 
 

src/ts/@overflow/app/views/member/SignUp.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import SignUpContainer from '@overflow/member/react/SignUp';
-import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
-import AppContext from '@overflow/commons/context';
-import inject from '@overflow/commons/context/decorator/inject';
 
-class SignIUp extends React.Component<RouteComponentProps<object>, object> {
+export interface Props {
-  @inject()
+}
-  private client: WebSocketRPC;
+export interface State {
+}
 
-  public constructor(props?: RouteComponentProps<object>, context?: object) {
+
+class SignIUp extends React.Component<RouteComponentProps<Props>, State> {
+
+  public constructor(props?: RouteComponentProps<Props>, context?: State) {
     super(props, context);
 
-    let con = AppContext.get<WebSocketRPC>();
   }
 
   public render(): JSX.Element {
@@ -21,9 +21,6 @@ class SignIUp extends React.Component<RouteComponentProps<object>, object> {
     );
   }
 
-  private test(@inject() c: WebSocketRPC): void {
-    console.log('');
-  }
 }
 
 

tsconfig.json

@@ -25,8 +25,7 @@
       "reflect-metadata"
     ],
     "typeRoots": [
-      "node_modules/@types",
+      "node_modules/@types"
-      "types"
     ]
 
   },