Files
HangmanLab.Frontend/src/ConfigProvider.js
2025-04-14 17:02:22 +01:00

62 lines
1.6 KiB
JavaScript

import React, { createContext, useContext, useEffect, useState } from "react";
export const ConfigContext = createContext({
config: {
BACKEND_HOST: null,
FRONTEND_HOST: null,
KC_CLIENT_ID: null,
OIDC_CONFIG: {},
},
isLoading: true,
error: null,
});
export const useConfig = () => useContext(ConfigContext).config;
const ConfigProvider = ({ children }) => {
const [config, setConfig] = useState({
BACKEND_HOST: null,
FRONTEND_HOST: null,
KC_CLIENT_ID: null,
OIDC_CONFIG: {},
});
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/config.json')
.then((res) => {
if (!res.ok) {
throw new Error(`Failed to fetch config: ${res.statusText}`);
}
return res.json();
})
.then((data) => {
setConfig(data);
setIsLoading(false);
})
.catch((err) => {
console.error("Error fetching config:", err);
setError(err);
setIsLoading(false);
});
}, []);
if (isLoading) {
return <div>Loading configuration...</div>;
}
if (error) {
return <div>Error loading configuration: {error.message}</div>;
}
return (
<ConfigContext.Provider value={{ config, isLoading, error }}>
{children}
</ConfigContext.Provider>
);
}
export default ConfigProvider;