Skip to content

Instantly share code, notes, and snippets.

@konamax123 konamax123/portalApp.js
Last active Jul 11, 2019

Embed
What would you like to do?
Trouble with routing
/**
* App.js
*/
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
withRouter
} from 'react-router-dom';
import { connect } from 'react-redux';
import { Container } from 'nes-react';
import { simpleAction } from './actions/simpleAction';
import Home from './modules/Home/Home';
import CreateEditSite from './modules/Site/CreateEditSite';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<Container>
<div className="App">
<ul className="nes-list is-disc">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/create-site">Create Site</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/" component={withRouter(Home)} />
<Route
exact
path="/create-site"
component={withRouter(CreateEditSite)}
/>
</Switch>
</div>
</Container>
</Router>
);
}
}
const mapDispatchToProps = dispatch => ({});
const mapStateToProps = state => ({
...state
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
/**
* CreateEditSite.jsx
*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
import GeneralSiteInfo from './components/GeneralSiteInfo';
import * as asyncActions from './asyncActions';
class CreateEditSite extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
// You would probably want to wrap this in a validate method
this.props.onCreateSite(this.state);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h2>Create Site</h2>
<GeneralSiteInfo handleChange={this.handleChange} />
<input className="nes-btn is-primary" type="submit" value="Submit" />
</form>
);
}
}
const mapDispatchToProps = dispatch => {
return {
onCreateSite: formData => dispatch(asyncActions.createSite(formData))
};
};
const mapStateToProps = state => {
return {
siteInfo: state.siteReducer.view
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(CreateEditSite);
/**
* asyncActions.js
*/
import { push } from 'connected-react-router';
import * as actionTypes from './actionTypes';
export function createSiteSuccess(data) {
return {
type: `${actionTypes.CREATE_SITE}_SUCCESS`,
payload: { ...data }
};
}
export function createSite(data) {
return function(dispatch) {
return {
payload: fetch('http://www.mocky.io/v2/5d275a39320000c52971bad7', {
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
})
.then(res => res.json())
.then(info => {
dispatch(createSiteSuccess(info));
dispatch(push('/'));
})
};
};
}
/**
* store.js
*/
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { createBrowserHistory } from 'history';
import { composeWithDevTools } from 'redux-devtools-extension';
import { routerMiddleware } from 'connected-react-router';
import rootReducer from './reducers/rootReducer';
export const history = createBrowserHistory();
export default function configureStore(initialState = {}) {
// Middleware and store enhancers
return createStore(
rootReducer(history),
composeWithDevTools(applyMiddleware(thunk, routerMiddleware(history)))
);
}
/**
* rootReducer.js
*/
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import simpleReducer from './simpleReducer';
import siteReducer from '../modules/Site/reducer';
export default history =>
combineReducers({
router: connectRouter(history),
simpleReducer,
siteReducer
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.