From d5491a1c4a33a00284bb5dda0b63bb9504503360 Mon Sep 17 00:00:00 2001 From: harriet-the-spy Date: Wed, 9 Dec 2020 14:38:17 -0800 Subject: [PATCH] initial feedback DO NOT MERGE (has not been thoroughly validated) --- src/About/About.js | 1 + src/App.js | 11 ++++----- src/Detail/Detail.js | 8 +++++-- src/Home/Home.js | 6 ++--- src/Map/Map.js | 54 +++++++++++++++++++++++--------------------- src/limeStub.js | 1 + 6 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/About/About.js b/src/About/About.js index 276b7b4..e164be2 100644 --- a/src/About/About.js +++ b/src/About/About.js @@ -10,6 +10,7 @@ export default class About extends Component { render() { return ( <> + {/* might be nice to have this data living in json, to map over and prevent code duplication */}

About Us

diff --git a/src/App.js b/src/App.js index c4d0c96..74658a8 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,8 @@ import Home from './Home/Home.js' import PrivateRoute from './PrivateRoute.js'; import Header from './Header/Header.js'; +// nice work on the folder structure of this project! very easy to read! + export default class App extends Component { state = { token: localStorage.getItem('TOKEN') || '', @@ -31,13 +33,8 @@ export default class App extends Component { } logOut = () => { - localStorage.setItem('TOKEN', ''); - localStorage.setItem('USERNAME', ''); - - this.setState({ - username: '', - token: '' - }) + this.handleTokenChange(''); + this.handleUsernameChange('') } render() { diff --git a/src/Detail/Detail.js b/src/Detail/Detail.js index c767d8a..6194d3d 100644 --- a/src/Detail/Detail.js +++ b/src/Detail/Detail.js @@ -3,6 +3,7 @@ import './Detail.css'; import request from 'superagent'; import { triMetStub } from './TriMetLocationStub.js'; +import { URL } from '../Home/Home.js' export default class Detail extends Component { state = { @@ -18,7 +19,7 @@ export default class Detail extends Component { const { token } = this.props; const response = await request - .get(`https://desolate-bayou-65072.herokuapp.com/api/trimet/detail?locid=${this.props.match.params.id}`) + .get(`${URL}/api/trimet/detail?locid=${this.props.match.params.id}`) .set('Authorization', token) await this.setState({ trimetLocation: JSON.parse(JSON.parse(response.text).text), @@ -26,6 +27,7 @@ export default class Detail extends Component { }) } + // nice util! makeThreeDigitNumber = (routeNumber) => { //if 3 digits add no zeros, if 2 digits add leading zero, if 1 digit add 2 leading zeros. const oneZero = '0'; @@ -41,6 +43,8 @@ export default class Detail extends Component { } render() { + const threeDigitNumber = this.makeThreeDigitNumber(this.state.trimetLocation.resultSet.arrival[0].route); + return (
@@ -62,7 +66,7 @@ export default class Detail extends Component {
{/* Need digit code to be 3 digit but pull from data */} - busmap + busmap }
diff --git a/src/Home/Home.js b/src/Home/Home.js index 9ffd1af..120f40d 100644 --- a/src/Home/Home.js +++ b/src/Home/Home.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import request from 'superagent'; import './Home.css' - +const URL = 'https://desolate-bayou-65072.herokuapp.com' export default class Home extends Component { state = { @@ -18,7 +18,7 @@ export default class Home extends Component { this.setState({ loading: true }) const user = await request - .post('https://desolate-bayou-65072.herokuapp.com/auth/signup') + .post(`${URL}/auth/signup`) .send({ email: this.state.signUpEmail, password: this.state.signUpPassword @@ -40,7 +40,7 @@ export default class Home extends Component { this.setState({ loading: true }) try { const user = await request - .post('https://desolate-bayou-65072.herokuapp.com/auth/signin') + .post(`${URL}/auth/signin`) .send({ email: this.state.loginEmail, password: this.state.loginPassword diff --git a/src/Map/Map.js b/src/Map/Map.js index 0a150f0..9b32ad6 100644 --- a/src/Map/Map.js +++ b/src/Map/Map.js @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import XMLParser from 'react-xml-parser'; import request from 'superagent'; import GoogleMapReact from 'google-map-react'; +// nice work moving these out into components! i wonder if you could have dropped the differences down as props, though . . . import BasicMarkerLime from './BasicMarkerLime.js'; import BasicMarkerNike from './BasicMarkerNike.js'; import BasicMarkerSpin from './BasicMarkerSpin.js'; @@ -10,6 +11,7 @@ import BasicMarkerTriMet from './BasicMarkerTriMet.js'; import '../App.css'; import './Map.css'; +import { URL } from '../Home/Home.js'; export default class Map extends Component { state = { @@ -30,11 +32,8 @@ export default class Map extends Component { }; componentDidMount = async () => { - await this.fetchLime() - await this.fetchNike() - await this.fetchSpin() - await this.fetchFavorites() - await this.fetchTrimet() + // this will launch all fetches at the same time and save loading time + await this.fetchAll(); } fetchLime = async () => { @@ -42,7 +41,7 @@ export default class Map extends Component { await this.setState({ loading: true }); const response = await request - .get(`https://desolate-bayou-65072.herokuapp.com/api/lime?lat=${this.state.lat}&lon=${this.state.lng}`) + .get(`${URL}/api/lime?lat=${this.state.lat}&lon=${this.state.lng}`) .set('Authorization', token) await this.setState({ lime: response.body, loading: false }) @@ -53,7 +52,7 @@ export default class Map extends Component { await this.setState({ loading: true }); const response = await request - .get(`https://desolate-bayou-65072.herokuapp.com/api/nike?lat=${this.state.lat}&lon=${this.state.lng}`) + .get(`${URL}/api/nike?lat=${this.state.lat}&lon=${this.state.lng}`) .set('Authorization', token) await this.setState({ nike: response.body, loading: false }) @@ -64,7 +63,7 @@ export default class Map extends Component { await this.setState({ loading: true }); const response = await request - .get(`https://desolate-bayou-65072.herokuapp.com/api/spin?lat=${this.state.lat}&lon=${this.state.lng}`) + .get(`${URL}/api/spin?lat=${this.state.lat}&lon=${this.state.lng}`) .set('Authorization', token) await this.setState({ spin: response.body, loading: false }) @@ -75,7 +74,7 @@ export default class Map extends Component { await this.setState({ loading: true }); const response = await request - .get(`https://desolate-bayou-65072.herokuapp.com/api/trimet?lat=${this.state.lat}&lng=${this.state.lng}`) + .get(`${URL}/api/trimet?lat=${this.state.lat}&lng=${this.state.lng}`) .set('Authorization', token) const xml = new XMLParser().parseFromString(response.body.text); @@ -85,7 +84,7 @@ export default class Map extends Component { fetchFavorites = async () => { const { token } = this.props; - const response = await request.get('https://desolate-bayou-65072.herokuapp.com/api/favorites') + const response = await request.get('${URL}/api/favorites') .set('Authorization', token) const topThreeFaves = response.body.slice(-3); @@ -96,7 +95,7 @@ export default class Map extends Component { const { token } = this.props; e.preventDefault(); await this.setState({ loading: true, enteredLocation: this.state.location }); - const response = await request.get(`https://desolate-bayou-65072.herokuapp.com/api/location?search=${this.state.location}`) + const response = await request.get(`${URL}/api/location?search=${this.state.location}`) .set('Authorization', token); this.setState({ @@ -105,19 +104,17 @@ export default class Map extends Component { loading: false }) - await this.fetchLime(); - await this.fetchNike(); - await this.fetchSpin(); - await this.fetchTrimet(); + await this.fetchAll(); } handleFavoriteClick = async () => { await this.setState({ loading: true }); + // would have liked to see a modal or something here, but i get it const faveName = prompt("What would you like to call this favorite location?"); if (faveName === null) return; - await request.post('https://desolate-bayou-65072.herokuapp.com/api/favorites') + await request.post('${URL}/api/favorites') .send({ name: faveName, lat: this.state.lat, @@ -133,13 +130,13 @@ export default class Map extends Component { handleDeleteClick = async (someId) => { await this.setState({ loading: true }); - await request.delete(`https://desolate-bayou-65072.herokuapp.com/api/favorites/${someId}`) + await request.delete(`${URL}/api/favorites/${someId}`) .set('Authorization', this.props.token) await this.fetchFavorites() this.setState({ loading: false }); } - + handleUseFavorite = async (someLat, someLng, someDesc) => { await this.setState({ loading: true, @@ -148,10 +145,7 @@ export default class Map extends Component { location: someDesc, enteredLocation: someDesc }); - await this.fetchLime(); - await this.fetchNike(); - await this.fetchSpin(); - await this.fetchTrimet(); + await this.fetchAll(); } handleDetailClick = () => { @@ -159,6 +153,16 @@ export default class Map extends Component { localStorage.setItem('LNG', this.state.lng); } + + fetchAll = async () => { + await Promise.all([ + this.fetchLime(), + this.fetchNike(), + this.fetchSpin(), + this.fetchTrimet() + ]); + } + render() { return (
@@ -182,7 +186,6 @@ export default class Map extends Component {
- <> {this.state.favorites.map(favorite =>

@@ -190,7 +193,6 @@ export default class Map extends Component {

)} -
@@ -236,6 +238,7 @@ export default class Map extends Component { }} defaultZoom={this.props.zoom} > + {/* nice mappin'! super readable */} {this.state.lime.map(onelime => - + )} diff --git a/src/limeStub.js b/src/limeStub.js index 0f5fc3a..d20e859 100644 --- a/src/limeStub.js +++ b/src/limeStub.js @@ -1,3 +1,4 @@ +// this stub shows good planning! export const allLime = { "bikes": [ {