From 6d6becdac6ca550fc213a07a3a444e7227011418 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 6 May 2018 00:23:14 -0400 Subject: [PATCH 1/2] Change filter bug signup page --- src/components/SignupPage.js | 3 ++- src/styles/App.css | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/SignupPage.js b/src/components/SignupPage.js index f4b49dd..ee66a63 100644 --- a/src/components/SignupPage.js +++ b/src/components/SignupPage.js @@ -28,11 +28,12 @@ class SignUp extends React.Component { return ( +
-
+ Back to login} bordered={true}>
diff --git a/src/styles/App.css b/src/styles/App.css index 1276e8e..c18cd6b 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -141,7 +141,7 @@ body { margin-top: 15vh; width: 90vw; max-width: 700px; - height: 50vh; + max-height: 55vh; } .signUpButton { @@ -266,9 +266,9 @@ body { padding-left: 0; } -.ant-card-head-title { +/* .ant-card-head-title { text-align: center; -} +} */ .leaderboardLink { color: rgba(0, 0, 0, 0.65); From 8f0aee73f04ee0d272293cfdb107667947f4ef0c Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 6 May 2018 01:45:09 -0400 Subject: [PATCH 2/2] Add good feedback flow --- src/actions/index.js | 16 ++++++++++++++++ src/components/DrawerComponent.js | 12 +++++++++++- src/components/Feedback.js | 6 +++--- src/components/MainPage.js | 2 ++ src/containers/DrawerContainer.js | 14 +++++++++++++- src/containers/FeedbackContainer.js | 26 +++++++++++++++----------- src/reducers/activitiesReducer.js | 6 +++++- src/reducers/layoutReducer.js | 5 ++++- 8 files changed, 69 insertions(+), 18 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index e4cc4b9..8601f04 100644 --- 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 index d51b66a..7cb3476 100644 --- 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 ( +
+
+ + {this.props.current_activity.info.address} + +
+ ); + } + else if (this.props.current_activity) { return (
diff --git a/src/components/Feedback.js b/src/components/Feedback.js index 9e43b72..042a561 100644 --- a/src/components/Feedback.js +++ b/src/components/Feedback.js @@ -26,7 +26,7 @@ class Feedback extends React.Component {

Your feedback is important to us.

What was the quantity of waste on the ground?

- + Very few Some A lot @@ -35,7 +35,7 @@ class Feedback extends React.Component {

How satisfied were you with the furniture in this location?

- + Very Satisfied Statisfied Unsatisfied @@ -44,7 +44,7 @@ class Feedback extends React.Component {

How satisfied were you with the maintenance of this location?

- + Very Satisfied Statisfied Unsatisfied diff --git a/src/components/MainPage.js b/src/components/MainPage.js index 2e10643..bb8ff6d 100644 --- 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} /> + diff --git a/src/containers/DrawerContainer.js b/src/containers/DrawerContainer.js index c973e68..a23a2ca 100644 --- 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 index 3c6ba5a..873a23d 100644 --- 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); \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(FeedbackContainer); \ No newline at end of file diff --git a/src/reducers/activitiesReducer.js b/src/reducers/activitiesReducer.js index cbd6a03..ba47ccb 100644 --- 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 index e3aedb3..dd0dbe1 100644 --- 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; }