React Configuration Loader

ConfigurationLoader.tsx

import React, { useState, useEffect, createContext } from "react";

import Loader from './Loader';

interface Props {
    children: JSX.Element;
    file?: string;
}

interface IConfiguration{
    version?: string,
    clientDomain?: string,
    serviceDomain?: string,
    serviceEndpoint?: string,
    clientId?: string,
    tenantId?: string,
    cacheLocation?: string,
}

export const ConfigurationContext = createContext<IConfiguration>({});

const ConfigurationLoader = (props: Props) => {
    const [configuration, setConfiguration] = useState<IConfiguration>({});
    const [error, setError] = useState(null);
    const [busy, setBusy] = useState(false);

    const path = props.file ?? '/config.json';

    useEffect(() => {
        setBusy(true);

        fetch(path)
            .then(response => response.json())
            .then(data => setConfiguration(data))
            .catch(error => setError(error))
            .finally(() => setBusy(false));

    }, [path])

    return (
        <ConfigurationContext.Provider value={configuration}>
            {error && <div>Something went wrong ...</div>}
            {busy ? <Loader /> : props.children}
        </ConfigurationContext.Provider>
    )
}

export default ConfigurationLoader