parent
df3334914f
commit
ef42f90553
5 changed files with 33 additions and 3 deletions
19
src/css/components/ErrorRenderer.css
Normal file
19
src/css/components/ErrorRenderer.css
Normal file
|
@ -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;
|
||||
}
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="stylesheet" href="/css/index.css"/>
|
||||
<link rel="stylesheet" href="/css/label.css"/>
|
||||
<link rel="stylesheet" href="/css/components/Response.css"/>
|
||||
<link rel="stylesheet" href="/css/components/ErrorRenderer.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
@ -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 (<ResponseRenderer response={response}/>);
|
||||
} else if (error) {
|
||||
/* FIXME: Add ErrorRenderer */
|
||||
return (<ErrorRenderer error={error}/>);
|
||||
} else {
|
||||
return (<div className="loader">{t("loading")}</div>);
|
||||
}
|
||||
|
|
10
src/js/components/ErrorRenderer.tsx
Normal file
10
src/js/components/ErrorRenderer.tsx
Normal file
|
@ -0,0 +1,10 @@
|
|||
import React from "react";
|
||||
|
||||
export function ErrorRenderer({ error }: {error: Error}) {
|
||||
return (
|
||||
<div className="error">
|
||||
<span>Error</span>:
|
||||
<span> {error.message}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -12,8 +12,7 @@ export function useWebService(): [Maybe<TResponse>, Maybe<Error>] {
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue