ECEntrics
/
concordia
mirror of https://gitlab.com/ecentrics/concordia
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Hopefully fixed routing

develop
Ezerous 6 years ago
parent
f916b9ec17
commit
4f5aa0280c
16 changed files with 185 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      app/package.json
  2. 1
      app/public/index.html
  3. 4
      app/src/assets/css/index.css
  4. 17
      app/src/components/HomeComponent.js
  5. 19
      app/src/containers/HomeContainer.js
  6. 57
      app/src/containers/NavBar.js
  7. 46
      app/src/containers/SignUpContainer.js
  8. 37
      app/src/index.js
  9. 10
      app/src/redux/reducers/drizzleReducer.js
  10. 10
      app/src/redux/reducers/rootReducer.js
  11. 6
      app/src/redux/reducers/routerReducer.js
  12. 27
      app/src/redux/routerStore.js
  13. 2
      app/src/redux/sagas/rootSaga.js
  14. 21
      app/src/redux/store.js
  15. 27
      app/src/router/routes.js
  16. 20
      app/src/routes.js

6
app/package.json
View File

@ -12,16 +12,16 @@
"@drizzle-utils/get-web3": "^0.1.4-alpha.0", "@drizzle-utils/get-web3": "^0.1.4-alpha.0",
"connected-react-router": "^6.3.1", "connected-react-router": "^6.3.1",
"drizzle": "^1.3.3", "drizzle": "^1.3.3",
"drizzle-react": "^1.2.0",
"drizzle-react-components": "^1.2.1",
"history": "^4.7.2", "history": "^4.7.2",
"prop-types": "^15.7.2",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1", "react-dom": "^16.8.1",
"react-redux": "^6.0.0", "react-redux": "^6.0.0",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-scripts": "^2.1.5", "react-scripts": "^2.1.5",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-saga": "^0.16.0" "redux-saga": "^0.16.0",
"semantic-ui-react": "^0.85.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

1
app/public/index.html
View File

@ -19,6 +19,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
<title>Apella</title> <title>Apella</title>
</head> </head>
<body> <body>

4
app/src/assets/css/index.css
View File

@ -0,0 +1,4 @@
body {
margin: 10em;
padding: 0;
}

17
app/src/components/HomeComponent.js
View File

@ -1,17 +0,0 @@
import React from "react";
import { AccountData, ContractData } from "drizzle-react-components";
export default ({ accounts }) => (
<div className="App">
<div className="section">
<h1>Active Account</h1>
<AccountData accountIndex="0" units="ether" precision="3" />
</div>
<div className="section">
<h1>Has user signed up?</h1>
<p>
<ContractData contract="Forum" method="hasUserSignedUp" methodArgs={[accounts[0],{from: accounts[0]}]} />
</p>
</div>
</div>
);

19
app/src/containers/HomeContainer.js
View File

@ -1,5 +1,16 @@
import HomeComponent from "../components/HomeComponent"; import React, { Component } from 'react';
import { drizzleConnect } from "drizzle-react"; import {connect} from "react-redux";
class HomeContainer extends Component {
render() {
return (<div className="App">
<div className="section">
<h1>Active Account</h1>
{this.props.accounts[0]}
</div>
</div>);
}
}
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
@ -9,6 +20,4 @@ const mapStateToProps = state => {
}; };
}; };
const HomeContainer = drizzleConnect(HomeComponent, mapStateToProps); export default connect(mapStateToProps)(HomeContainer);
export default HomeContainer;

57
app/src/containers/NavBar.js
View File

@ -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 (
<Menu fixed='top' inverted>
<Menu.Item onClick={() => {this.props.navigateTo('/')}}>
<Image
size='mini'
src={logo}
style={{ marginRight: '1.5em' }}
/>
Apella
</Menu.Item>
<Menu.Item onClick={() => {this.props.navigateTo('/signup')}}>
SignUp
</Menu.Item>
</Menu>
);
}
}
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);

46
app/src/containers/SignUpContainer.js
View File

@ -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
?(<div className="vertical-center-in-parent">
<Header color='teal' textAlign='center' as='h2'>
There is already an account for this addresss.
</Header>
<Header color='teal' textAlign='center' as='h4'>
If you want to create another account please change your address.
</Header>
</div>)
:(<div className="sign-up-container">
<div>
<h1>Sign Up</h1>
<p className="no-margin">
<strong>Account address:</strong> {this.props.user.address}
</p>
UsernameFormContainer
</div>
</div>)
);
}
}
const mapDispatchToProps = dispatch => bindActionCreators({
navigateTo: () => push()
}, dispatch);
const mapStateToProps = state => {
return {
user: state.user
}
};
const SignUpContainer = connect(mapStateToProps, mapDispatchToProps)(SignUp);
export default SignUpContainer;

