From 64178717b4d52609b9b92017c1c9526bbad07091 Mon Sep 17 00:00:00 2001 From: crusader Date: Fri, 21 Jul 2017 14:57:12 +0900 Subject: [PATCH] router --- package.json | 1 + src/ts/@overflow/app/index.tsx | 12 +++-- src/ts/@overflow/app/redux/store.ts | 4 +- src/ts/@overflow/app/views/App.tsx | 38 +++++++++++++++ .../app/views/layout/AccountLayout.tsx | 35 ++++++++++++++ .../@overflow/app/views/layout/AppLayout.tsx | 47 +++++++++++++++++++ .../app/views/member/EmailConfirm.tsx | 24 ++++++++++ .../app/views/member/ForgotPassword.tsx | 20 +++----- src/ts/@overflow/app/views/member/SignIn.tsx | 18 +++---- src/ts/@overflow/app/views/member/SignUp.tsx | 19 ++++---- .../member/redux/action/pw_change.ts | 2 +- tsconfig.json | 3 +- 12 files changed, 178 insertions(+), 45 deletions(-) create mode 100644 src/ts/@overflow/app/views/App.tsx create mode 100644 src/ts/@overflow/app/views/layout/AccountLayout.tsx create mode 100644 src/ts/@overflow/app/views/layout/AppLayout.tsx diff --git a/package.json b/package.json index 7d2f3b1..190e6e7 100644 --- a/package.json +++ b/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", diff --git a/src/ts/@overflow/app/index.tsx b/src/ts/@overflow/app/index.tsx index 94f49cf..9099f29 100644 --- a/src/ts/@overflow/app/index.tsx +++ b/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 { @@ -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( -
, + , this.container, ); } } -let app = new App(); -app.start(); +let application = new Application(); +application.start(); diff --git a/src/ts/@overflow/app/redux/store.ts b/src/ts/@overflow/app/redux/store.ts index 94df1b4..1665dbc 100644 --- a/src/ts/@overflow/app/redux/store.ts +++ b/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 } from 'history'; +import { createHashHistory, History } from 'history'; + import reducer from './reducer'; import State from './state'; diff --git a/src/ts/@overflow/app/views/App.tsx b/src/ts/@overflow/app/views/App.tsx new file mode 100644 index 0000000..13a26b9 --- /dev/null +++ b/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; + history: History; +} +export interface State { +} + +class App extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + } + + public render(): JSX.Element { + return ( + + + + + + + + + ); + } +} + +export default App; + diff --git a/src/ts/@overflow/app/views/layout/AccountLayout.tsx b/src/ts/@overflow/app/views/layout/AccountLayout.tsx new file mode 100644 index 0000000..e193c79 --- /dev/null +++ b/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 { +} +export interface State { +} + +class AccountLayout extends React.Component { + + public constructor(props?: Props, context?: State) { + super(props, context); + + } + + public render(): JSX.Element { + return ( +
+ + + + +
+ ); + } + +} + + +export default AccountLayout; diff --git a/src/ts/@overflow/app/views/layout/AppLayout.tsx b/src/ts/@overflow/app/views/layout/AppLayout.tsx new file mode 100644 index 0000000..f86f789 --- /dev/null +++ b/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 { +} +export interface State { + sidebar_visible: boolean; + notification_visible: boolean; +} + +export class AppLayout extends React.Component { + + 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 ( + + + +
+ + +