Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 1x 1x 1x 5x 5x 3x 3x 3x 3x 3x 1x 2x 2x 1x 1x 1x 3x 3x 3x 5x 3x 2x 1x 1x | import { useEffect, useState } from "react";
import App from "./App";
import { AppContext } from "./AppContext";
const baseUrl = import.meta.env.BASE_URL;
const configJSON = "config.json";
// if import.meta.env.BASE_URL have a trailing slash, remove it
// load config.json from relative path if import.meta.env.BASE_URL is None or empty
const configJSONUrl = baseUrl ? `${baseUrl.replace(/\/$/, "")}/${configJSON}` : configJSON;
export type BootstrapState =
| { status: "loading" }
| { status: "loaded"; config: object }
| { status: "error"; error: string };
export const Bootstrap = () => {
const [state, setState] = useState<BootstrapState>({ status: "loading" });
useEffect(() => {
let active = true;
const loadConfig = async () => {
try {
const response = await fetch(configJSONUrl);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const config = (await response.json()) as object;
if (active) {
setState({ status: "loaded", config });
}
} catch (error) {
Eif (active) {
setState({
status: "error",
error: error instanceof Error ? error.message : "Unknown error",
});
}
}
};
void loadConfig();
return () => {
active = false;
};
}, []);
if (state.status === "loading") {
return <div>Loading configuration...</div>;
}
if (state.status === "error") {
return <div>Failed to load configuration: {state.error}</div>;
}
return (
<AppContext.Provider value={state.config}>
<App />
</AppContext.Provider>
);
};
|