initial feedback DO NOT MERGE (has not been thoroughly validated)

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 */}
                 <h2 className="about-h2">About Us</h2>
                 <div className="about">
                     <div className="about-div">

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() {

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,14 +19,15 @@ 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),
             loading: false,
         })
     }
 
+    // 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 (
             <div className='detailsPage'>
                 <div className='subHeader'>
@@ -62,7 +66,7 @@ export default class Detail extends Component {
                                 </div>
                             </section>
                             {/* Need digit code to be 3 digit but pull from data */}
-                            <img className='busmap' src={`https://trimet.org/schedules/img/${this.makeThreeDigitNumber(this.state.trimetLocation.resultSet.arrival[0].route)}.png`} alt='busmap'></img>
+                            <img className='busmap' src={`https://trimet.org/schedules/img/${threeDigitNumber}.png`} alt='busmap'></img>
                         </>
                 }
             </div>

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

src/Map/Map.js

@@ -3,13 +3,15 @@ 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';
 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,19 +32,16 @@ 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 () => {
         const { token } = this.props;
         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,17 +145,24 @@ 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 = () => {
         localStorage.setItem('LAT', this.state.lat);
         localStorage.setItem('LNG', this.state.lng);
     }
 
+
+    fetchAll = async () => {
+        await Promise.all([
+            this.fetchLime(),
+            this.fetchNike(),
+            this.fetchSpin(),
+            this.fetchTrimet()
+        ]);
+    }
+
     render() {
         return (
             <div>
@@ -182,15 +186,13 @@ export default class Map extends Component {
                     <section className="fave-locations">
 
                         <div className="faves-list">
-                            <>
                                 {this.state.favorites.map(favorite =>
                                     <div className='location-list' key={`${favorite.lat}${favorite.lng}${Math.random()}`}>
                                         <p class="pointer" onClick={() =>
                                             this.handleUseFavorite(favorite.lat, favorite.lng, favorite.address)}>{favorite.name}</p>
                                         <button onClick={() => this.handleDeleteClick(favorite.id)}>Delete</button>
                                     </div>
                                 )}
-                            </>
                         </div>
                     </section>
                 </div>
@@ -236,6 +238,7 @@ export default class Map extends Component {
                         }}
                         defaultZoom={this.props.zoom}
                     >
+                        {/* nice mappin'! super readable */}
                         {this.state.lime.map(onelime =>
                             <BasicMarkerLime
                                 key={`${onelime.bike_id}-${Math.random()}`}
@@ -267,8 +270,7 @@ export default class Map extends Component {
                                 lng={oneStop.attributes.lng}
                                 text={oneStop.attributes.locid}
                             >
-                                <BasicMarkerTriMet
-                                />
+                                <BasicMarkerTriMet />
                             </Link>
                         )}
                     </GoogleMapReact>

src/limeStub.js

@@ -1,3 +1,4 @@
+// this stub shows good planning!
 export const allLime = {
     "bikes": [
         {