4,864 package-lock.json
View file

Large diffs are not rendered by default.

2 src/App.js
View file
@@ -9,7 +9,7 @@ import SignUpForm from "./components/auth/SignUp.js"

import withAuthentication from './components/auth/WithAuthentication.js';
import Submit from "./components/MapView/Submit.js"
import NewTrip from "./components/NewTrip/NewTrip.js"
import NewTrip from "./utils/NewTrip/NewTrip.js"

import {BrowserRouter} from 'react-router-dom'
import {Route} from 'react-router-dom';
63 src/components/NewTrip/NewTrip.js
View file

This file was deleted.

5 src/utils/AddMap/AddMap.js
View file
@@ -1,10 +1,13 @@
import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import NewTrip from '../NewTrip/NewTrip';

export default class AddMap extends React.Component {
constructor(props) {
super(props);
console.log('props in addMap '+ props.userId);
this.state = {
userId: props.userId,
modal: props.modal
};
this.toggle = this.toggle.bind(this);
@@ -23,7 +26,7 @@ export default class AddMap extends React.Component {
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<NewTrip userId={this.state.userId}/>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
49 src/utils/MyTrips/MyTrips.js
View file
@@ -1,14 +1,19 @@
import React, {Component} from 'react';
import '../../App.css';
import * as firebase from "firebase";
import {Container, Row, Collapse} from 'reactstrap';
import ImageBox from "../../utils/ImageBox/ImageBox";
import NavHeader from '../../utils/NavHeader/NavHeader';


export default class MyTrips extends Component {
constructor(props) {
super(props);
this.state = {
userId : props.userId,
myTrips : []
myTrips : [],
loaded: false,
collapse: false,
};
}

@@ -20,17 +25,49 @@ export default class MyTrips extends Component {
//getting the list of trips
userRef.doc(this.state.userId).get().then(user => {
this.setState({
myTrips : user.data().my_trips
myTrips : user.data().my_trips,
loaded : true
});
});
};

render() {

// let container = null;
// if (!this.state.loaded) {
// container = <Container><img src={require('../../imgs/loader.svg')} alt=''/></Container>
// } else {
//
// let collapsePop = !this.state.popularTrips[this.state.targetId] ? "" :
// <Collapse className='map-collapse' isOpen={this.state.collapse}>
// <Row className='map-collapse-content shadow'>
// <div>{this.state.targetId ? this.getTrips(this.category.popular)[this.state.targetId].name : ""}</div>
// </Row>
// </Collapse>;
// let collapseRes = !this.state.restTrips[this.state.targetId] ? "" :
// <Collapse className='map-collapse' isOpen={this.state.collapse}>
// <Row className='map-collapse-content shadow'>
// <div>{this.state.targetId ? this.getTrips(this.category.rest)[this.state.targetId].name : ""}</div>
// </Row>
// </Collapse>;
//
// container = <Container fluid={true}>
// <div className='category-title'> most popular</div>
// <div className='category horizontal-scroll' onClick={(e) => this.toggle(e)} style={{marginBottom: '1rem'}}>
// <ImageBox trips={this.getTrips(this.category.popular)}/>
// </div>
// {collapsePop}
// <div className='category-title'> local - San Francisco</div>
// <div className='category horizontal-scroll' onClick={(e) => this.toggle(e)} style={{marginBottom: '1rem'}}>
// <ImageBox trips={this.getTrips(this.category.rest)}/>
// </div>
// {collapseRes}
// </Container>
//
// }
return (
<div className="App">
<p>My Trips</p>
/*Map Objects Here*/
{this.state.myTrips}
<div id='HomePage'>
My Trips
</div>
);
}
3 src/utils/NavHeader/NavHeader.js
View file
@@ -89,6 +89,7 @@ export default class NavHeader extends Component {
? <div>
<NavItem>
<NavLink onClick={() => firebase.auth().signOut()}>Sign Out</NavLink>
<AddMap modal={this.state.modal} userId={authUser.uid}/>
</NavItem>
</div>
: <NavItem>
@@ -97,7 +98,7 @@ export default class NavHeader extends Component {
}
</AuthUserContext.Consumer>

<AddMap modal={this.state.modal} ref="addMap"/>

</Nav>
</Navbar>
</div>
121 src/utils/NewTrip/NewTrip.js
View file
@@ -0,0 +1,121 @@
import React, {Component} from 'react';

import NavHeader from '../NavHeader/NavHeader';
import {Container, Row, Col} from 'reactstrap';
import {Button, Form, FormGroup, Label, Input, FormText} from 'reactstrap';
import '../../App.css';
import * as firebase from "firebase";
import {Redirect} from 'react-router-dom'


export default class NewTrip extends Component {

constructor(props) {
super(props);
console.log(props.userId);
this.state = {
upVotes: 0,
name: "",
pins: [],
image: null,
image_file: null,
stars: 0,
ownerId: props.userId
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleFileChange = this.handleFileChange.bind(this);
// 0ry0EHh62ST3HpyeoJem9xb2yyK2
};

handleFileChange = (event) => {
this.setState({image_file: event.target.files[0]});
};

handleNameChange(event) {
this.setState({name: event.target.value});
}

//post image to the cloud
//sets the state.image to have url
postImageToCloud = (tripId, image) => {
// Create a root reference to push trip image to cloud storage
var storageRef = firebase.storage().ref();
var imgRefPath = 'trips/' + tripId + "/" + "main" + ".jpg";
var dbImageRef = storageRef.child(imgRefPath);
dbImageRef.put(image).then(rec => {
rec.ref.getDownloadURL().then(url => {
this.setState({
image: url
});
});
});

};

//set the image url for the trip in DB
setImageInTripDb = (tripId) => {
const db = firebase.firestore();
var tripRef = db.collection('trips').doc(tripId);
tripRef.update({
image: this.state.image
});
};

//post trip to the storage
postTrip = (event) => {
event.preventDefault();
event.stopPropagation();

//referencing trips database
const db = firebase.firestore();
var tripsRef = db.collection('trips');
var _this = this;
tripsRef.add({
name: this.state.name,
owner_id: this.state.ownerId,
pins: [],
stars: this.state.stars,
}).then(function (trip) {
//setting tripId and call back function is to push image to cloud
_this.postImageToCloud(trip.id, _this.state.image_file, () => _this.setImageInTripDb(trip.id));
_this.setState({
tripId: trip.id
});

//updating my_trips list for the user
var userRef = db.collection('users').doc(_this.state.ownerId);
userRef.get().then(user => {
//getting the current list
var tripsList = user.data().my_trips;
tripsList.push(trip.id);
//updating the list of my_trips
userRef.update({
my_trips: tripsList
});
});

}).then(() => {
window.location.assign('/mapview/' + _this.state.tripId);
});
};


render() {
return (
<Form onSubmit={this.postTrip}>
<FormGroup>
<Label for="tripName">Trip Name</Label>
<Input type="name" name="name" id="tripName" onChange={this.handleNameChange}/>
</FormGroup>
<FormGroup>
<Label for="file">File</Label>
<Input type="file" name="file" id="file" onChange={this.handleFileChange}/>
</FormGroup>
<Button>Submit</Button>
</Form>

);
}


}