About:
+ {props.activity.description}
+ {props.activity.address}
+
+ {props.activity.address}
+
-
);
@@ -159,28 +166,37 @@ class Home extends React.Component {
Get Started
-
-
+
-
Don't wait! Plan your next trip today!
+ +
+ Don't wait! Plan your next trip today!
+
-
{this.getStarted()}
@@ -230,15 +246,15 @@ class Home extends React.Component {
- )};
+ );}
}
const mapStateToProps = state => (
- { store: state }
+ { store: state } // eslint-disable-line
);
const mapDispatchToProps = dispatch => (
{ actions: bindActionCreators(actions, dispatch) }
);
-export default connect(mapStateToProps, mapDispatchToProps)(Home);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(Home);
diff --git a/react-client/src/components/hotels.jsx b/react-client/src/components/hotels.jsx
new file mode 100644
index 0000000..0816121
--- /dev/null
+++ b/react-client/src/components/hotels.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import moment from 'moment';
+
+import { GridList, GridTile } from 'material-ui/GridList';
+// import Subheader from 'material-ui/Subheader';
+import IconButton from 'material-ui/IconButton';
+import AddBorder from 'material-ui/svg-icons/content/add-circle-outline';
+import Snackbar from 'material-ui/Snackbar';
+
+const styles = {
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ // width: '50%'
+ },
+ gridList: {
+ width: '100%',
+ height: 800,
+ overflowY: 'auto',
+ },
+ anchor: {
+ color: 'white'
+ }
+};
+//these are search results for hotels
+const Hotels = (props) => {
+
+ if (props.hotels.length !== 0) {
+ return (
+ {food.restaurant.name}}
+ title= {
+ {food.restaurant.name}
+ }
subtitle= {`Cost for Two $${food.restaurant.average_cost_for_two}`}
- actionIcon={ props.addFoodToTrip(food, props.user, props.city)}> }
+ /*add props.tripId*/
+ actionIcon={
+ props.addFoodToTrip(food, props.store.userTrips[props.store.activeTrip.index].id)
+ }> }
>
-
+ 
);
} else {
- return(
+ return (
props.addFoodToTrip(food, props.user, props.city)}> props.addFoodToTrip(food, props.store.userTrips[props.store.activeTrip.index].id)
+ }
+ > }
>
-
+ ![]()
- )
+ );
}
})}
@@ -65,6 +92,6 @@ const Eatin = (props) => {
} else {
return null;
}
-}
+};
-export default Eatin;
\ No newline at end of file
+export default Eatin;
diff --git a/react-client/src/components/searchPage.jsx b/react-client/src/components/searchPage.jsx
index 1932cd6..136bb4c 100644
--- a/react-client/src/components/searchPage.jsx
+++ b/react-client/src/components/searchPage.jsx
@@ -1,5 +1,4 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@@ -17,23 +16,19 @@ import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import DatePicker from 'material-ui/DatePicker';
-import Toggle from 'material-ui/Toggle';
-import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
-
-import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+import { Card, CardTitle, CardText } from 'material-ui/Card';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import { cyan50, cyan100, cyan200, cyan300, cyan400, cyan500, cyan600, cyan700, cyan800, cyan900 } from 'material-ui/styles/colors';
+import { cyan800, cyan900 } from 'material-ui/styles/colors';
import * as theme from './homePage.jsx'; // * does all named exports from that file
import * as tripStyle from './trip.jsx';
import * as actions from '../actions/index.js';
import Activity from './activity.jsx';
-import UserPage from './userPage.jsx';
import Events from './events.jsx';
import Signup from './signup.jsx';
import Login from './login.jsx';
import Eatin from './restaurants.jsx';
+import Hotels from './hotels.jsx';
export const styles = {
activityContainer: {
@@ -99,12 +94,14 @@ export const styles = {
welcomeUser: {
marginTop: '1%'
}
-}
+};
//this is a terrible nightmare component that should be overhauled
class SearchPage extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props);
+
+ console.log('props.store.userTrips[props.store.activeTrip.index]', props.store.userTrips[props.store.activeTrip.index]);
if (props.store.userTrips.length !== 0 && props.store.activeTrip.status) {
this.state = {
open: true,
@@ -115,7 +112,7 @@ class SearchPage extends React.Component {
editDatesOpen: false,
tempFromDate: props.store.userTrips[props.store.activeTrip.index].fromDate,
tempToDate: props.store.userTrips[props.store.activeTrip.index].toDate
- }
+ };
} else if (props.store.userTrips.length !== 0) {
this.state = {
open: false,
@@ -126,18 +123,43 @@ class SearchPage extends React.Component {
editDatesOpen: false,
tempFromDate: props.store.userTrips[props.store.activeTrip.index].fromDate,
tempToDate: props.store.userTrips[props.store.activeTrip.index].toDate
- }
+ };
} else {
this.state = {
open: false,
dropdown: 0,
editDatesOpen: false
+ };
+ }
+
+ this.submit = this.submit.bind(this);
+ this.updateCity = this.updateCity.bind(this);
+ this.updateEventQuery = this.updateEventQuery.bind(this);
+ this.submitEventQuery = this.submitEventQuery.bind(this);
+ this.updateHotelQuery = this.updateHotelQuery.bind(this);
+ this.submitHotelQuery = this.submitHotelQuery.bind(this);
+ this.updateFoodQuery = this.updateFoodQuery.bind(this);
+ this.submitFoodQuery = this.submitFoodQuery.bind(this);
+ this.handleEnterKey = this.handleEnterKey.bind(this);
+ }
+
+ handleEnterKey(e) {
+ let store = this.props.store;
+ if (store.authenticated && e.key === 'Enter') {
+ if (e.target.id === 'city') {
+ this.submit(e);
+ } else if (e.target.id === 'event') {
+ this.submitEventQuery(e);
+ } else if (e.target.id === 'food') {
+ this.submitFoodQuery(e);
+ } else if (e.target.id === 'hotel') {
+ this.submitHotelQuery(e);
}
}
}
//works for input box and dropdown menu
- updateCity (event, index, value) {
+ updateCity(event, index, value) {
let store = this.props.store;
let actions = this.props.actions;
if (value && index !== 0) { //is dropdown
@@ -155,7 +177,7 @@ class SearchPage extends React.Component {
}
//makes cities always only have a capital letter as the first char of each word
- formatCity (city) {
+ formatCity(city) {
const words = city.split(' ');
let newWords = [];
for (let word of words) {
@@ -163,63 +185,87 @@ class SearchPage extends React.Component {
newWords.push(word);
}
return newWords.join(' ');
- }
+ }
//creates a new trip from the input box
- submit (event) {
+ submit(event) {
let store = this.props.store;
let actions = this.props.actions;
event.preventDefault();
if (store.authenticated) {
if (store.city !== '' && store.tripFromDate !== '' && store.tripToDate !== '') { //checks for required entries
actions.makeNewTrip(store.username, store.city, store.userTrips.length, store.tripFromDate, store.tripToDate);
- this.setState({ activeCity: store.city, open: true, activeFromDate: store.tripFromDate, activeToDate: store.tripToDate});
+ this.setState({
+ activeCity: store.city,
+ open: true,
+ activeFromDate: store.tripFromDate,
+ activeToDate: store.tripToDate
+ });
} else {
window.alert('Please make sure to fill in the dates and city name!');
}
}
- };
+ }
-/***************************** Event - search **********************************/
+ /***************************** Event - search **********************************/
updateEventQuery(event) {
- this.props.actions.updateEventQuery(event.target.value)
- };
+ this.props.actions.updateEventQuery(event.target.value);
+ }
- submitEventQuery (event) {
+ submitEventQuery(event) {
let store = this.props.store;
let actions = this.props.actions;
event.preventDefault(); //prevent refresh, might not need this anymore
if ((store.activeTrip.status || store.city) && store.eventQuery) {
- let city = store.activeTrip.status ? this.state.activeCity : store.city; //lets you maybe search on a city without creating a trip
+ // let city = store.activeTrip.status ? this.state.activeCity : store.city; //lets you maybe search on a city without creating a trip
actions.searchEvents(this.state.activeCity, store.eventQuery, this.state.activeFromDate, this.state.activeToDate);
} else {
window.alert('Please select a city and search terms first!');
}
- };
+ }
-/***************************** Food - search **********************************/
- updateFoodQuery (event) {
- this.props.actions.updateFoodQuery(event.target.value)
- };
+ /***************************** Food - search **********************************/
+ updateFoodQuery(event) {
+ this.props.actions.updateFoodQuery(event.target.value);
+ }
- submitFoodQuery (event) {
+ submitFoodQuery(event) {
let store = this.props.store;
event.preventDefault();
- if(store.activeTrip.status || store.city) {
- let city = store.activeTrip.status ? this.state.activeCity : store.city;
- this.props.actions.searchForFood(this.state.activeCity, store.foodQuery)
+ if ((store.activeTrip.status || store.city) && store.foodQuery) {
+ // let city = store.activeTrip.status ? this.state.activeCity : store.city;
+ this.props.actions.searchForFood(this.state.activeCity, store.foodQuery);
} else {
- window.alert('Please select a city and search terms first!')
+ window.alert('Please select a city and search terms first!');
}
- };
+ }
+ /***************************** Hotel - search **********************************/
+ updateHotelQuery(event) {
+ this.props.actions.updateHotelQuery(event.target.value);
+ }
-/***************************** MESSAGE *****************************/
- render () {
+ submitHotelQuery(event) {
+ let store = this.props.store;
+ let actions = this.props.actions;
+
+ event.preventDefault(); //prevent refresh, might not need this anymore
+ if ((store.activeTrip.status || store.city)) {
+ // let city = store.activeTrip.status ? this.state.activeCity : store.city; //lets you maybe search on a city without creating a trip
+ actions.searchHotels(this.state.activeCity, store.hotelQuery, this.state.activeFromDate, this.state.activeToDate);
+ } else {
+ window.alert('Please select a city and search terms first!');
+ }
+ }
+
+
+ /***************************** MESSAGE *****************************/
+ render() {
let message = '';
- let messageEvents = '';
- let messageFood = '';
+ let messageEvents = ''; // eslint-disable-line
+ let messageFood = ''; // eslint-disable-line
+ let messageHotels = ''; // eslint-disable-line
let activeCity = this.state.activeCity;
let store = this.props.store; //the redux store
let actions = this.props.actions;
@@ -229,19 +275,20 @@ class SearchPage extends React.Component {
messageEvents = 'First pick a city before searching events!';
messageFood = '';
} else {
- message = `You\'re going to ${activeCity}! \n Or plan a different trip: `;
- messageEvents = `Type a keyword to find events in ${activeCity}!`;
- messageFood= `Or search for food in ${activeCity}!`;
+ message = `You're going to ${activeCity}! \n Or plan a different trip: `;
+ messageEvents = `Type a keyword to find events in ${activeCity}!`; // eslint-disable-line
+ messageHotels = 'Now add a hotel for your stay!'; // eslint-disable-line
+ messageFood= `Or search for food in ${activeCity}!`; // eslint-disable-line
}
- /*************************** DATE SELECTION STUFF ***************************/
- // all this probably shouldn't be in the render method but oh well
+ /*************************** DATE SELECTION STUFF ***************************/
+ // all this probably shouldn't be in the render method but oh well
let today = new Date();
let formatDate = (date) => {
// Dates need to be in YYYY-MM-DD format
return moment(date).format('YYYY-MM-DDT00:00:00.000Z'); //<-- moment is cool library
- }
+ };
let updateFromDate = (event, date) => { //pulls from material date pickker
let fromDate;
@@ -263,7 +310,7 @@ class SearchPage extends React.Component {
this.setState({
activeFromDate: fromDate
});
- }
+ };
const updateToDate = (event, date) => {
let toDate;
@@ -278,7 +325,7 @@ class SearchPage extends React.Component {
activeToDate: toDate
});
};
- //some of this is just trying to keep this component's state and the redux store in sync which is
+ //some of this is just trying to keep this component's state and the redux store in sync which is
//kind of bad form for redux for this component to have so much stuff
const submitEditDates = () => {
let city = this.state.activeCity;
@@ -305,33 +352,33 @@ class SearchPage extends React.Component {
if (store.authenticated) { //logged in
return (
{
updateFromDate(null, '');
updateToDate(null, '');
@@ -357,8 +406,9 @@ class SearchPage extends React.Component {
];
const drawer = () => {
+ console.log('searchpage store', store);
if (store.activeTrip.status) {
- let activeTrip = store.userTrips[store.activeTrip.index];
+ let activeTrip = store.userTrips[store.activeTrip.index];
if (activeTrip) {
let fromDate = moment(activeTrip.fromDate).format('MM/DD/YY');
let toDate = moment(activeTrip.toDate).format('MM/DD/YY');
@@ -408,7 +458,7 @@ class SearchPage extends React.Component {
fontWeight: 'bold'
}}>{fromDate} - {toDate}
-
+
+ {props.hotels.map((hotel) => {
+ if (hotel.icon) {
+ return (
+ {hotel.name}}
+ // subtitle={`${moment(hotel.start.local).format('MM/DD/YY hh:mm A')} - ${moment(hotel.end.local).format('MM/DD/YY hh:mm A')}`}
+ actionIcon={
+ props.addHotelToTrip(hotel, props.store.userTrips[props.store.activeTrip.index].id)
+ }>
+ }
+ >
+ 
+
+ );
+ } else {
+ return (
+ props.addHotelToTrip(hotel, props.store.userTrips[props.store.activeTrip.index].id)}
+ >
+ ![]()
+
+ );
+ }
+ })}
+
+
+ );
+ } else {
+ return null;
+ }
+};
+
+export default Hotels;
diff --git a/react-client/src/components/login.jsx b/react-client/src/components/login.jsx
index 491bb3c..b7299bf 100644
--- a/react-client/src/components/login.jsx
+++ b/react-client/src/components/login.jsx
@@ -5,39 +5,46 @@ import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import * as theme from './homePage.jsx'; // * does all named exports from that file
-import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+// import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import { cyan50, cyan100, cyan200, cyan300, cyan400, cyan500, cyan600, cyan700, cyan800, cyan900 } from 'material-ui/styles/colors';
+// import getMuiTheme from 'material-ui/styles/getMuiTheme';
+// import { cyan50, cyan100, cyan200, cyan300, cyan400, cyan500, cyan600, cyan700, cyan800, cyan900 } from 'material-ui/styles/colors';
export const styles = {
actionButtons: {
backgroundColor: '#f9f9f9',
margin: '1%'
}
-}
+};
class Login extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props);
this.state = {
open: false
- }
+ };
+
+ this.submit = this.submit.bind(this);
+ this.changeUsername = this.changeUsername.bind(this);
+ this.changePassword = this.changePassword.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleEnterKey = this.handleEnterKey.bind(this);
}
- submit (event) {
+ submit(event) {
event.preventDefault();
this.props.login(this.props.username, this.props.password);
this.setState({ open: false });
this.props.forward();
}
- changeUsername (event) {
+ changeUsername(event) {
this.props.updateUsername(event.target.value);
}
- changePassword (event) {
+ changePassword(event) {
this.props.updatePassword(event.target.value);
}
@@ -49,6 +56,12 @@ class Login extends React.Component {
this.setState({ open: false });
}
+ handleEnterKey(e) {
+ if (e.key === 'Enter') {
+ this.submit(e);
+ }
+ }
+
render() {
//these are the buttons on the modal
const actions = [
@@ -56,14 +69,16 @@ class Login extends React.Component {
label="Login"
primary={true}
// keyboardFocused={true}
- onClick={this.submit.bind(this)}
+ onClick={this.submit}
style={styles.actionButtons}
+ key="login"
/>,
-
+
- {store.userTrips.map((trip, index) =>
-
- )}
+ {store.userTrips.map((trip, index) =>
+
+ )}
-
+
(this.setState({ open: !this.state.open }))}
label='Show Details'
disabled={!store.activeTrip.status}
/>
- )
+ );
} else {
return (
+
Please login to view your current trips!
- )
+ );
}
- }
+ };
/*************************** TRIP DETAILS SIDEBAR ***************************/
//edit a trip's dates modal buttons
@@ -341,11 +388,13 @@ class SearchPage extends React.Component {
primary={true}
keyboardFocused={true}
onClick={submitEditDates}
+ key="submit"
/>,
+
Edit your trip dates below:
+ {activeTrip.hotels.map((hotel, index) =>
+ (
+
+
{showActivityDiv('eatin', activeTrip)}
- {activeTrip.eatin.map((eatin, index) =>
+ {activeTrip.eatin.map((eatin, index) =>
( {
if (store.authenticated) {
@@ -488,29 +556,30 @@ class SearchPage extends React.Component {
} else {
return (
-
+
{/************************** NAVIGATION **************************/}
{navLinks()}
{/******************************* HEADER *******************************/}
@@ -565,7 +638,7 @@ class SearchPage extends React.Component {
-
+
- )
+ );
}
- }
+ };
/************************* ACTIVITY HEADER DIVS ******************************/
const showActivityDiv = (activityType, trip) => {
@@ -518,12 +587,16 @@ class SearchPage extends React.Component {
if (activityType === 'event' && trip.events.length > 0) {
return (
Events:
- )
+ );
// If activity = eatin and there are restaurants in the current trip
+ } else if (activityType === 'hotel' && trip.hotels.length > 0) {
+ return (
+ Hotel:
+ );
} else if (activityType === 'eatin' && trip.eatin.length > 0) {
return (
Food:
- )
+ );
}
};
@@ -532,29 +605,29 @@ class SearchPage extends React.Component {
if (store.authenticated) {
return (
Welcome back, {store.username}!
- )
+ );
} else {
return (
Welcome!
- )
+ );
}
- }
+ };
/************************ CREATE TRIP SEARCH BUTTON ************************/
const searchButton = () => {
return (
{welcomeUser()}
-
+
{/************************** CREATE TRIP CARD **************************/}
{drawer()}
@@ -596,15 +669,16 @@ class SearchPage extends React.Component {
minDate={store.minToDate}
/>
- +
{message}
+
{searchButton()}