Source: routes/ResourceTables.js

import React from 'react';
import { Table } from 'reactstrap';
import { useLoaderData, useLocation } from 'react-router-dom'
import '../styles/Resources.css'

/**
 * Renders resource tables for food, clothing and shelter.
 * @module ResourceTables
 */
export default function ResourceTables(){
    const data = useLoaderData();
    const resourceName = capitalizeFirstLetter(useLocation().pathname.split("/").pop())
    React.useEffect(()=>{
        console.log(data)
    }, [data])
    return (
        <div>
            <h3>{resourceName}</h3>
            <p>You may need to scroll/swipe right to view all information for a resource.</p>
            <div className='table'>
                <Table striped bordered responsive>
                    <thead>
                    <tr>
                        {
                            mapHeaderToColumns(data[0])
                        }
                    </tr>
                    </thead>
                    <tbody>
                        {
                            mapDataToRows(data)
                        }
                    </tbody>
                </Table>
            </div>
        </div>
    );
}

/**
 * Capitalize the first letter of a string
 * @param {string} s String to capitalize
 * @returns The string with its first letter capitlalized
 */
function capitalizeFirstLetter(s){
    return s[0].toUpperCase()+s.substring(1)
}

/**
 * Generates table headers/column names based on keys of a data object inthat table
 * @param {Object} headers Some data object in the table
 * @return Table heading tags (th)
 */
function mapHeaderToColumns(headers){
    return Object.keys(headers).map(header=>{
        return (<th>{capitalizeFirstLetter(header)}</th>)
    })
}

/**
 * Maps data from an array of objects to rows in a table. Includes special handling for website links (generates hyperlink) and physical addresses (generates Google Maps link)
 * @param {Array} data An array of data objects, each element represents a row in the table
 * @return Table rows (tr) which contain table data (td) tags
 */
function mapDataToRows(data){
    return data.map(resource=>{
        return (<tr>
            {
                Object.entries(resource).map(vals=>{
                    let key=vals[0]
                    let value=vals[1]
                    if(key.toLowerCase().includes('site')){
                        if(value!=="N/A")
                            return (<td><a target="_blank" rel="noopener noreferrer" href={value} >Link</a></td>)
                    }
                     if(key.toLowerCase().includes('address')){
                         if(value!=="N/A")
                             return (<td><a target="_blank" rel="noopener noreferrer" href={"https://www.google.com/maps/dir//" + value}> {value} </a></td>)
                    }
                    return (<td>{value}</td>)
                    }
                )
            }

        </tr>)
    })
}