JSONSchema.js

import React, {useEffect, useState} from 'react'
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
import BrowserOnly from '@docusaurus/BrowserOnly'
import axios from 'axios'
import { useLocation } from '@docusaurus/router'
import { JsonSchemaViewer } from '@stoplight/json-schema-viewer'

import useVersion from '@lib/utils/useVersion'
import DownloadLabel from '@components/DownloadLabel'
import VersionSelect from '@components/VersionSelect'

const SCHEMA_BASE_URL = 'https://schema.fitko.de/fit-connect/metadata'
const SCHEMA_FILE_NAME = 'metadata.schema.json'
const GITLAB_PROJECT_ID = 40

const SCHEMA_BASE_URL_SET = 'https://schema.fitko.de/fit-connect/set-payload'
const SCHEMA_FILE_NAME_SET = 'set-payload.schema.json'
const GITLAB_PROJECT_ID_SET = 81

const loadSchema = async (version, name) => {
  if (name === 'set') {
    return await axios.get(`${SCHEMA_BASE_URL_SET}/${version}/${SCHEMA_FILE_NAME_SET}`).catch((error) => {
      throw `Fetching of Security Event Token schema with version ${version} failed with status code ${error.response.status}`
    }).then(({data}) => data)
  } else {
    return await axios.get(`${SCHEMA_BASE_URL}/${version}/${SCHEMA_FILE_NAME}`).catch((error) => {
      throw `Fetching of Metadata schema with version ${version} failed with status code ${error.response.status}`
    }).then(({data}) => data)
  }
}

export default function JSONSchema(props) {
  const { name, version, includePrerelease } = props;
  const [jsonSchema, setJsonSchema] = useState(null)
  const isInBrowser = ExecutionEnvironment.canUseDOM
  const search = useLocation().search;
  const queryVersion = new URLSearchParams(search).get('version');
  const schemaUrl = name === 'set' ? SCHEMA_BASE_URL_SET : SCHEMA_BASE_URL;
  const schemaName = name === 'set' ? SCHEMA_FILE_NAME_SET : SCHEMA_FILE_NAME;
  const gitlabProjectId = name === 'set' ? GITLAB_PROJECT_ID_SET : GITLAB_PROJECT_ID;

  const [versionList, selectedVersion, setSelectedVersion] =
    useVersion(version, queryVersion, gitlabProjectId, includePrerelease, null)

  if (isInBrowser) {
    useEffect(async () => {
      if (!selectedVersion.includes('*')) {
        setJsonSchema(await loadSchema(selectedVersion, name))
      }
    }, [selectedVersion])
  }

  return (
    <BrowserOnly fallback={<div>Lädt...</div>}>
      {() => (
        <div>
          <p>Die aktuell angezeigte Version {status === 'success' &&
            <code>{selectedVersion}</code>} {selectedVersion &&
            <DownloadLabel baseURL={schemaUrl} version={selectedVersion} artifact={schemaName} label="JSON Schema"/>}.
          </p>
          {versionList && <VersionSelect
            versions={versionList}
            version={selectedVersion}
            setVersion={setSelectedVersion}
            gitlabId={gitlabProjectId}/>
          }
          <br />

          <div className="json-schema-viewer admonition admonition-note alert alert--secondary pl-5">
            {jsonSchema ? <JsonSchemaViewer
              name="FIT-Connect JSON Schema"
              schema={jsonSchema}
              expanded={true}
              hideTopBar={false}
              emptyText="No schema defined"
              defaultExpandedDepth={1} /> : <p>wird geladen...</p>}
          </div>

          {status === 'error' && <p>Das JSON Schema konnte leider nicht geladen werden.</p>}
        </div>
      )
      }
    </BrowserOnly>
  )
}