add version query param to ApiSpec

(planning#679)

src/components/DownloadLabel.js

@@ -2,6 +2,6 @@ import React from "react";
 
 export default ({ baseURL, version, artifact, label }) => {
   return <a href={`${baseURL}/${version}/${artifact}`} download>
-    (im Format {label} herunterladen)
+    im Format {label} herunterladen
   </a>
 }

src/components/VersionSelect.js

 import React, {useEffect} from "react"
 import useAsync from '@hooks/useAsync'
 import getVersionList from "@lib/utils/getVersionList";
+import { useHistory } from '@docusaurus/router';
 
 export default ({ version, setVersion, gitlabId, includePrerelease = false }) => {
 
@@ -16,15 +17,22 @@ export default ({ version, setVersion, gitlabId, includePrerelease = false }) =>
     lineHeight: "20px",
   }
 
+  const history = useHistory()
+  const params = new URLSearchParams()
+
   useEffect(() => {
     execute()
   }, [])
 
   return <div>
-    Andere Version anzeigen: <select
+    API Version anzeigen: <select
       style={selectStyle}
       value={version}
-      onChange={e => setVersion(e.target.value)}>
+      onChange={e => {
+        setVersion(e.target.value)
+        params.append("version", e.target.value)
+        history.push({search: params.toString()})
+      }}>
       {versions && versions.map ? versions.map((v, i) => (
         <option value={v} key={i}>
           {v}

src/views/ApiSpec.js

 import React, {useEffect, useState} from 'react'
+import semver from "semver";
+
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
 import BrowserOnly from '@docusaurus/BrowserOnly'
+import { useLocation } from '@docusaurus/router';
 
 import useAsync from '@hooks/useAsync'
 import getLatestVersion from "@lib/utils/getLatestVersion";
@@ -10,7 +13,13 @@ import VersionSelect from "@components/VersionSelect";
 const SCHEMA_BASE_URL = 'https://schema.fitko.de/fit-connect'
 
 export default function ApiSpec(props) {
-  const {artifact, path, version, gitlabProjectId, includePrerelease, includePrereleaseVersion} = props
+  const {artifact, path, gitlabProjectId, includePrerelease, includePrereleaseVersion} = props
+  let { version } = props
+  const search = useLocation().search;
+  const queryVersion = new URLSearchParams(search).get('version');
+  if (queryVersion && semver.valid(queryVersion)) {
+    version = queryVersion;
+  }
   const [selectedVersion, setSelectedVersion] = useState('')
 
   const isInBrowser = ExecutionEnvironment.canUseDOM
@@ -28,7 +37,7 @@ export default function ApiSpec(props) {
 
     useEffect(async () => {
       if (status === 'success') {
-        setSelectedVersion(latestVersion)
+        setSelectedVersion(version && version !== '*' ? version : latestVersion)
       }
     }, [status])
   }
@@ -40,8 +49,7 @@ export default function ApiSpec(props) {
 
         return (
           <div>
-            <p>Die aktuell angezeigte Version der API ist {status === 'success' &&
-              <code>{latestVersion}</code>} {status === 'success' &&
+            <p> Diese API-Spezifikation {status === 'success' &&
               <DownloadLabel baseURL={`${SCHEMA_BASE_URL}/${path}`} version={selectedVersion} artifact={artifact} label="OpenAPI"/>}.
             </p>
             <VersionSelect version={selectedVersion} setVersion={setSelectedVersion} gitlabId={gitlabProjectId} includePrerelease={includePrerelease} /><br/>