37
app/src/index.js
View File

@ -1,30 +1,21 @@
import React from "react"; import React from 'react';
import { render } from "react-dom"; import { render } from 'react-dom';
import { DrizzleProvider } from "drizzle-react"; import { Provider } from 'react-redux';
import { LoadingContainer } from "drizzle-react-components";
import drizzleOptions from "./config/drizzleOptions";
import { ConnectedRouter } from 'connected-react-router' 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 store, {history} from './redux/store';
import {Provider} from "react-redux"; import routes from './routes'
import * as serviceWorker from './utils/serviceWorker';
import './assets/css/index.css';
render( render(
<DrizzleProvider options={drizzleOptions} store={drizzleStore}> <Provider store={store}>
<Provider store={routerStore}> <ConnectedRouter history={history}>
<LoadingContainer> { routes }
<ConnectedRouter history={history}> </ConnectedRouter>
{ routes } </Provider>,
</ConnectedRouter>
</LoadingContainer>
</Provider>
</DrizzleProvider>,
document.getElementById('root') document.getElementById('root')
); );
// If you want your app to work offline and load faster, you can change serviceWorker.unregister(); // See also: http://bit.ly/CRA-PWA
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

10
app/src/redux/reducers/drizzleReducer.js
View File

@ -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;

10
app/src/redux/reducers/rootReducer.js
View File

@ -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
})

6
app/src/redux/reducers/routerReducer.js
View File

@ -1,6 +0,0 @@
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'
export default (history) => combineReducers({
router: connectRouter(history)
})

27
app/src/redux/routerStore.js
View File

@ -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;

2
app/src/redux/sagas/drizzleSaga.js → app/src/redux/sagas/rootSaga.js
View File

@ -1,6 +1,6 @@
import { all, fork } from 'redux-saga/effects' import { all, fork } from 'redux-saga/effects'
import { drizzleSagas } from 'drizzle' import { drizzleSagas } from 'drizzle'
import userSaga from "./userSaga"; import userSaga from './userSaga';
export default function* root() { export default function* root() {
let sagas = [...drizzleSagas, userSaga]; let sagas = [...drizzleSagas, userSaga];

21
app/src/redux/drizzleStore.js → app/src/redux/store.js
View File

@ -1,25 +1,34 @@
import { createStore, applyMiddleware, compose } from 'redux'; import { createStore, applyMiddleware, compose } from 'redux';
import { createBrowserHistory } from 'history'
import createSagaMiddleware from 'redux-saga'; 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/rootSaga';
import rootSaga from './sagas/drizzleSaga';
import drizzleOptions from '../config/drizzleOptions'; import drizzleOptions from '../config/drizzleOptions';
import createRootReducer from './reducers/rootReducer';
export const history = createBrowserHistory();
const rootReducer = createRootReducer(history);
const initialState = { contracts: generateContractsInitialState(drizzleOptions) }; const initialState = { contracts: generateContractsInitialState(drizzleOptions) };
// Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware(); const sagaMiddleware = createSagaMiddleware();
const composedEnhancers = composeEnhancers(applyMiddleware(sagaMiddleware)); const routingMiddleware = routerMiddleware(history);
const composedEnhancers = composeEnhancers(applyMiddleware(sagaMiddleware, routingMiddleware));
const store = createStore( const store = createStore(
drizzleReducer, rootReducer,
initialState, initialState,
composedEnhancers composedEnhancers
); );
new Drizzle(drizzleOptions, store);
sagaMiddleware.run(rootSaga); sagaMiddleware.run(rootSaga);
export default store; export default store;

27
app/src/router/routes.js
View File

@ -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 = (
<div>
<Switch>
<Route exact path="/" component={HomeContainer} />
<Route component={NotFound} />
</Switch>
</div>
);
export default routes
// const routes = (
// <div>
// <NavBar />
// <Switch>
// <Route exact path="/" component={Home} />
// <Route path="/signup" component={SignUp} />
// <Route component={NotFound} />
// </Switch>
// </div>
// );

20
app/src/routes.js
View File

@ -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 = (
<div>
<NavBar />
<Switch>
<Route exact path="/" component={HomeContainer} />
<Route path="/signup" component={SignUpContainer} />
<Route component={NotFound} />
</Switch>
</div>
);
export default routes
Write Preview
Loading…
Cancel
Save