From c1cb9e5ec8560795ef5b2121b694f3d03fc05aae Mon Sep 17 00:00:00 2001
From: Peter Makra <6892971+mcraa@users.noreply.github.com>
Date: Tue, 24 May 2022 14:15:36 +0200
Subject: [PATCH] patch: hide selftest if api is not available

---
 lib/gui/app/components/settings/settings.tsx | 62 ++++++++++++++------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/lib/gui/app/components/settings/settings.tsx b/lib/gui/app/components/settings/settings.tsx
index 72fe7c60..1b1a3aab 100644
--- a/lib/gui/app/components/settings/settings.tsx
+++ b/lib/gui/app/components/settings/settings.tsx
@@ -64,6 +64,7 @@ const InfoBox = (props: any) => (
 
 export function SettingsModal({ toggleModal }: SettingsModalProps) {
 	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
+	const [diagApiIsUp, setDiagApiIsUp] = React.useState<boolean>(false);
 	const [showDiagScreen, setShowDiagScreen] = React.useState<boolean>(false);
 	const [currentSettings, setCurrentSettings] = React.useState<
 		_.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 value = currentSettings[setting];
 		analytics.logEvent('Toggle setting', { setting, value });
@@ -154,25 +172,31 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 					/>
 					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
 				</Flex>
-				<Flex
-					mt={18}
-					alignItems="center"
-					color="#00aeef"
-					style={{
-						width: 'fit-content',
-						cursor: 'pointer',
-						fontSize: 14,
-					}}
-					onClick={() => openDiagFrame()}
-				>
-					<FontAwesomeIcon
-						icon={faChartBar}
-						height="1em"
-						fill="currentColor"
-						style={{ marginRight: 8 }}
-					/>
-					<Txt style={{ borderBottom: '1px solid #00aeef' }}>Run self-test</Txt>
-				</Flex>
+				{diagApiIsUp ? (
+					<Flex
+						mt={18}
+						alignItems="center"
+						color="#00aeef"
+						style={{
+							width: 'fit-content',
+							cursor: 'pointer',
+							fontSize: 14,
+						}}
+						onClick={() => openDiagFrame()}
+					>
+						<FontAwesomeIcon
+							icon={faChartBar}
+							height="1em"
+							fill="currentColor"
+							style={{ marginRight: 8 }}
+						/>
+						<Txt style={{ borderBottom: '1px solid #00aeef' }}>
+							Run self-test
+						</Txt>
+					</Flex>
+				) : (
+					<></>
+				)}
 			</Flex>
 
 			{showDiagScreen ? (