linter fixes

Author: miguelgrinberg

demo/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@elastic/request-converter": "file:..",
     "bootstrap": "^5.3.3",
+    "compare-versions": "^6.1.1",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^19.0.0",
@@ -21,6 +22,7 @@
     "@eslint/js": "^9.19.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.19.0",
     "eslint-plugin-react": "^7.37.4",

demo/src/App.tsx

@@ -6,46 +6,72 @@ import Stack from 'react-bootstrap/Stack';
 import Form from 'react-bootstrap/Form';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { compareVersions } from 'compare-versions';
 import { convertRequests, loadSchema, listFormats } from "@elastic/request-converter";
 
 function App() {
   const formats = listFormats().sort();
-  const [hasSchema, setHasSchema] = useState(false);
-  const [source, setSource] = useState('GET /_search');
-  const [code, setCode] = useState('Loading...');
-  const [language, setLanguage] = useState(formats[0]);
+  const [versions, setVersions] = useState<string[]>(['main']);
+  const [schemaVersion, setSchemaVersion] = useState<string>('main');
+  const [hasSchema, setHasSchema] = useState<boolean>(false);
+  const [source, setSource] = useState<string>('GET /_search');
+  const [error, setError] = useState<string | null>(null);
+  const [code, setCode] = useState<string>('Loading...');
+  const [language, setLanguage] = useState<string>(formats[0]);
 
   useEffect(() => {
-    document.getElementById("source").focus();
+    const sourceElem = document.getElementById("source");
+    if (sourceElem) {
+      sourceElem.focus();
+    }
   }, []);
 
   useEffect(() => {
-    (async () => {
-      const response = await fetch('https://raw.githubusercontent.com/elastic/elasticsearch-specification/refs/heads/main/output/schema/schema.json');
+    void (async () => {
+      const r = await fetch('https://api.github.com/repos/elastic/elasticsearch-specification/branches');
+      if (r.status === 200) {
+        const s: {name: string}[] = (await r.json()) as {name: string}[];
+        const versions = s.map(v => v.name).filter(v => v.match(/^[0-9]+\.[0-9x]+$/));
+        setVersions(['main'].concat(versions.sort(compareVersions).reverse()));
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    void (async () => {
+      const response = await fetch(`https://raw.githubusercontent.com/elastic/elasticsearch-specification/refs/heads/${schemaVersion}/output/schema/schema.json`);
       if (response.ok) {
-        loadSchema(await response.json());
+        setHasSchema(false);
+        await loadSchema((await response.json()) as object);
         setHasSchema(true);
       }
     })();
-  }, []);
+  }, [schemaVersion]);
 
   useEffect(() => {
-    (async () => {
+    void (async () => {
       if (hasSchema) {
         let c: string = "";
         try {
           c = await convertRequests(source, language, {complete: true, printResponse: true}) as string;
+          setError(null);
         }
         catch (err) {
+          if (err instanceof Error) {
+            setError(err.toString());
+          }
+          else {
+            setError('Uknown error');
+          }
         }
         if (c) {
-          setCode(c as string);
+          setCode(c);
         }
       }
     })();
   }, [hasSchema, source, language]);
 
-  const onRequestChanged = (ev: React.ChangeEventHandler<HTMLSelectElement>) => {
+  const onRequestChanged = (ev: React.ChangeEvent<HTMLSelectElement>) => {
     setSource(ev.target.value);
     ev.target.style.height = ev.target.scrollHeight + "px";
   };
@@ -55,13 +81,19 @@ function App() {
       <h1>Elasticsearch Request Converter Demo</h1>
       <Row>
         <Col className="col-6">
-          Source Request
+          <Stack direction="horizontal" className="heading">
+            <p>Source&nbsp;Request</p>
+            <p className="spacer"></p>
+            <Form.Select id="version-choice" size="sm" defaultValue="main" onChange={ev => setSchemaVersion(ev.target.value)}>
+              {versions.map(v => <option key={v} value={v}>{v}</option>)}
+            </Form.Select>
+          </Stack>
         </Col>
         <Col className="col-6">
           <Stack direction="horizontal" className="heading">
             <p>Converted&nbsp;Code</p>
             <p className="spacer"></p>
-            <Form.Select id="language-choice" size="sm" defaultValue={language} onChange={ev => setLanguage(ev.currentTarget.value)}>
+            <Form.Select id="language-choice" size="sm" defaultValue={language} onChange={ev => setLanguage(ev.target.value)}>
               {formats.map(fmt => <option key={fmt} value={fmt}>{fmt}</option>)}
             </Form.Select>
           </Stack>
@@ -70,7 +102,8 @@ function App() {
       <Form id="main-form">
         <Row id="main-row">
           <Col className="col-6">
-            <Form.Control as="textarea" id="source" value={source} onChange={onRequestChanged} />
+            <Form.Control className={error ? "is-invalid" : ""} as="textarea" id="source" value={source} onChange={(ev: any) => onRequestChanged(ev)} />
+            {error && <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>}
           </Col>
           <Col className="col-6">
             <SyntaxHighlighter wrapLongLines={true} language={language} style={atomOneLight}>{code}</SyntaxHighlighter>

demo/src/index.css

@@ -30,7 +30,7 @@ textarea.form-control {
   width: 100%;
 }
 
-#language-choice {
+#version-choice, #language-choice {
   width: 150px;
 }