refactoring

app/components/agency-id-name-table-head.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-const AgencyTableHead = ({
-    tripCalendar
-}) => {
+
+export default function AgencyTableHead({tripCalendar}) {
     const handleTs=(ts)=>{
 	//console.log(`AgencyTableHead ts: ${ts}`);
 	const date=new Date(parseInt(ts,10));
@@ -35,7 +34,7 @@ const AgencyTableHead = ({
 	);
     }
 };
+
 AgencyTableHead.propTypes = {
     tripCalendar: PropTypes.object
 };
-export default AgencyTableHead;

app/components/table-page-trip-calendar-head.js

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import TableSwitchHead from './table-switch-trip-calendar-head';
 import PropTypes from 'prop-types';
-const TablePageHead = ({ agencyIdName }) => {
+
+import TableSwitchHead from './table-switch-trip-calendar-head';
+
+export default function TablePageHead({ agencyIdName }) {
+
     if(agencyIdName !== undefined){
 	//console.log('TablePageHead agencyIdName:'+JSON.stringify(agencyIdName));
 	//console.log('TablePageHead agencyIdName.length:'+agencyIdName.length);
@@ -10,10 +13,13 @@ const TablePageHead = ({ agencyIdName }) => {
 	//console.log('TablePageHead agencyId:'+agencyId);
 	const agencyName=agencyIdName.agency_name;
 	//console.log('TablePageHead agencyName:'+agencyName);
-    /*store and initialise data in function component state*/
-    const [tripCalendar, setTripCalendar] = useState({});
-    const getTripCalendar = async () => {
-        try {
+
+	/*store and initialise data in function component state*/
+	const [tripCalendar, setTripCalendar] = useState({});
+
+	const getTripCalendar = async () => {
+
+            try {
             /*get trip calendar*/
 	    const address=`https://v1gtfs.vbn.api.swingbe.de/trip-calendar-by-agency-id?agencyid=${agencyId}`;
 	    //console.log('TablePageHead address:'+address);
@@ -23,17 +29,26 @@ const TablePageHead = ({ agencyIdName }) => {
             let aryTripCalendar = res.data;
 	    //console.log('TablePageHead aryTripCalendar.length:'+aryTripCalendar.length);
 	    setTripCalendar(aryTripCalendar);
-        } 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(() => {
-        getTripCalendar();
-    /*use an empty dependency array to ensure the hook is running only once*/
-    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
-    }, []);
+
+            } 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(() => {
+
+            getTripCalendar();
+
+	    /*use an empty dependency array to ensure the hook is running only once*/
+
+	    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+
+	}, []);
+
         return (
             <>
                 <TableSwitchHead
@@ -43,11 +58,12 @@ const TablePageHead = ({ agencyIdName }) => {
 		/>
             </>
         );
+
     }else{
-	return <p>Table Page Head loading...</p>
+	return <p>loading...</p>
     }
 };
+
 TablePageHead.propTypes = {
     agencyIdName: PropTypes.object
 };
-export default TablePageHead;

app/components/table-switch-trip-calendar-head.js

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+
 import TableHead from './agency-id-name-table-head';
+
 /*the simplest way to define a component is to write a JavaScript function*/
 /*destructure props object*/
-function TableSwitchHead ({
-    tripCalendar
-}) {
+export default function TableSwitchHead({tripCalendar}) {
     if(tripCalendar!==undefined){
-	//console.log('TableSwitchHead tripCalendar.length: '+Object.keys(tripCalendar).length);
 	/*return a React element*/
 	return (
         <>
@@ -19,11 +18,10 @@ function TableSwitchHead ({
         </>
 	);
     }else{
-	//console.log('TableSwitchHead waiting for prop');
-	return <p>Table Switch Head loading...</p>
+	return <p>loading...</p>
     }
 }
+
 TableSwitchHead.propTypes = {
     tripCalendar: PropTypes.object
 };
-export default TableSwitchHead;

app/pages/trip-calendar.js

@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import config from '../config';
-import TablePageHead from '../components/table-page-trip-calendar-head.js';
-import TablePageBody from '../components/table-page-trip-calendar-body.js';
 import Table from 'react-bootstrap/Table';
-const TripCalendar = () => {
+
+import config from '../config';
+import TablePageHead from '../components/table-page-trip-calendar-head';
+import TablePageBody from '../components/table-page-trip-calendar-body';
+
+export default function TripCalendar() {
+
     /*store and initialize data in function component state*/
     const [agencyIds, setAgencyIds] = useState([]);
+
     const getAgencyIds = async () => {
         try {
             /*get agencyIds*/
@@ -20,6 +24,7 @@ const TripCalendar = () => {
             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(() => {
@@ -27,6 +32,7 @@ const TripCalendar = () => {
     /*use an empty dependency array to ensure the hook is running only once*/
     /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
     }, []);
+
     const agencysTableBody = agencyIds.map(value =>
 			   <TablePageBody
 			       className={value.agency_name}
@@ -54,7 +60,6 @@ const TripCalendar = () => {
 		   </Table>
 	       </>
     }else{
-	return <p>Trip Calendar loading...</p>
+	return <p>loading...</p>
     }
 };
-export default TripCalendar;