From f1f6af985c6ca562ca5049756c202f965cd843fa Mon Sep 17 00:00:00 2001 From: Sukchan Lee Date: Wed, 7 Jun 2017 21:16:05 +0900 Subject: [PATCH] update it --- webui/pages/index.js | 2 +- webui/src/App.js | 134 ----------------------- webui/src/components/Header.js | 96 ++++------------ webui/src/components/Layout.js | 52 +++++++++ webui/src/components/Sidebar.js | 2 +- webui/src/containers/App.js | 36 ++++++ webui/src/containers/HeaderContainer.js | 100 +++++++++++++++++ webui/src/containers/SidebarContainer.js | 79 +++++++++++++ webui/src/modules/sidebar.js | 8 +- 9 files changed, 292 insertions(+), 217 deletions(-) delete mode 100644 webui/src/App.js create mode 100644 webui/src/components/Layout.js create mode 100644 webui/src/containers/App.js create mode 100644 webui/src/containers/HeaderContainer.js create mode 100644 webui/src/containers/SidebarContainer.js diff --git a/webui/pages/index.js b/webui/pages/index.js index af4ea5e4d..a2a574a58 100644 --- a/webui/pages/index.js +++ b/webui/pages/index.js @@ -4,7 +4,7 @@ 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'; +import App from '../src/containers/App'; const Restricted = (Component) => { const checkAuth = (props) => { diff --git a/webui/src/App.js b/webui/src/App.js deleted file mode 100644 index beb5b7346..000000000 --- a/webui/src/App.js +++ /dev/null @@ -1,134 +0,0 @@ -import Package from '../package'; - -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'; - -import Header from './components/Header'; -import Sidebar from './components/Sidebar'; -import Container from './components/Container'; -import PdnContainer from './containers/PdnContainer'; -import UserContainer from './containers/UserContainer'; - -const Body = styled.div` - display: flex; - height: calc(100vh - 4rem); -` -const Content = styled.div` - display: flex; - align-items: center; - justify-content: center; - - font-size: 4rem; - line-height: 8rem; - color: ${oc.gray[5]}; - - border-top: 1px solid ${oc.gray[4]}; - box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20); - - background-color: white; -`; - -class App extends Component { - static propTypes = { - session: PropTypes.string.isRequired, - width: PropTypes.number.isRequired - } - - 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(); - } - } - - render() { - const title = 'Next.EPC ' + Package.version; - const session = this.props.session; - - const { - visible, - view - } = this.props; - - const { - handleToggle, - handleSelect - } = this; - - return ( -
- - {title} - -
- - - - - - - - - - {view} - - - {view} - - -
- ) - } -} - -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); diff --git a/webui/src/components/Header.js b/webui/src/components/Header.js index fa9bf7c33..415b0b3ff 100644 --- a/webui/src/components/Header.js +++ b/webui/src/components/Header.js @@ -1,4 +1,3 @@ -import { Component } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -7,11 +6,6 @@ import oc from 'open-color'; import MenuIcon from 'react-icons/lib/md/menu'; import ThumbnailIcon from './Thumbnail'; -import Session from '../lib/session'; - -import Logout from './Logout'; -import Dimmed from './Dimmed'; - const Wrapper = styled.div` display: flex; align-items: center; @@ -46,77 +40,25 @@ const Thumbnail = styled.div` cursor: pointer; `; -class Header extends Component { - state = { - logout: { - visible: false, - dimmed: false - } - } - - logoutHandler = { - show: () => { - this.setState({ - logout: { - ...this.state.logout, - visible: true, - dimmed: true - } - }) - }, - hide: () => { - this.setState({ - logout: { - ...this.state.logout, - visible: false, - dimmed: false - } - }) - }, - action: async () => { - this.setState({ - logout: { - ...this.state.logout, - visible: false, - } - }) - - const session = new Session() - await session.signout() - - // @FIXME next/router not working reliably so using window.location - window.location = '/' - } - } - - render() { - const { - logoutHandler - } = this; - - const { - logout - } = this.state; - - return ( - - - - - - Next.EPC - - - - - - - - ) - } +const propTypes = { + onSidebarToggle: PropTypes.func.isRequired, + onLogout: PropTypes.func.isRequired } +const Header = ({ onSidebarToggle, onLogout }) => ( + + + + + + Next.EPC + + + + + +) + +Header.propTypes = propTypes; + export default Header; \ No newline at end of file diff --git a/webui/src/components/Layout.js b/webui/src/components/Layout.js new file mode 100644 index 000000000..0c9cd51dd --- /dev/null +++ b/webui/src/components/Layout.js @@ -0,0 +1,52 @@ +import PropTypes from 'prop-types'; + +import styled from 'styled-components'; +import { media, transitions} from '../lib/style-utils'; +import oc from 'open-color'; + +import Head from 'next/head'; + +import HeaderContainer from '../containers/HeaderContainer'; +import SidebarContainer from '../containers/SidebarContainer'; + +const Main = styled.div` + display: flex; + height: calc(100vh - 4rem); +` + +const propTypes = { + title: PropTypes.string; +} + +const Layout = ({title, children}) => ( +
+ + {title} + + +
+ + {children} +
+
+) + +Layout.propTypes = propTypes; + +Layout.Content = styled.div` + display: flex; + align-items: center; + justify-content: center; + + font-size: 4rem; + line-height: 8rem; + color: ${oc.gray[5]}; + + border-top: 1px solid ${oc.gray[4]}; + box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20); + + background-color: white; +`; + + +export default Layout; \ No newline at end of file diff --git a/webui/src/components/Sidebar.js b/webui/src/components/Sidebar.js index 98fabe3b2..5fd93647f 100644 --- a/webui/src/components/Sidebar.js +++ b/webui/src/components/Sidebar.js @@ -105,7 +105,7 @@ Sidebar.propTypes = { Sidebar.defaultProps = { visible: false, width: "16rem", - selected: "PDN" + selected: "pdn" }; export default Sidebar; diff --git a/webui/src/containers/App.js b/webui/src/containers/App.js new file mode 100644 index 000000000..365194698 --- /dev/null +++ b/webui/src/containers/App.js @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import Layout from '../components/Layout'; +import Container from '../components/Container'; +import PdnContainer from '../containers/PdnContainer'; +import UserContainer from '../containers/UserContainer'; + +import Package from '../../package'; + +const App = ({ session, view }) => ( + + + + + + + + + {view} + + + {view} + + +) + +App.propTypes = { + session: PropTypes.object.isRequired, +} + +export default connect( + (state) => ({ + view: state.sidebar.get('view') + }) +)(App); \ No newline at end of file diff --git a/webui/src/containers/HeaderContainer.js b/webui/src/containers/HeaderContainer.js new file mode 100644 index 000000000..29c9537f3 --- /dev/null +++ b/webui/src/containers/HeaderContainer.js @@ -0,0 +1,100 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import * as sidebarActions from '../modules/sidebar'; + +import Session from '../lib/session'; + +import Header from '../components/Header'; +import Logout from '../components//Logout'; +import Dimmed from '../components//Dimmed'; + +class HeaderContainer extends Component { + componentWillMount() { + const { + SidebarActions + } = this.props; + } + + handleToggle = () => { + const { SidebarActions } = this.props; + SidebarActions.toggle(); + } + + state = { + logout: { + visible: false, + dimmed: false + } + } + + logoutHandler = { + show: () => { + this.setState({ + logout: { + ...this.state.logout, + visible: true, + dimmed: true + } + }) + }, + hide: () => { + this.setState({ + logout: { + ...this.state.logout, + visible: false, + dimmed: false + } + }) + }, + action: async () => { + this.setState({ + logout: { + ...this.state.logout, + visible: false, + } + }) + + const session = new Session() + await session.signout() + + // @FIXME next/router not working reliably so using window.location + window.location = '/' + } + } + + render() { + const { + handleSidebarToggle, + logoutHandler + } = this; + + const { + logout + } = this.state; + + return ( +
+
+ + +
+ ) + } +} + +export default connect( + null, + (dispatch) => ({ + SidebarActions: bindActionCreators(sidebarActions, dispatch) + }) +)(HeaderContainer); \ No newline at end of file diff --git a/webui/src/containers/SidebarContainer.js b/webui/src/containers/SidebarContainer.js new file mode 100644 index 000000000..0d1cb6fb5 --- /dev/null +++ b/webui/src/containers/SidebarContainer.js @@ -0,0 +1,79 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import compose from 'recompose/compose'; + +import withWidth, { SMALL } from '../lib/with-width'; +import * as sidebarActions from '../modules/sidebar'; + +import Sidebar from '../components/Sidebar'; + +class SidebarContainer extends Component { + static propTypes = { + width: PropTypes.number.isRequired + } + + 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(); + } + } + + render() { + const { + visible, + view + } = this.props; + + const { + handleToggle, + handleSelect + } = this; + + return ( + + ) + } +} + +const enhance = compose( + withWidth(), + connect( + (state) => ({ + visible: state.sidebar.get('isOpen'), + view: state.sidebar.get('view') + }), + (dispatch) => ({ + SidebarActions: bindActionCreators(sidebarActions, dispatch) + }) + ) +); + +export default enhance(SidebarContainer); \ No newline at end of file diff --git a/webui/src/modules/sidebar.js b/webui/src/modules/sidebar.js index 73ee3350e..6371befff 100644 --- a/webui/src/modules/sidebar.js +++ b/webui/src/modules/sidebar.js @@ -6,16 +6,16 @@ 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 setVisibility = createAction(SET_VISIBILITY); // isOpen export const setView = createAction(SET_VIEW); // view const initialState = Map({ - visible: false, + isOpen: false, view: 'pdn' }); export default handleActions({ - [TOGGLE]: (state, action) => state.set('visible', !state.get('visible')), - [SET_VISIBILITY]: (state, action) => state.set('visible', action.payload), + [TOGGLE]: (state, action) => state.set('isOpen', !state.get('isOpen')), + [SET_VISIBILITY]: (state, action) => state.set('isOpen', action.payload), [SET_VIEW]: (state, action) => state.set('view', action.payload) }, initialState); \ No newline at end of file