From 4f5aa0280cc20504148a1eba784b505612d4fbc2 Mon Sep 17 00:00:00 2001 From: Ezerous Date: Mon, 18 Feb 2019 17:58:24 +0200 Subject: [PATCH] Hopefully fixed routing --- app/package.json | 6 +- app/public/index.html | 1 + app/src/assets/css/index.css | 4 ++ app/src/components/HomeComponent.js | 17 ------ app/src/containers/HomeContainer.js | 19 +++++-- app/src/containers/NavBar.js | 57 +++++++++++++++++++ app/src/containers/SignUpContainer.js | 46 +++++++++++++++ app/src/index.js | 37 +++++------- app/src/redux/reducers/drizzleReducer.js | 10 ---- app/src/redux/reducers/rootReducer.js | 10 ++++ app/src/redux/reducers/routerReducer.js | 6 -- app/src/redux/routerStore.js | 27 --------- .../sagas/{drizzleSaga.js => rootSaga.js} | 2 +- app/src/redux/{drizzleStore.js => store.js} | 21 +++++-- app/src/router/routes.js | 27 --------- app/src/routes.js | 20 +++++++ 16 files changed, 185 insertions(+), 125 deletions(-) create mode 100644 app/src/assets/css/index.css delete mode 100644 app/src/components/HomeComponent.js create mode 100644 app/src/containers/NavBar.js create mode 100644 app/src/containers/SignUpContainer.js delete mode 100644 app/src/redux/reducers/drizzleReducer.js create mode 100644 app/src/redux/reducers/rootReducer.js delete mode 100644 app/src/redux/reducers/routerReducer.js delete mode 100644 app/src/redux/routerStore.js rename app/src/redux/sagas/{drizzleSaga.js => rootSaga.js} (86%) rename app/src/redux/{drizzleStore.js => store.js} (51%) delete mode 100644 app/src/router/routes.js create mode 100644 app/src/routes.js diff --git a/app/package.json b/app/package.json index 96edf51..9e5f11d 100644 --- a/app/package.json +++ b/app/package.json @@ -12,16 +12,16 @@ "@drizzle-utils/get-web3": "^0.1.4-alpha.0", "connected-react-router": "^6.3.1", "drizzle": "^1.3.3", - "drizzle-react": "^1.2.0", - "drizzle-react-components": "^1.2.1", "history": "^4.7.2", + "prop-types": "^15.7.2", "react": "^16.8.1", "react-dom": "^16.8.1", "react-redux": "^6.0.0", "react-router-dom": "^4.3.1", "react-scripts": "^2.1.5", "redux": "^4.0.1", - "redux-saga": "^0.16.0" + "redux-saga": "^0.16.0", + "semantic-ui-react": "^0.85.0" }, "scripts": { "start": "react-scripts start", diff --git a/app/public/index.html b/app/public/index.html index 7883265..1590345 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -19,6 +19,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + Apella diff --git a/app/src/assets/css/index.css b/app/src/assets/css/index.css new file mode 100644 index 0000000..76a3f26 --- /dev/null +++ b/app/src/assets/css/index.css @@ -0,0 +1,4 @@ +body { + margin: 10em; + padding: 0; +} diff --git a/app/src/components/HomeComponent.js b/app/src/components/HomeComponent.js deleted file mode 100644 index 89bd890..0000000 --- a/app/src/components/HomeComponent.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import { AccountData, ContractData } from "drizzle-react-components"; - -export default ({ accounts }) => ( -
-
-

Active Account

- -
-
-

Has user signed up?

-

- -

-
-
-); diff --git a/app/src/containers/HomeContainer.js b/app/src/containers/HomeContainer.js index 6eaeb61..8f6f319 100644 --- a/app/src/containers/HomeContainer.js +++ b/app/src/containers/HomeContainer.js @@ -1,5 +1,16 @@ -import HomeComponent from "../components/HomeComponent"; -import { drizzleConnect } from "drizzle-react"; +import React, { Component } from 'react'; +import {connect} from "react-redux"; + +class HomeContainer extends Component { + render() { + return (
+
+

Active Account

+ {this.props.accounts[0]} +
+
); + } +} const mapStateToProps = state => { return { @@ -9,6 +20,4 @@ const mapStateToProps = state => { }; }; -const HomeContainer = drizzleConnect(HomeComponent, mapStateToProps); - -export default HomeContainer; +export default connect(mapStateToProps)(HomeContainer); diff --git a/app/src/containers/NavBar.js b/app/src/containers/NavBar.js new file mode 100644 index 0000000..23b2d6e --- /dev/null +++ b/app/src/containers/NavBar.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import { push } from 'connected-react-router' +import PropTypes from 'prop-types'; + +import { Image, Menu } from 'semantic-ui-react' + +import logo from '../resources/logo.png'; +import {bindActionCreators} from "redux"; +import {connect} from "react-redux"; + +class NavBar extends Component { + constructor(props){ + super(props); + + // this.handleItemClick = this.handleItemClick.bind(this); + + this.navRef = React.createRef(); + } + + + render() { + return ( + + {this.props.navigateTo('/')}}> + + Apella + + {this.props.navigateTo('/signup')}}> + SignUp + + + ); + } +} + +NavBar.contextTypes = { + router: PropTypes.object +}; + +const mapDispatchToProps = dispatch => bindActionCreators({ + navigateTo: (location) => push(location) +}, dispatch); + + +const mapStateToProps = state => { + return { + hasSignedUp: state.user.hasSignedUp, + } +}; + +//export default drizzleConnect(NavBar, mapStateToProps, mapDispatchToProps); + +export default connect(mapStateToProps, mapDispatchToProps)(NavBar); diff --git a/app/src/containers/SignUpContainer.js b/app/src/containers/SignUpContainer.js new file mode 100644 index 0000000..743f2ed --- /dev/null +++ b/app/src/containers/SignUpContainer.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; + +import { Header } from 'semantic-ui-react'; +import {bindActionCreators} from "redux"; +import {push} from "connected-react-router"; +import {connect} from "react-redux"; + +class SignUp extends Component { + render() { + return ( + this.props.user.hasSignedUp + ?(
+
+ There is already an account for this addresss. +
+
+ If you want to create another account please change your address. +
+
) + :(
+
+

Sign Up

+

+ Account address: {this.props.user.address} +

+ UsernameFormContainer +
+
) + ); + } +} +const mapDispatchToProps = dispatch => bindActionCreators({ + navigateTo: () => push() +}, dispatch); + + +const mapStateToProps = state => { + return { + user: state.user + } +}; + +const SignUpContainer = connect(mapStateToProps, mapDispatchToProps)(SignUp); + +export default SignUpContainer; + diff --git a/app/src/index.js b/app/src/index.js index e88c48f..c7f936b 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -1,30 +1,21 @@ -import React from "react"; -import { render } from "react-dom"; -import { DrizzleProvider } from "drizzle-react"; -import { LoadingContainer } from "drizzle-react-components"; -import drizzleOptions from "./config/drizzleOptions"; +import React from 'react'; +import { render } from 'react-dom'; +import { Provider } from 'react-redux'; import { ConnectedRouter } from 'connected-react-router' -import routerStore, {history} from './redux/routerStore'; -import drizzleStore from './redux/drizzleStore'; -import routes from './router/routes' -import * as serviceWorker from "./utils/serviceWorker"; -import {Provider} from "react-redux"; +import store, {history} from './redux/store'; +import routes from './routes' +import * as serviceWorker from './utils/serviceWorker'; + +import './assets/css/index.css'; render( - - - - - { routes } - - - - , + + + { routes } + + , document.getElementById('root') ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); +serviceWorker.unregister(); // See also: http://bit.ly/CRA-PWA diff --git a/app/src/redux/reducers/drizzleReducer.js b/app/src/redux/reducers/drizzleReducer.js deleted file mode 100644 index 23ce1d7..0000000 --- a/app/src/redux/reducers/drizzleReducer.js +++ /dev/null @@ -1,10 +0,0 @@ -import { combineReducers } from 'redux'; -import { drizzleReducers } from 'drizzle'; -import userReducer from "./userReducer"; - -const reducer = combineReducers({ - user: userReducer, - ...drizzleReducers -}); - -export default reducer; \ No newline at end of file diff --git a/app/src/redux/reducers/rootReducer.js b/app/src/redux/reducers/rootReducer.js new file mode 100644 index 0000000..532467e --- /dev/null +++ b/app/src/redux/reducers/rootReducer.js @@ -0,0 +1,10 @@ +import { combineReducers } from 'redux'; +import { drizzleReducers } from 'drizzle'; +import { connectRouter } from 'connected-react-router' +import userReducer from './userReducer'; + +export default (history) => combineReducers({ + router: connectRouter(history), + user: userReducer, + ...drizzleReducers +}) \ No newline at end of file diff --git a/app/src/redux/reducers/routerReducer.js b/app/src/redux/reducers/routerReducer.js deleted file mode 100644 index eede131..0000000 --- a/app/src/redux/reducers/routerReducer.js +++ /dev/null @@ -1,6 +0,0 @@ -import { combineReducers } from 'redux'; -import { connectRouter } from 'connected-react-router' - -export default (history) => combineReducers({ - router: connectRouter(history) -}) diff --git a/app/src/redux/routerStore.js b/app/src/redux/routerStore.js deleted file mode 100644 index 4d8b31d..0000000 --- a/app/src/redux/routerStore.js +++ /dev/null @@ -1,27 +0,0 @@ -import { createBrowserHistory } from 'history' -import { createStore, applyMiddleware, compose } from 'redux'; -import { routerMiddleware } from 'connected-react-router' - -import createRootReducer from './reducers/routerReducer'; - -export const history = createBrowserHistory(); - -const rootReducer = createRootReducer(history); - -const initialState = {}; - -// Redux DevTools -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; - -const routingMiddleware = routerMiddleware(history); - - -const composedEnhancers = composeEnhancers(applyMiddleware(routingMiddleware)); - -const routerStore = createStore( - rootReducer, - initialState, - composedEnhancers -); - -export default routerStore; \ No newline at end of file diff --git a/app/src/redux/sagas/drizzleSaga.js b/app/src/redux/sagas/rootSaga.js similarity index 86% rename from app/src/redux/sagas/drizzleSaga.js rename to app/src/redux/sagas/rootSaga.js index 163d2d8..6c308c5 100644 --- a/app/src/redux/sagas/drizzleSaga.js +++ b/app/src/redux/sagas/rootSaga.js @@ -1,6 +1,6 @@ import { all, fork } from 'redux-saga/effects' import { drizzleSagas } from 'drizzle' -import userSaga from "./userSaga"; +import userSaga from './userSaga'; export default function* root() { let sagas = [...drizzleSagas, userSaga]; diff --git a/app/src/redux/drizzleStore.js b/app/src/redux/store.js similarity index 51% rename from app/src/redux/drizzleStore.js rename to app/src/redux/store.js index f3bcb00..8ad1ff1 100644 --- a/app/src/redux/drizzleStore.js +++ b/app/src/redux/store.js @@ -1,25 +1,34 @@ import { createStore, applyMiddleware, compose } from 'redux'; +import { createBrowserHistory } from 'history' import createSagaMiddleware from 'redux-saga'; -import { generateContractsInitialState } from 'drizzle'; +import {Drizzle, generateContractsInitialState} from 'drizzle'; +import {routerMiddleware} from 'connected-react-router'; -import drizzleReducer from './reducers/drizzleReducer'; -import rootSaga from './sagas/drizzleSaga'; +import rootSaga from './sagas/rootSaga'; import drizzleOptions from '../config/drizzleOptions'; +import createRootReducer from './reducers/rootReducer'; + + +export const history = createBrowserHistory(); + +const rootReducer = createRootReducer(history); const initialState = { contracts: generateContractsInitialState(drizzleOptions) }; -// Redux DevTools const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const sagaMiddleware = createSagaMiddleware(); -const composedEnhancers = composeEnhancers(applyMiddleware(sagaMiddleware)); +const routingMiddleware = routerMiddleware(history); +const composedEnhancers = composeEnhancers(applyMiddleware(sagaMiddleware, routingMiddleware)); const store = createStore( - drizzleReducer, + rootReducer, initialState, composedEnhancers ); +new Drizzle(drizzleOptions, store); + sagaMiddleware.run(rootSaga); export default store; \ No newline at end of file diff --git a/app/src/router/routes.js b/app/src/router/routes.js deleted file mode 100644 index 8677c26..0000000 --- a/app/src/router/routes.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { Route, Switch } from 'react-router-dom' -import HomeContainer from '../containers/HomeContainer' -import NotFound from '../components/NotFound' - -const routes = ( -
- - - - -
-); - -export default routes - - -// const routes = ( -//
-// -// -// -// -// -// -//
-// ); \ No newline at end of file diff --git a/app/src/routes.js b/app/src/routes.js new file mode 100644 index 0000000..79f6628 --- /dev/null +++ b/app/src/routes.js @@ -0,0 +1,20 @@ +import React from 'react' +import { Route, Switch } from 'react-router-dom' +import NavBar from "./containers/NavBar"; +import HomeContainer from './containers/HomeContainer' +import SignUpContainer from './containers/SignUpContainer' +import NotFound from './components/NotFound' + + +const routes = ( +
+ + + + + + +
+); + +export default routes \ No newline at end of file