local proxy test

config/development.ts

@@ -8,6 +8,7 @@ const config: ClientConfig = {
     displayTypes: false,
     docsUpdate: true,
     edhrecOverlay: false,
+    proxyTest: true,
   }
 }
 

config/flags.ts

@@ -5,6 +5,7 @@ export const FLAG_NAMES = {
   showDebugInfo: 'showDebugInfo',
   displayTypes: 'displayTypes',
   docsUpdate: 'docsUpdate',
-  edhrecOverlay: 'edhrecOverlay'
+  edhrecOverlay: 'edhrecOverlay',
+  proxyTest: 'proxyTest',
 } as const
 export type Flag = ObjectValues<typeof FLAG_NAMES>

config/production.ts

@@ -7,7 +7,8 @@ const config: ClientConfig = {
     adminMode: false,
     displayTypes: false,
     docsUpdate: false,
-    edhrecOverlay: false
+    edhrecOverlay: false,
+    proxyTest: false,
   }
 }
 

src/ui/notFoundView.tsx

@@ -1,14 +1,44 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { FlagContext } from './flags'
 
 export interface NotFoundViewProps {
 
 }
 
 export function NotFoundView({}: NotFoundViewProps) {
-    return <div>
-      <h1>Whoa there, buddy!</h1>
+  const { proxyTest } = useContext(FlagContext).flags;
+
+  return <div>
+      <h2>Whoa there, buddy!</h2>
       <p>looks like you found yourself in a bit of a situation. Maybe hit the back button or <Link to='/'>go to the search page</Link>?</p>
+
+      {proxyTest && <ProxyTest />}
     </div>;
 }
 
+function ProxyTest() {
+  const [result, setResult] = useState<any>()
+  const [port, setPort] = useState<number>(6969);
+
+  const runTest = () => {
+    setResult(undefined);
+    (async () => {
+      try {
+        const nextResult = await fetch(`http://localhost:${port}/ping`);
+        const text = await nextResult.text();
+        setResult(text)
+      } catch (e) {
+        console.error(e);
+        setResult(e);
+      }
+    })()
+  }
+
+  return <div>
+    <h3>port check!</h3>
+    <input type='number' value={port} onChange={e => setPort(parseInt(e.target.value))} />
+    <button onClick={runTest}>test</button>
+    {result && <pre><code>{result.toString()}</code></pre>}
+  </div>
+}