diff --git a/src/css/components/ErrorRenderer.css b/src/css/components/ErrorRenderer.css new file mode 100644 index 0000000..eadeccb --- /dev/null +++ b/src/css/components/ErrorRenderer.css @@ -0,0 +1,19 @@ +.error { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + place-content: center; + height: 100%; +} + +.error span:first-child { + color: var(--primary-red); + font-weight: bold; +} + +.error span { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/src/html/browseraction.html b/src/html/browseraction.html index 70c2e28..25e19f8 100644 --- a/src/html/browseraction.html +++ b/src/html/browseraction.html @@ -4,6 +4,7 @@ +
diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx index fff8d13..671b376 100644 --- a/src/js/components/App.tsx +++ b/src/js/components/App.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { ErrorRenderer } from "/components/ErrorRenderer"; import { ResponseRenderer } from "/components/ResponseRenderer"; import { useWebService } from "/hooks/useWebService"; @@ -8,7 +9,7 @@ export function App() { if (response) { return (); } else if (error) { - /* FIXME: Add ErrorRenderer */ + return (); } else { return (
{t("loading")}
); } diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx new file mode 100644 index 0000000..d2746d2 --- /dev/null +++ b/src/js/components/ErrorRenderer.tsx @@ -0,0 +1,10 @@ +import React from "react"; + +export function ErrorRenderer({ error }: {error: Error}) { + return ( +
+ Error: +  {error.message} +
+ ); +} diff --git a/src/js/hooks/useWebService.ts b/src/js/hooks/useWebService.ts index 7690613..4166470 100644 --- a/src/js/hooks/useWebService.ts +++ b/src/js/hooks/useWebService.ts @@ -12,8 +12,7 @@ export function useWebService(): [Maybe, Maybe] { if (res.status === 200) { return res.json(); } else { - const message = "There was an unexpected response from the web service. " + - `The status code was ${res.status}`; + const message = `Unexpected server response (${res.status})`; throw new Error(message); } }