Merge branch 'alex' into jo

Drakota · May 6, 2018 · ed3eee1 · ed3eee1
2 parents 4ef2a98 + 8f0aee7
commit ed3eee1
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 22 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -69,6 +69,22 @@ export const setUserNextDestination = () => ({
     type: 'SET_USER_TO_NEXT_DESTINATION',
 });
 
+export const toggleModalFeedback = () => ({
+    type: 'TOGGLE_MODAL_FEEDBACK',
+    payload: true
+});
+
+export const toggleHideModalFeedback = () => ({
+    type: 'TOGGLE_MODAL_FEEDBACK',
+    payload: false
+});
+
+export const toggleLocationReviewed = (bool) => ({
+    type: 'TOGGLE_REVIEW',
+    payload: bool
+});
+
+
 export function loginUser(email, password) {
     return async (dispatch) => {
         dispatch(loginUserPending(true));

diff --git a/src/components/DrawerComponent.js b/src/components/DrawerComponent.js
@@ -12,7 +12,17 @@ const marks = {
 
 class DrawerComponent extends Component {
   DisplayDrawer = () => {
-    if (this.props.current_activity) {
+    if (this.props.current_activity && !this.props.locationReviewed) {
+        return (
+            <div className={"bottom-drawer"} onClick={this.props.toggleDrawer}>
+                <div className={"handle"}></div>
+                <img className={"current-image"} src={this.props.current_activity.info.image} />
+                <span className={"current-address"}>{this.props.current_activity.info.address}</span>
+                <Button type="primary" onClick={this.props.reviewLocation} className={"current-next-button"}>Review</Button>  
+            </div>
+        );
+    }
+    else if (this.props.current_activity) {
         return (
             <div className={"bottom-drawer"} onClick={this.props.toggleDrawer}>
                 <div className={"handle"}></div>

diff --git a/src/components/Feedback.js b/src/components/Feedback.js
@@ -26,7 +26,7 @@ class Feedback extends React.Component {
            <div style={{ textAlign: 'center' }}>
            <h2>Your feedback is important to us.</h2>
            <p>What was the quantity of waste on the ground?</p>
-                <RadioGroup onChange={this.props.onChangeWaste} defaultValue="a">
+                <RadioGroup value={this.props.wasteChoice} onChange={this.props.onChangeWaste} defaultValue="a">
                     <RadioButton value="Very Few">Very few</RadioButton>
                     <RadioButton value="Some">Some</RadioButton>
                     <RadioButton value="A Lot">A lot</RadioButton>
@@ -35,7 +35,7 @@ class Feedback extends React.Component {
 
             <div style={{ textAlign: 'center', marginTop: 35}}>
             <p>How satisfied were you with the furniture in this location?</p>
-                <RadioGroup onChange={this.props.onChangeFurniture} defaultValue="a">
+                <RadioGroup value={this.props.furnitureChoice} onChange={this.props.onChangeFurniture} defaultValue="a">
                     <RadioButton value="Very Satified">Very Satisfied</RadioButton>
                     <RadioButton value="Statisfied">Statisfied</RadioButton>
                     <RadioButton value="Unsatisfied">Unsatisfied</RadioButton>
@@ -44,7 +44,7 @@ class Feedback extends React.Component {
 
             <div style={{ textAlign: 'center', marginTop: 35 }}>
             <p>How satisfied were you with the maintenance of this location?</p>
-                <RadioGroup onChange={this.props.onChangeMaintenance} defaultValue="a">
+                <RadioGroup value={this.props.maintenanceChoice} onChange={this.props.onChangeMaintenance} defaultValue="a">
                     <RadioButton value="Very Satified">Very Satisfied</RadioButton>
                     <RadioButton value="Statisfied">Statisfied</RadioButton>
                     <RadioButton value="Unsatisfied">Unsatisfied</RadioButton>

diff --git a/src/components/MainPage.js b/src/components/MainPage.js
@@ -4,6 +4,7 @@ import Avatar from 'react-avatar';
 import { Button, Layout, Menu, Icon, Slider, Radio } from 'antd';
 import FeedbackContainer from '../containers/FeedbackContainer';
 import DrawerContainer from '../containers/DrawerContainer';
+import Feedback from './Feedback';
 const { Header, Sider } = Layout;
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
@@ -45,6 +46,7 @@ class MainPage extends Component {
                             onClick={this.props.toggleSidebar}
                         />
                     </Header>
+                    <FeedbackContainer />
                     <MapContainer />
                     <DrawerContainer />
                 </Layout>

diff --git a/src/components/SignupPage.js b/src/components/SignupPage.js
@@ -28,11 +28,12 @@ class SignUp extends React.Component {
     return (
         <Fragment>
         <Helmet bodyAttributes={{style: 'background-color : #454f58'}}/>
+        <div className={"login-filter"}/>
         <video id="background-video" className={"login-video"} loop autoPlay>
                     <source src="/Forest-Lullaby.mp4" type="video/mp4" />
                     Your browser does not support the video tag. 
         </video>
-        <div className={"login-filter"}/>
+
         <Card className="centerElement signUpCard" title="Sign up for eGOlogique" extra={<a href="/login">Back to login</a>} bordered={true}>
             <Form onSubmit={this.handleSubmit} className="">
                 <FormItem>

diff --git a/src/containers/DrawerContainer.js b/src/containers/DrawerContainer.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import DrawerComponent from '../components/DrawerComponent';
 import { connect } from "react-redux";
 import { notification } from 'antd';
-import { toggleDrawer, generateDirections, clearActivities, clearDirections, changeCurrentActivity } from '../actions/index';
+import { toggleDrawer, generateDirections, clearActivities, clearDirections, changeCurrentActivity, toggleModalFeedback, toggleLocationReviewed, toggleLocationNotReviewed } from '../actions/index';
 import { geolocated } from 'react-geolocated';
 import _ from 'lodash';
 
@@ -50,12 +50,19 @@ class DrawerContainer extends Component {
         this.props.generateDirections(this.props.coords, this.state.range, this.state.category);
     }
 
+    toggleReview = (event) => {
+        event.stopPropagation();
+        this.props.toggleModalFeedback(true);
+        this.props.toggleLocationReviewed(true);
+    }
+
     readyRally = (event) => {
         event.stopPropagation();
         if (!this.props.current_activity) {
             this.props.changeCurrentActivity(this.props.activities[0]);
         }
         else {
+            this.props.toggleLocationReviewed(false);
             const current_activity = this.props.current_activity;
             var index = this.props.activities.findIndex(function(activity) {
                 return _.isEqual(activity, current_activity);
@@ -103,6 +110,8 @@ class DrawerContainer extends Component {
                 restartRally={this.restartRally}
                 cancelRally={this.cancelRally}
                 progress={this.state.progress}
+                reviewLocation={this.toggleReview}
+                locationReviewed={this.props.locationReviewed}
             />
         );
     }
@@ -113,6 +122,7 @@ const mapStateToProps = (state) => {
         activities: state.activitiesReducer.activities,
         current_activity: state.activitiesReducer.current_activity,
         toggle_drawer: state.layoutReducer.toggle_drawer,
+        locationReviewed: state.layoutReducer.locationReviewed,
     };
 }
 
@@ -123,6 +133,8 @@ const mapDispatchToProps = (dispatch) => {
         clearActivities: () => dispatch(clearActivities()),
         clearDirections: () => dispatch(clearDirections()),
         changeCurrentActivity: (activity) => dispatch(changeCurrentActivity(activity)),
+        toggleModalFeedback: (activity) => dispatch(toggleModalFeedback(activity)),
+        toggleLocationReviewed: (bool) => dispatch(toggleLocationReviewed(bool)),
     };
 }
 

diff --git a/src/containers/FeedbackContainer.js b/src/containers/FeedbackContainer.js
@@ -2,11 +2,12 @@ import React, { Component } from 'react';
 import { connect } from "react-redux";
 import axios from 'axios';
 import { message } from 'antd';
+import { toggleHideModalFeedback } from '../actions/index';
 import Feedback from '../components/Feedback';
 
 
 
-class LoginPageContainer extends Component {
+class FeedbackContainer extends Component {
     constructor(props) {
         super(props);
         this.state = {visible: this.props.visible, address: this.props.address, wasteChoice: '', furnitureChoice: '', maintenanceChoice: ''};
@@ -34,19 +35,19 @@ class LoginPageContainer extends Component {
                 });
 
                 var params1 = new URLSearchParams();
-                params1.append('address', this.state.address);
+                params1.append('address', this.props.address);
                 params1.append('question', 'What was the quantity of waste on the ground?');
                 params1.append('answer', this.state.wasteChoice);
                 var data1 = await instance.post('/feedbacks/store', params1);
 
                 var params2 = new URLSearchParams();
-                params2.append('address', this.state.address);
+                params2.append('address', this.props.address);
                 params2.append('question', 'How satisfied were you with the furniture in this location?');
                 params2.append('answer', this.state.furnitureChoice);
                 var data2 = await instance.post('/feedbacks/store', params2);
 
                 var params3 = new URLSearchParams();
-                params3.append('address', this.state.addresss);
+                params3.append('address', this.props.addresss);
                 params3.append('question', 'How satisfied were you with the maintenance of this location?');
                 params3.append('answer', this.state.maintenanceChoice);
                 var data3 = await instance.post('/feedbacks/store', params3);
@@ -56,9 +57,7 @@ class LoginPageContainer extends Component {
                     maintenanceChoice: ''
                 });
                 message.success('Thank you for your feedback!');
-                this.setState({
-                    visible: false
-                });
+                this.props.toggleHideModalFeedback(false);
             }
             catch(e) {
                 message.error('An error occured. Please try again later.')
@@ -70,7 +69,7 @@ class LoginPageContainer extends Component {
     }
 
     handleCancel = (e) => {
-        this.setState({ visible: false });
+        this.props.toggleHideModalFeedback(false);
     }
 
     render() { 
@@ -81,7 +80,10 @@ class LoginPageContainer extends Component {
                 onChangeMaintenance={this.onChangeMaintenance} 
                 handleOk={this.handleSubmit} 
                 handleCancel={this.handleCancel} 
-                visible={this.state.visible}
+                visible={this.props.visibility}
+                maintenanceChoice={this.state.maintenanceChoice}
+                wasteChoice={this.state.wasteChoice}
+                furnitureChoice={this.state.furnitureChoice}
             />
         );
     }
@@ -90,13 +92,15 @@ class LoginPageContainer extends Component {
 const mapStateToProps = (state) => {
     return {
         user: state.userReducer.user,
+        address: state.activitiesReducer.current_activity,
+        visibility: state.activitiesReducer.modalVisibility
     };
 }
 
 const mapDispatchToProps = (dispatch) => {
     return {
-
+        toggleHideModalFeedback: (bool) => dispatch(toggleHideModalFeedback(bool))
     };
 }
 
-export default  connect(mapStateToProps, mapDispatchToProps)(LoginPageContainer);
+export default  connect(mapStateToProps, mapDispatchToProps)(FeedbackContainer);
diff --git a/src/reducers/activitiesReducer.js b/src/reducers/activitiesReducer.js
@@ -1,6 +1,8 @@
 const initialState = {
     activities: null,
-    current_activity: null
+    current_activity: null,
+    modalVisibility: false,
+    activityAddress: ''
 }
 
 export const activitiesReducer = (state = initialState, action) => {
@@ -11,6 +13,8 @@ export const activitiesReducer = (state = initialState, action) => {
             return {...state, current_activity: action.payload}
         case "CLEAR_ACTIVITIES":
             return {...state, activities: null, current_activity: null}
+        case "TOGGLE_MODAL_FEEDBACK":
+            return {...state, modalVisibility: action.payload}
         default:
             return state;
     }

diff --git a/src/reducers/layoutReducer.js b/src/reducers/layoutReducer.js
@@ -1,6 +1,7 @@
 const initialState = {
     toggle_sidebar: false,
-    toggle_drawer: false
+    toggle_drawer: false,
+    locationReviewed: false,
 }
 
 export const layoutReducer = (state = initialState, action) => {
@@ -9,6 +10,8 @@ export const layoutReducer = (state = initialState, action) => {
             return {...state, toggle_sidebar: action.payload}
         case "TOGGLE_DRAWER":
             return {...state, toggle_drawer: action.payload}
+        case "TOGGLE_REVIEW":
+            return {...state, locationReviewed: action.payload}
         default:
             return state;
     }

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -140,7 +140,7 @@ body {
   margin-top: 15vh;
   width: 90vw;
   max-width: 700px;
-  height: 50vh;
+  max-height: 55vh;
 }
 
 .signUpButton {
@@ -310,9 +310,9 @@ body {
   padding-left: 0;
 }
 
-.ant-card-head-title {
+/* .ant-card-head-title {
   text-align: center;
-}
+} */
 
 .leaderboardLink {
   color: rgba(0, 0, 0, 0.65);