Glow Frontend: Service & Api Utility, Design, Protective Routes, Logic

[smackeem]

My favorite part of every project is always the small helper functions that I keep having to create to convert the data from the API to something users can read. So my AJAX calls and helper functions like my processFlights service are what I am most proud of from the frontend. As well as the design. I wanted to get more practice with styling libraries and I did very much that. I have grown more in that area and I am proud of that. The project is very simple, in my opinion, but the logic behind every click and page render is so complex. And that too makes me smile.

I had to create this utility service to filter through the API response to get the data I needed

const processFlights = (apiResponse) => {
    const processedFlights = [];

    for (const flight of apiResponse.data) {
      const itineraries = flight.itineraries;
      const price = `${flight.price.total} ${flight.price.currency}`;
      const validatingAirlineCodes = flight.validatingAirlineCodes; 
      const numberOfBookableSeats = flight.numberOfBookableSeats

      const flightDetails = {
        price,
        numberOfBookableSeats,
        itineraries,
        validatingAirlineCodes,
        segments: [],
      };

      for (const itinerary of itineraries) {

        const segments = itinerary.segments;

        for (const segment of segments) {
          const departure = segment.departure;
          const arrival = segment.arrival;
          const duration = segment.duration;
          const isNonStop = segment.numberOfStops === 0;

          const segmentDetails = {
            departureDateTime: departure.at,
            duration,
            isNonStop,
            originLocation: apiResponse.dictionaries.locations[departure.iataCode],
            destinationLocation: apiResponse.dictionaries.locations[arrival.iataCode],
          };

          flightDetails.segments.push(segmentDetails);
        }
      }
      processedFlights.push(flightDetails);
    }
    return processedFlights;
};

[TimHuitt]

Utilities

• I enjoy this process too. It's a lot of fun figuring out how to navigate and manipulate the data in a way that outputs exactly what you want.
• Nice work on these. The structure and organization appear to be well planned and thought out
• The function naming is descriptive and provides information on what each is expected to do

UI/UX

• Very nice job on this. Looks and flows better than most professional airline websites!
• I really like the loading indicator and how the flights appear below the search form, rather than redirecting to a new page.

Protective Routes

• Great job here too! I missed the auth0 lecture, with intent of implementing OAuth, but that turned into a huge mess
• Your solutions for this look to be clear and efficient, and I might be using your app as reference when I implement it myself!

Code Review

• Really well structured and organize
• Appears to be light and concise, with good use of hooks and functions
• You COULD use maps instead of for loops, but I don't think this would provide any sort of time/space complexity improvements, maps just seem to be the react go-to.