feat: add Trips page

app/components/nav-bar.js

@@ -19,6 +19,11 @@ function NavigationBar () {
                         <Nav.Link>Files</Nav.Link>
                     </LinkContainer>
                 </Nav>
+                <Nav className="mr-auto">
+                    <LinkContainer to="/trips">
+                        <Nav.Link>Trips</Nav.Link>
+                    </LinkContainer>
+                </Nav>
                 <Nav className="mr-auto">
                     <LinkContainer to="/contact">
                         <Nav.Link>Contact</Nav.Link>

app/components/trips-route-day-table-entries.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function TableEntries ({array}) {
+    if ( array !== undefined && array !== null && array.length > 0 ) {
+        //iterate over array
+        return array.map((item, index) => {
+            return (
+		<tr
+		    key={item.trip_id}
+		>
+		    <td>{item.trip_id}</td>
+		    <td>{item.trip_short_name}</td>
+		    <td>{item.trip_headsign}</td>
+		</tr>
+	    );
+        });
+    }else{
+	//data is empty
+	return null;
+    }
+};
+
+TableEntries.propTypes = {
+    array: PropTypes.array
+};

app/components/trips-route-day-table.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import TableEntries from './trips-route-day-table-entries';
+
+/*destructure props object*/
+export default function Table ({array, title}){
+    if ( array !== undefined && array !== null && array.length > 0 ) {
+	/*return a React element*/
+	return (
+            <>
+		<p>Table of {array.length}&nbsp;{title}</p>
+		<table>
+		<thead>
+		    <tr>
+			<th>trip_id</th>
+			<th>trip_short_name</th>
+			<th>trip_headsign</th>
+		    </tr>
+		</thead>
+		<tbody>
+		    <TableEntries array={array} />
+		</tbody>
+		</table>
+            </>
+	);
+    }else{
+	return (
+            <>
+		<h1>Table of {title}</h1>
+		<p>loading...</p>
+            </>
+	);
+    }
+};
+Table.propTypes = {
+    array: PropTypes.array,
+    title: PropTypes.string
+};

app/main.js

@@ -11,6 +11,7 @@ import Files from './pages/files';
 import OverviewNext from './pages/overview-next';
 //TODO Disable this route as it is not working! import Service from './pages/service';
 //TODO Disable this route as it is way too much overhead for API and database! import TripCalendar from './pages/trip-calendar';
+import Trips from './pages/trips-route-day';
 import Contact from './pages/contact';
 
 export default function Main() {
@@ -25,6 +26,7 @@ export default function Main() {
                 <Route path="/" element={<HomePage />} />
                 <Route path="/agency" element={<OverviewNext />} />
                 <Route path="/files" element={<Files />} />
+                <Route path="/trips" element={<Trips />} />
                 <Route path="/contact" element={<Contact />} />
             </Routes>
         </BrowserRouter>

app/pages/trips-route-day.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+import config from '../config';
+import Table from '../components/trips-route-day-table';
+
+export default function Trips() {
+
+    /*store and initialize data in function component state*/
+    const [rryTrips, setRryTrips] = useState([]);
+
+    const getAgencyIds = async () => {
+        try {
+            /*get rryTrips*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+            const res = await axios.get(`${config.API}trips-by-route-day?routeid=68442&day=2023-11-24`);
+
+	    console.log('Trips res.data.length:' + res.data.length);
+	    setRryTrips(res.data);
+        } catch (err) {
+            console.error('err.message: ' + err.message);
+        }
+    };
+
+    /*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(() => {
+        getAgencyIds();
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, []);
+
+    if(rryTrips.length > 0){
+	return <>
+		   <Table
+		       array={rryTrips}
+		       title={'Trips'}
+		   />
+	       </>
+    }else{
+	return <p>loading...</p>
+    }
+};