feat(cards): add card template

cards/src/components/card.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-
-const CardAgency = () => {
+import PropTypes from 'prop-types';
+//destructure props
+const Card = ({name}) => {
     /*store count as array in function component state*/
     /*initialise as empty array*/
     const [count, setCount] = useState(null);
@@ -11,9 +12,8 @@ const CardAgency = () => {
         try {
             /*TODO make route available using config*/
             /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
-            const count = await axios.get(
-                'https://www.v1gtfs.delfi.api.swingbe.de/table-agency-count'
-            );
+	    const address=`https://www.v1gtfs.delfi.api.swingbe.de/table-${name}-count`;
+            const count = await axios.get(address);
 
             /*set state*/
             setCount(count.data[0]['count']);
@@ -32,20 +32,11 @@ const CardAgency = () => {
     /*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(count){
-	return(
-	    <>
-		<p>Card Agency</p>
-		<p>count: {count}</p>
-	    </>
-	);
-    }else{
-	return(
-	    <>
-		<p>Card Agency</p>
-		<p>loading...</p>
-	    </>
-	);
-    }
+    return <p>{name}: {count?count:'loading...'}</p>;
 };
-export default CardAgency;
+
+Card.propTypes = {
+    name: PropTypes.string
+};
+
+export default Card;

cards/src/components/cards.jsx

@@ -1,13 +1,65 @@
-import React from 'react';
-import CardsAgency from './card-agency';
-
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Card from './card';
 const Cards = () => {
-    return (
-	<>
-	    <p>Cards</p>
-	    <CardsAgency />
-	</>
-    );
+    /*store and initialise data in function component state*/
+    const [tables, setTables] = useState([]);
+    /*fetch data in a JavaScript function*/
+    const getTables = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+            const tables = await axios.get(
+                'https://www.v1gtfs.delfi.api.swingbe.de/table-names'
+            );
+
+            /*set state*/
+            setTables(tables.data);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        getTables();
+
+    /*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(tables){
+	return(
+	    <>
+		<p>GTFS tables</p>
+		{tables.map((item,index)=>{
+		    return <Card key={index} name={item['table_name']}/>
+		})
+		}
+	    </>
+	);
+    }else{
+	return(
+	    <>
+		<p>GTFS tables loading...</p>
+	    </>
+	);
+    }
 }
 
 export default Cards
+
+
+
+
+
+
+
+
+
+
+
+
+

cards/src/pages/home.jsx

@@ -4,7 +4,7 @@ import Cards from '../components/cards';
 const Home = () => {
     return (
 	<>
-	    <h1>Home</h1>
+	    <p>Home</p>
 	    <Cards />
 	</>
     );