gtfs-display/src/pages/trips-route-day.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

import config from '../config';
import TripsRouteDayTable from '../components/trips-route-day-table';
import AgencySelect from '../components/agency-select';
import RouteSelect from '../components/route-select';

export default function Trips() {
  const agencyNameDefault = 'Select GTFS agency_name';
  const routeNameDefault = 'Select GTFS route_short_name';

  /* store and initialize data in function component state */
  const [strngAgencyId, setStrngAgencyId] = useState(agencyNameDefault);
  const [strngRouteId, setStrngRouteId] = useState(routeNameDefault);
  const [rryTrips, setRryTrips] = useState([]);
  const [rryAgencies, setRryAgencies] = useState([]);
  const [rryRoutes, setRryRoutes] = useState([]);

  const getRryAgencies = async () => {
    try {
      /* TODO handle errors: https://www.valentinog.com/blog/await-react/ */
	    const address = `${config.API}agencyids`;
	    // console.log('trips-route-day res.data.length: address: ' + address);
      const res = await axios.get(address);
	    // console.log('trips-route-day res.data.length: Agencies: ' + res.data.length);
      setRryAgencies((rryAgency) => res.data);
    } catch (err) {
      console.error(`err.message: ${err.message}`);
    }
  };

  const getRryRoutes = async () => {
    if (strngAgencyId !== agencyNameDefault) {
      try {
        /* TODO handle errors: https://www.valentinog.com/blog/await-react/ */
	    const address = `${config.API}routes?agencyid=${strngAgencyId}`;
	    // console.log('trips-route-day res.data.length: address: ' + address);
        const res = await axios.get(address);
	    if (res.data !== undefined && res.data !== null) {
          // console.log('trips-route-day res.data.length: Routes: ' + res.data.length);
          setRryRoutes((rryRoutes) => res.data);
          if (res.data.length > 0) {
	            setStrngRouteId((strngRouteId) => res.data[0].route_id);
          } else {
		    console.error('ERROR: agency has NO routes');
          }
	    } else {
          console.error('ERROR: routes by agency request FAILED');
	    }
      } catch (err) {
        console.error(`err.message: ${err.message}`);
      }
    }
  };

  const getRryTrips = async () => {
    if (strngRouteId !== routeNameDefault) {
      try {
        /* TODO handle errors: https://www.valentinog.com/blog/await-react/ */
	    const date = new Date();
	    const dateShort = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
	    // console.log('trips-route-day dateShort: ' + dateShort);
	    const address = `${config.API}trips-by-route-day?routeid=${strngRouteId}&day=${dateShort}`;
	    // console.log('trips-route-day res.data.length: address: ' + address);
        const res = await axios.get(address);
	    if (res.data !== undefined && res.data !== null) {
          // console.log('trips-route-day res.data.length: Trips: ' + res.data.length);
          setRryTrips((rryTrips) => res.data);
	    } else {
          console.error('ERROR: trips by routes and day request FAILED');
	    }
      } catch (err) {
        console.error(`err.message: ${err.message}`);
      }
    }
  };

  const handleChangeAgencyId = (event) => {
    // console.log('trips-route-day: handleChangeAgencyId() value: ' + event.target.value);
    setStrngAgencyId((strngAgencyId) => event.target.value);
  };

  const handleChangeRouteId = (event) => {
    // console.log('trips-route-day: handleChangeRouteId() value: ' + event.target.value);
    setStrngRouteId((strngRouteId) => event.target.value);
  };

  /* this hook is run after a DOM update. Changing state might result in an infinite loop */
  /* hook need to be placed in body of the function component in which it is used */
  useEffect(() => {
    getRryAgencies();
    /* use an empty dependency array to ensure the hook is running only once */
    /* TODO study dependency array: https://reactjs.org/docs/hooks-effect.html */
  }, []);

  useEffect(() => {
    // console.log('trips-route-day: useEffect() strngAgencyId: ' + strngAgencyId);
    getRryRoutes();
    /* TODO study dependency array: https://reactjs.org/docs/hooks-effect.html */
  }, [strngAgencyId]);

  useEffect(() => {
    // console.log('trips-route-day: useEffect() strngRouteId: ' + strngRouteId);
    getRryTrips();
    /* TODO study dependency array: https://reactjs.org/docs/hooks-effect.html */
  }, [strngRouteId]);

  // TODO get rry based on route_id!
  return (
    <>
      <AgencySelect rry={rryAgencies} name={agencyNameDefault} onChange={handleChangeAgencyId} />
      <RouteSelect rry={rryRoutes} name={routeNameDefault} onChange={handleChangeRouteId} />
      <TripsRouteDayTable array={rryTrips} title="Trips" />
    </>
  );
}