sysmocom
/
open5gs
forked from acouzens/open5gs
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

apply redux

This commit is contained in:
Sukchan Lee 2017-06-05 14:01:29 +09:00
parent 6a4aa9b19c
commit e42a1a82b3
7 changed files with 118 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webui/package.json
View File

@ -32,6 +32,7 @@
"react-onclickoutside": "^5.11.1",
"react-redux": "^5.0.5",
"react-transition-group": "^1.1.3",
"recompose": "^0.23.4",
"redux": "^3.6.0",
"redux-actions": "^2.0.3",
"redux-saga": "^0.15.3",

4
webui/pages/index.js
View File

@ -1,5 +1,7 @@
import PropTypes from 'prop-types';
import withRedux from 'next-redux-wrapper';
import { initStore } from '../src/store.js';
import withSession from '../src/lib/with-session';
import Login from '../src/components/Login';
import App from '../src/App';
@ -23,4 +25,4 @@ Index.propTypes = {
session: PropTypes.object.isRequired
};
export default Index;
export default withRedux(initStore)(Index);

111
webui/src/App.js
View File

@ -4,6 +4,14 @@ import { Component } from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import compose from 'recompose/compose';
import Session from './lib/session';
import withWidth, { SMALL } from './lib/with-width';
import * as sidebarActions from './modules/sidebar';
import styled from 'styled-components';
import oc from 'open-color';
import { media, transitions } from './lib/style-utils';
@ -14,9 +22,6 @@ import Container from './components/Container';
import PdnContainer from './containers/PdnContainer';
import UserContainer from './containers/UserContainer';
import Session from './lib/session';
import withWidth, { SMALL } from './lib/with-width';
const Body = styled.div`
display: flex;
height: calc(100vh - 4rem);
@ -37,41 +42,36 @@ const Content = styled.div`
`;
class App extends Component {
state = {
sidebar: {
visible: this.props.width === SMALL ? false : true,
view: "user"
},
error: {
status: false,
message: ''
},
};
static propTypes = {
session: PropTypes.string.isRequired,
width: PropTypes.number.isRequired
}
sidebarHandler = {
toggle: () => {
this.setState({
sidebar: {
...this.state.sidebar,
visible: !this.state.sidebar.visible
}
})
},
selectView: (view) => {
this.setState({
sidebar: {
...this.state.sidebar,
visible: this.props.width === SMALL ?
!this.state.sidebar.visible :
this.state.sidebar.visible,
view: view
}
})
componentWillMount() {
const {
width,
SidebarActions
} = this.props;
if (width !== SMALL) {
SidebarActions.setVisibility(true);
}
}
handleToggle = () => {
const { SidebarActions } = this.props;
SidebarActions.toggle();
}
handleSelect = (view) => {
const {
width,
SidebarActions
} = this.props;
SidebarActions.setView(view);
if (width === SMALL) {
SidebarActions.toggle();
}
}
@ -80,35 +80,37 @@ class App extends Component {
const session = this.props.session;
const {
sidebarHandler
} = this;
visible,
view
} = this.props;
const {
sidebar
} = this.state;
handleToggle,
handleSelect
} = this;
return (
<div>
<Head>
<title>{title}</title>
</Head>
<Header onMenuAction={sidebarHandler.toggle}/>
<Header onMenuAction={handleToggle}/>
<Body>
<Sidebar
visible={sidebar.visible}
selected={sidebar.view}
onSelect={sidebarHandler.selectView}/>
<Container visible={sidebar.view === 'pdn'}>
visible={visible}
selected={view}
onSelect={handleSelect}/>
<Container visible={view === 'pdn'}>
<PdnContainer/>
</Container>
<Container visible={sidebar.view === 'user'}>
<Container visible={view === 'user'}>
<UserContainer/>
</Container>
<Container visible={sidebar.view === 'test1'}>
<Content>{sidebar.view}</Content>
<Container visible={view === 'test1'}>
<Content>{view}</Content>
</Container>
<Container visible={sidebar.view === 'test3'}>
<Content>{sidebar.view}</Content>
<Container visible={view === 'test3'}>
<Content>{view}</Content>
</Container>
</Body>
</div>
@ -116,4 +118,17 @@ class App extends Component {
}
}
export default withWidth()(App);
const enhance = compose(
withWidth(),
connect(
(state) => ({
visible: state.sidebar.get('visible'),
view: state.sidebar.get('view')
}),
(dispatch) => ({
SidebarActions: bindActionCreators(sidebarActions, dispatch)
})
)
);
export default enhance(App);

7
webui/src/modules/index.js Normal file
View File

@ -0,0 +1,7 @@
import { combineReducers } from 'redux';
import sidebar from './sidebar';
export default combineReducers({
sidebar
});

21
webui/src/modules/sidebar.js Normal file
View File

@ -0,0 +1,21 @@
import { createAction, handleActions } from 'redux-actions';
import { Map } from 'immutable';
const TOGGLE = 'sidebar/TOGGLE';
const SET_VISIBILITY = 'sidebar/SET_VISIBILITY';
const SET_VIEW = 'sidebar/SET_VIEW';
export const toggle = createAction(TOGGLE); // No payload
export const setVisibility = createAction(SET_VISIBILITY); // visible
export const setView = createAction(SET_VIEW); // view
const initialState = Map({
visible: false,
view: 'pdn'
});
export default handleActions({
[TOGGLE]: (state, action) => state.set('visible', !state.get('visible')),
[SET_VISIBILITY]: (state, action) => state.set('visible', action.payload),
[SET_VIEW]: (state, action) => state.set('view', action.payload)
}, initialState);

7
webui/src/store.js Normal file
View File

@ -0,0 +1,7 @@
import { createStore } from 'redux';
import reducers from './modules';
export const initStore = () => {
return createStore(reducers);
}

19
webui/yarn.lock
View File

@ -1170,6 +1170,10 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
strip-ansi "^3.0.0"
supports-color "^2.0.0"
change-emitter@^0.1.2:
version "0.1.6"
resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
chokidar@^1.4.3:
version "1.7.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@ -1742,7 +1746,7 @@ extsprintf@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies:
@ -2062,7 +2066,7 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
hoist-non-react-statics@^1.0.0, hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
@ -3415,6 +3419,15 @@ readdirp@^2.0.0:
readable-stream "^2.0.2"
set-immediate-shim "^1.0.1"
recompose@^0.23.4:
version "0.23.4"
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.23.4.tgz#af09e4e08424effa449c9b793037166f7b30644a"
dependencies:
change-emitter "^0.1.2"
fbjs "^0.8.1"
hoist-non-react-statics "^1.0.0"
symbol-observable "^1.0.4"
redbox-react@^1.2.5:
version "1.3.6"
resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.6.tgz#70314c57c066257eb70b0a24dc794b5cef4f1c4e"
@ -3925,7 +3938,7 @@ supports-color@^3.1.0, supports-color@^3.2.3:
dependencies:
has-flag "^1.0.0"
symbol-observable@^1.0.2:
symbol-observable@^1.0.2, symbol-observable@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"