From e087920ba500ded56f075ecba0f7881bf0be9322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maren=20S=C3=BCwer?= Date: Mon, 2 Jul 2018 16:05:58 +0200 Subject: [PATCH] added mockup users page and login page --- scm-ui/src/Login.js | 36 +++++++++++++++++++ scm-ui/src/Main.js | 4 ++- scm-ui/src/containers/Page.js | 66 ++++++++++++++++++++++++++++++++-- scm-ui/src/containers/Users.js | 58 ++++++++++++++++++++++++++++++ scm-ui/src/createReduxStore.js | 4 ++- scm-ui/src/modules/page.js | 64 +++++++++++++++++++++++++++++++-- scm-ui/src/modules/users.js | 61 +++++++++++++++++++++++++++++++ 7 files changed, 285 insertions(+), 8 deletions(-) create mode 100644 scm-ui/src/Login.js create mode 100644 scm-ui/src/containers/Users.js create mode 100644 scm-ui/src/modules/users.js diff --git a/scm-ui/src/Login.js b/scm-ui/src/Login.js new file mode 100644 index 0000000000..d6ef5a29a1 --- /dev/null +++ b/scm-ui/src/Login.js @@ -0,0 +1,36 @@ +//@flow +import React from 'react'; +import injectSheet from 'react-jss'; + +const styles = { + wrapper: { + width: '100%', + display: 'flex', + height: '10em' + }, + loading: { + margin: 'auto', + textAlign: 'center' + } +}; + +type Props = { + classes: any; +} + +class Login extends React.Component { + + render() { + const { classes } = this.props; + return ( +
+
+ You need to log in! ... +
+
+ ); + } + +} + +export default injectSheet(styles)(Login); diff --git a/scm-ui/src/Main.js b/scm-ui/src/Main.js index 068bc38a01..2a6fe40ef3 100644 --- a/scm-ui/src/Main.js +++ b/scm-ui/src/Main.js @@ -6,6 +6,7 @@ import classNames from 'classnames'; import { Route, withRouter } from 'react-router'; import Page from './containers/Page'; +import Users from './containers/Users'; import {Switch} from 'react-router-dom'; const styles = { @@ -25,7 +26,8 @@ class Main extends React.Component { return (
- + +
); diff --git a/scm-ui/src/containers/Page.js b/scm-ui/src/containers/Page.js index 6594520ff4..f94914c2b8 100644 --- a/scm-ui/src/containers/Page.js +++ b/scm-ui/src/containers/Page.js @@ -1,3 +1,63 @@ -/** - * Created by masuewer on 02.07.18. - */ +// @flow +import React from 'react'; +import { connect } from 'react-redux'; + +import { fetchRepositoriesIfNeeded } from '../modules/page'; +import Login from '../Login'; + + +type Props = { + loading: boolean, + error: any, + repositories: any, + fetchRepositoriesIfNeeded: () => void +} + +class Page extends React.Component { + + componentDidMount() { + this.props.fetchRepositoriesIfNeeded(); + } + + render() { + const { loading, error, repositories } = this.props; + + + if(loading) { + return ( +
+

SCM

+ +
+ ); + } + else if(!loading){ + return ( +
+

SCM

+

Startpage

+ + Users hier! + +
+ ); + } + + + } + +} + +const mapStateToProps = (state) => { + return null; +}; + +const mapDispatchToProps = (dispatch) => { + return { + fetchRepositoriesIfNeeded: () => { + dispatch(fetchRepositoriesIfNeeded()) + } + } +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Page); diff --git a/scm-ui/src/containers/Users.js b/scm-ui/src/containers/Users.js new file mode 100644 index 0000000000..00b22862f8 --- /dev/null +++ b/scm-ui/src/containers/Users.js @@ -0,0 +1,58 @@ +// @flow +import React from 'react'; +import { connect } from 'react-redux'; + +import { fetchRepositoriesIfNeeded } from '../modules/users'; +import Login from '../Login'; + +type Props = { + loading: boolean, + error: any, + repositories: any, + fetchRepositoriesIfNeeded: () => void +} + +class Users extends React.Component { + + componentDidMount() { + this.props.fetchRepositoriesIfNeeded(); + } + + render() { + const { loading, error, repositories } = this.props; + + + + if(loading) { + return ( +
+

