router
This commit is contained in:
parent
7fa9c30e6d
commit
64178717b4
|
@ -30,6 +30,7 @@
|
||||||
"@types/react-redux": "^4.4.46",
|
"@types/react-redux": "^4.4.46",
|
||||||
"@types/react-router": "^4.0.14",
|
"@types/react-router": "^4.0.14",
|
||||||
"@types/react-router-dom": "^4.0.7",
|
"@types/react-router-dom": "^4.0.7",
|
||||||
|
"@types/react-router-redux": "^5.0.3",
|
||||||
"@types/react-tap-event-plugin": "^0.0.30",
|
"@types/react-tap-event-plugin": "^0.0.30",
|
||||||
"@types/redux": "^3.6.0",
|
"@types/redux": "^3.6.0",
|
||||||
"awesome-typescript-loader": "^3.1.3",
|
"awesome-typescript-loader": "^3.1.3",
|
||||||
|
|
|
@ -21,14 +21,14 @@ import appConfig, { Config } from './config';
|
||||||
import sagas from './redux/saga';
|
import sagas from './redux/saga';
|
||||||
// import routes from './router';
|
// import routes from './router';
|
||||||
|
|
||||||
import {Layout} from './views/layout/Layout';
|
import App from './views/App';
|
||||||
|
|
||||||
injectTapEventPlugin();
|
injectTapEventPlugin();
|
||||||
|
|
||||||
const rpcURL = 'ws://127.0.0.1:18081/rpc';
|
const rpcURL = 'ws://127.0.0.1:18081/rpc';
|
||||||
|
|
||||||
|
|
||||||
class App {
|
class Application {
|
||||||
private config: Config;
|
private config: Config;
|
||||||
private container: HTMLElement;
|
private container: HTMLElement;
|
||||||
private context: AppContext;
|
private context: AppContext;
|
||||||
|
@ -41,6 +41,7 @@ class App {
|
||||||
this.config = appConfig;
|
this.config = appConfig;
|
||||||
this.sagaMiddleware = sagaMiddleware;
|
this.sagaMiddleware = sagaMiddleware;
|
||||||
this.store = store;
|
this.store = store;
|
||||||
|
this.history = history;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async start(): Promise<void> {
|
public async start(): Promise<void> {
|
||||||
|
@ -56,6 +57,7 @@ class App {
|
||||||
|
|
||||||
this.displayApp();
|
this.displayApp();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
this.displayError(e);
|
this.displayError(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -129,13 +131,13 @@ class App {
|
||||||
|
|
||||||
private displayApp(): void {
|
private displayApp(): void {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div><Layout /></div>,
|
<App store={this.store} history={this.history} />,
|
||||||
this.container,
|
this.container,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let app = new App();
|
let application = new Application();
|
||||||
app.start();
|
application.start();
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { applyMiddleware, compose, createStore, Store } from 'redux';
|
import { applyMiddleware, compose, createStore, Store } from 'redux';
|
||||||
import { routerMiddleware } from 'react-router-redux';
|
import { routerMiddleware } from 'react-router-redux';
|
||||||
import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
|
import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
|
||||||
import { History } from 'history';
|
import { createHashHistory, History } from 'history';
|
||||||
import { createHashHistory } from 'history';
|
|
||||||
|
|
||||||
import reducer from './reducer';
|
import reducer from './reducer';
|
||||||
import State from './state';
|
import State from './state';
|
||||||
|
|
38
src/ts/@overflow/app/views/App.tsx
Normal file
38
src/ts/@overflow/app/views/App.tsx
Normal file
|
@ -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;
|
||||||
|
|
35
src/ts/@overflow/app/views/layout/AccountLayout.tsx
Normal file
35
src/ts/@overflow/app/views/layout/AccountLayout.tsx
Normal file
|
@ -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;
|
47
src/ts/@overflow/app/views/layout/AppLayout.tsx
Normal file
47
src/ts/@overflow/app/views/layout/AppLayout.tsx
Normal file
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
@ -1,18 +1,16 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { RouteComponentProps } from 'react-router';
|
import { RouteComponentProps } from 'react-router';
|
||||||
import PWChangeContainer from '@overflow/member/react/PWChange';
|
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);
|
super(props, context);
|
||||||
|
|
||||||
let con = AppContext.get<WebSocketRPC>();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {
|
||||||
|
@ -20,11 +18,7 @@ class PWChange extends React.Component<RouteComponentProps<object>, object> {
|
||||||
<PWChangeContainer/>
|
<PWChangeContainer/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private test(@inject() c: WebSocketRPC): void {
|
|
||||||
console.log('');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default PWChange;
|
export default ForgotPassword;
|
||||||
|
|
|
@ -1,18 +1,17 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { RouteComponentProps } from 'react-router';
|
import { RouteComponentProps } from 'react-router';
|
||||||
import SignInContainer from '@overflow/member/react/SignIn';
|
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);
|
super(props, context);
|
||||||
|
|
||||||
let con = AppContext.get<WebSocketRPC>();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {
|
||||||
|
@ -21,9 +20,6 @@ class Signin extends React.Component<RouteComponentProps<object>, object> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private test(@inject() c: WebSocketRPC): void {
|
|
||||||
console.log('');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { RouteComponentProps } from 'react-router';
|
import { RouteComponentProps } from 'react-router';
|
||||||
import SignUpContainer from '@overflow/member/react/SignUp';
|
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);
|
super(props, context);
|
||||||
|
|
||||||
let con = AppContext.get<WebSocketRPC>();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): JSX.Element {
|
public render(): JSX.Element {
|
||||||
|
@ -21,9 +21,6 @@ class SignIUp extends React.Component<RouteComponentProps<object>, object> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private test(@inject() c: WebSocketRPC): void {
|
|
||||||
console.log('');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -25,8 +25,7 @@
|
||||||
"reflect-metadata"
|
"reflect-metadata"
|
||||||
],
|
],
|
||||||
"typeRoots": [
|
"typeRoots": [
|
||||||
"node_modules/@types",
|
"node_modules/@types"
|
||||||
"types"
|
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user