Skip to content

Instantly share code, notes, and snippets.

@brittanmcg

brittanmcg/portalApp.js

Last active July 11, 2019 21:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brittanmcg/e7a7d5a9d00ff9f984df8c6062c6c368 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brittanmcg/e7a7d5a9d00ff9f984df8c6062c6c368 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. brittanmcg revised this gist Jul 11, 2019. 1 changed file with 15 additions and 5 deletions.
    20 changes: 15 additions & 5 deletions portalApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    // App.js
    /**
    * App.js
    */
    import React, { Component } from 'react';
    import {
    BrowserRouter as Router,
    @@ -56,7 +58,9 @@ export default connect(



    // CreateEditSite.jsx
    /**
    * CreateEditSite.jsx
    */
    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import GeneralSiteInfo from './components/GeneralSiteInfo';
    @@ -108,7 +112,9 @@ export default connect(



    // asyncActions.js
    /**
    * asyncActions.js
    */
    import { push } from 'connected-react-router';
    import * as actionTypes from './actionTypes';

    @@ -137,7 +143,9 @@ export function createSite(data) {
    };
    }

    // store.js
    /**
    * store.js
    */
    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import { createBrowserHistory } from 'history';
    @@ -153,7 +161,9 @@ export default function configureStore(initialState = {}) {
    );
    }

    // rootReducer.js
    /**
    * rootReducer.js
    */
    import { combineReducers } from 'redux';
    import { connectRouter } from 'connected-react-router';
    import simpleReducer from './simpleReducer';
  2. brittanmcg created this gist Jul 11, 2019.
    167 changes: 167 additions & 0 deletions portalApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@
    // 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
    });