SCM

+ +
+ ); + } + else if(!loading){ + return ( +
+

SCM

+

Users

+
+ ); + } + } + +} + +const mapStateToProps = (state) => { + return null; +}; + +const mapDispatchToProps = (dispatch) => { + return { + fetchRepositoriesIfNeeded: () => { + dispatch(fetchRepositoriesIfNeeded()) + } + } +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Users); diff --git a/scm-ui/src/createReduxStore.js b/scm-ui/src/createReduxStore.js index 9b53bb0f3d..244c5699b5 100644 --- a/scm-ui/src/createReduxStore.js +++ b/scm-ui/src/createReduxStore.js @@ -4,13 +4,15 @@ import { createStore, compose, applyMiddleware, combineReducers } from 'redux'; import { routerReducer, routerMiddleware } from 'react-router-redux'; import page from './modules/page'; +import users from './modules/users'; function createReduxStore(history) { const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const reducer = combineReducers({ router: routerReducer, - page + page, + users }); return createStore( diff --git a/scm-ui/src/modules/page.js b/scm-ui/src/modules/page.js index 6594520ff4..fe8db685e0 100644 --- a/scm-ui/src/modules/page.js +++ b/scm-ui/src/modules/page.js @@ -1,3 +1,61 @@ -/** - * Created by masuewer on 02.07.18. - */ +//@flow +const FETCH_REPOSITORIES = 'smeagol/repositories/FETCH'; +const FETCH_REPOSITORIES_SUCCESS = 'smeagol/repositories/FETCH_SUCCESS'; +const FETCH_REPOSITORIES_FAILURE = 'smeagol/repositories/FETCH_FAILURE'; + +const THRESHOLD_TIMESTAMP = 10000; + +function requestRepositories() { + return { + type: FETCH_REPOSITORIES + }; +} + + +function fetchRepositories() { + return function(dispatch) { + dispatch(requestRepositories()); + return null; + } +} + +export function shouldFetchRepositories(state: any): boolean { + const repositories = state.repositories; + return null; +} + +export function fetchRepositoriesIfNeeded() { + return (dispatch, getState) => { + if (shouldFetchRepositories(getState())) { + dispatch(fetchRepositories()); + } + } +} + +export default function reducer(state = {}, action = {}) { + switch (action.type) { + case FETCH_REPOSITORIES: + return { + ...state, + loading: true, + error: null + }; + case FETCH_REPOSITORIES_SUCCESS: + return { + ...state, + loading: true, + timestamp: action.timestamp, + error: null, + repositories: action.payload + }; + case FETCH_REPOSITORIES_FAILURE: + return { + ...state, + loading: true, + error: action.payload + }; + + default: + return state + } +} diff --git a/scm-ui/src/modules/users.js b/scm-ui/src/modules/users.js new file mode 100644 index 0000000000..b482010b61 --- /dev/null +++ b/scm-ui/src/modules/users.js @@ -0,0 +1,61 @@ +//@flow +const FETCH_REPOSITORIES = 'smeagol/repositories/FETCH'; +const FETCH_REPOSITORIES_SUCCESS = 'smeagol/repositories/FETCH_SUCCESS'; +const FETCH_REPOSITORIES_FAILURE = 'smeagol/repositories/FETCH_FAILURE'; + +const THRESHOLD_TIMESTAMP = 10000; + +function requestRepositories() { + return { + type: FETCH_REPOSITORIES + }; +} + + +function fetchRepositories() { + return function(dispatch) { + dispatch(requestRepositories()); + return null; + } +} + +export function shouldFetchRepositories(state: any): boolean { + const repositories = state.repositories; + return null; +} + +export function fetchRepositoriesIfNeeded() { + return (dispatch, getState) => { + if (shouldFetchRepositories(getState())) { + dispatch(fetchRepositories()); + } + } +} + +export default function reducer(state = {}, action = {}) { + switch (action.type) { + case FETCH_REPOSITORIES: + return { + ...state, + loading: true, + error: null + }; + case FETCH_REPOSITORIES_SUCCESS: + return { + ...state, + loading: false, + timestamp: action.timestamp, + error: null, + repositories: action.payload + }; + case FETCH_REPOSITORIES_FAILURE: + return { + ...state, + loading: false, + error: action.payload + }; + + default: + return state + } +}