added appReducer; created toggle feature, refactored component code (#22

)

* added appReducer; created toggle feature, refactored component code

* added color to denote selected toggle

* added unselected color

* removed loggin; renamed files for readability

frontend/src/App.js

@@ -1,20 +1,46 @@
 import React, {Component} from 'react';
 import './App.css';
+
+// Redux
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {changeView} from './actions/changeViewActions';
+
+// constants 
+import * as constants from './constants/viewConstants';
+
+// components
 import Map from './components/Map';
 import Sidebar from './components/Sidebar';
 import ToggleView from './components/ToggleView';
+import ListView from './components/ListView';
 
 class App extends Component {
   render() {
     return (
       <div>
         <Sidebar />
-        <Map />
-        <ToggleView />
+        {this.props.view === constants.MAP_VIEW ? <Map /> : <ListView /> }
+        <ToggleView view={this.props.view} changeView={this.props.changeView}/>
       </div>
     );
   }
 }
 
-export default App;
+function mapStateToProps(state) {
+  return {
+    view: state.changeViewReducer.view
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    changeView: bindActionCreators(changeView, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);
 

frontend/src/actions/actionsTypes.js

@@ -0,0 +1 @@
+export const CHANGE_VIEW = 'CHANGE_VIEW';

frontend/src/actions/changeViewActions.js

@@ -0,0 +1,5 @@
+import * as types from './actionsTypes';
+
+export function changeView(appView){
+	return {type: types.CHANGE_VIEW, payload: appView};
+}

frontend/src/components/ListView.css

@@ -0,0 +1,7 @@
+.centerDiv {
+	text-align: center;
+}
+
+.titleText {
+	display: inline-block;
+}

frontend/src/components/ListView.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import './ListView.css';
+
+class ListView extends Component {
+	render() {
+		return (
+			<div className="centerDiv">
+				<h1 className="titleText">This is the List View</h1>
+			</div>
+		);
+	}
+}
+
+export default ListView;

frontend/src/components/Sidebar.js

@@ -9,8 +9,8 @@ class Sidebar extends Component {
 	render() {
 		return (
 			<div>
-				<Drawer open="true" variant="permanent">
-					<h1 class="title">Here is the Nav Bar</h1>
+				<Drawer open={true} variant="permanent">
+					<h1 className="title">Here is the Nav Bar</h1>
 				</Drawer>
 			</div>
 		);

frontend/src/components/ToggleView.css

@@ -3,5 +3,11 @@
   top: 15px;
   right: 15px;
   z-index: 1000;
-  background-color: lightgrey;
+  background-color: white;
+  color: #2526A9;
+}
+
+.selectedToggle {
+	background-color: #2526A9 !important;
+	color: white !important;
 }

frontend/src/components/ToggleView.js

@@ -2,17 +2,33 @@ import React, {Component} from 'react';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import './ToggleView.css';
+import * as constants from '../constants/viewConstants';
 
 class ToggleView extends Component {
 	render() {
-
 		return (
-			<div class="toggleGroup">
+			<div className="toggleGroup">
 				<ToggleButtonGroup>
-					<ToggleButton value="left" selected>
+					<ToggleButton
+						onClick={ () => {
+								this.props.changeView(constants.MAP_VIEW);
+							}
+						}
+						value="left"
+						className={this.props.view === constants.MAP_VIEW ?
+						           "selectedToggle" : ""}
+					>
 						MapView
 					</ToggleButton>
-					<ToggleButton value="right" selected>
+					<ToggleButton
+						onClick={ () => {
+								this.props.changeView(constants.LIST_VIEW);
+							}
+						}
+						value="right"
+						className={this.props.view === constants.LIST_VIEW ?
+						           "selectedToggle" : ""}
+					>
 						ListView
 					</ToggleButton>
 				</ToggleButtonGroup>

frontend/src/constants/viewConstants.js

@@ -0,0 +1,2 @@
+export const MAP_VIEW = "MAP_VIEW";
+export const LIST_VIEW = "LIST_VIEW";

frontend/src/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux'
-import configureStore from './store';
+import { configureStore } from './store';
 
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+const store = configureStore();
+
 ReactDOM.render(
-    <Provider store={configureStore()}>
+    <Provider store={store}>
         <App />
     </Provider>
 , document.getElementById('root'));

frontend/src/reducers/changeViewReducer.js

@@ -0,0 +1,14 @@
+import { CHANGE_VIEW } from '../actions/actionsTypes';
+import initialState from './initialState';
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case CHANGE_VIEW:
+            return {
+            	...state,
+                view: action.payload
+            }
+        default:
+            return state;
+    }
+}

frontend/src/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
-import emptyReducer from './empty';
+import changeViewReducer from './changeViewReducer';
 
 export default combineReducers({
-    emptyReducer
+    changeViewReducer
 });

frontend/src/reducers/initialState.js

@@ -0,0 +1,5 @@
+import * as constants from '../constants/viewConstants';
+
+export default {
+  view: constants.MAP_VIEW
+};

frontend/src/store.js

@@ -2,7 +2,7 @@ import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import reducers from './reducers';
 
-export default function configureStore() {
+export function configureStore() {
  return createStore(
   reducers,
    applyMiddleware(thunk)