AnnualReport.tsx

import React, {useState, useEffect, ReactElement} from 'react';
import {Nren, Service, ServiceMatrix} from "../Schema";
 

// const api_url = window.location.origin;
// const api_url = "http://[::1]:33333";
const api_url = "https://test-compendium01.geant.org";

function AnnualReport(): ReactElement {

    function api<T>(url: string, options: RequestInit): Promise<T> {
        return fetch(url, options)
            .then((response) => {
                console.log(response)
                if (!response.ok) {
                    return response.text().then((message) => {
                        console.error(`Failed to load datax: ${message}`, response.status);
                        throw new Error("The data could not be loaded, check the logs for details.");
                    });
                }
                return response.json() as Promise<T>;
            })
    }

    const [nrens, setNrens] = useState<Nren[]>();
    const [services, setServices] = useState<Service[][]>();

    useEffect(() => {
        // let timeoutRef = 0;
        const loadData = () => {
            api<ServiceMatrix>(api_url+'/service-matrix',{
                referrerPolicy: "unsafe-url",
                headers: {
                                "Access-Control-Allow-Origin": "*",
                                "Content-Type": "text/plain"
                                }
            })
                .then((serviceMatrix :ServiceMatrix)=>{
                    console.log('got response==>nrens');
                    console.log(serviceMatrix.nrens);
                    console.log('got response==>service');
                    console.log(serviceMatrix.services);

                    setNrens(serviceMatrix.nrens)
                    setServices(serviceMatrix.services)
                })
  
        }
        loadData()
      }, []);

  return (
    <div>
        <h1>Annual Report</h1>
        {/*{nrens?.map(nren=>(*/}
        {/*    <h4 key={nren.nren_id}>{nren.name}</h4>*/}
        {/*))}*/}
    </div>
  );
}
export default AnnualReport;