patch: hide selftest if api is not available

This commit is contained in:
Peter Makra 2022-05-24 14:15:36 +02:00
parent cbbf99259d
commit c1cb9e5ec8

View File

@ -64,6 +64,7 @@ const InfoBox = (props: any) => (
export function SettingsModal({ toggleModal }: SettingsModalProps) { export function SettingsModal({ toggleModal }: SettingsModalProps) {
const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]); const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
const [diagApiIsUp, setDiagApiIsUp] = React.useState<boolean>(false);
const [showDiagScreen, setShowDiagScreen] = React.useState<boolean>(false); const [showDiagScreen, setShowDiagScreen] = React.useState<boolean>(false);
const [currentSettings, setCurrentSettings] = React.useState< const [currentSettings, setCurrentSettings] = React.useState<
_.Dictionary<boolean> _.Dictionary<boolean>
@ -85,6 +86,23 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
})(); })();
}); });
React.useEffect(() => {
(async () => {
try {
const res = await fetch(`http://localhost:3000/api/ping`);
if (res.status < 400 && res.status > 199) {
setDiagApiIsUp(true);
} else {
console.log('Diagnostics api not reachable.');
setDiagApiIsUp(false);
}
} catch (err) {
console.log('Diagnostics api not reachable.', err);
setDiagApiIsUp(false);
}
})();
}, []);
const toggleSetting = async (setting: string) => { const toggleSetting = async (setting: string) => {
const value = currentSettings[setting]; const value = currentSettings[setting];
analytics.logEvent('Toggle setting', { setting, value }); analytics.logEvent('Toggle setting', { setting, value });
@ -154,25 +172,31 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
/> />
<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt> <Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
</Flex> </Flex>
<Flex {diagApiIsUp ? (
mt={18} <Flex
alignItems="center" mt={18}
color="#00aeef" alignItems="center"
style={{ color="#00aeef"
width: 'fit-content', style={{
cursor: 'pointer', width: 'fit-content',
fontSize: 14, cursor: 'pointer',
}} fontSize: 14,
onClick={() => openDiagFrame()} }}
> onClick={() => openDiagFrame()}
<FontAwesomeIcon >
icon={faChartBar} <FontAwesomeIcon
height="1em" icon={faChartBar}
fill="currentColor" height="1em"
style={{ marginRight: 8 }} fill="currentColor"
/> style={{ marginRight: 8 }}
<Txt style={{ borderBottom: '1px solid #00aeef' }}>Run self-test</Txt> />
</Flex> <Txt style={{ borderBottom: '1px solid #00aeef' }}>
Run self-test
</Txt>
</Flex>
) : (
<></>
)}
</Flex> </Flex>
{showDiagScreen ? ( {showDiagScreen ? (