JSONSchema.js

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

import {useActivePlugin, useActiveVersion,} from '@theme/hooks/useDocs'

import useAsync from '@hooks/useAsync'
import getLatestVersion from "@lib/utils/getLatestVersion";
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 [selectedVersion, setSelectedVersion] = useState(version)
  console.log('selectedVersion: ', selectedVersion);
  const isInBrowser = ExecutionEnvironment.canUseDOM
  const {pluginId} = useActivePlugin({failfast: true})
  const {name: siteVersion} = useActiveVersion(pluginId)
  const schemaUrl = name === 'set' ? SCHEMA_BASE_URL_SET : SCHEMA_BASE_URL;
  const schemaName = name === 'set' ? SCHEMA_FILE_NAME_SET : SCHEMA_FILE_NAME;
  const gitlabId = name === 'set' ? GITLAB_PROJECT_ID_SET : GITLAB_PROJECT_ID;

  const {execute, status, error, value: latestVersion} = useAsync(getLatestVersion, {
    siteVersion: selectedVersion === undefined ? '*' : selectedVersion,
    projectId: GITLAB_PROJECT_ID,
    includePrerelease: includePrerelease !== undefined
  }, false)

  if (isInBrowser) {
    useEffect(() => {
      execute()
    }, [])

    useEffect(async () => {
      setJsonSchema(await loadSchema(selectedVersion, name))
    }, [selectedVersion])

    useEffect(async () => {
      if (status === 'success') {
        setSelectedVersion(latestVersion)
        setJsonSchema(await loadSchema(latestVersion, name))
      }
    }, [status])
  }

  return (
    <BrowserOnly fallback={<div>Lädt...</div>}>
      {() => (
        <div>
          <p>Die aktuell angezeigte Version des JSON Schema ist {status === 'success' &&
            <code>{selectedVersion}</code>} {status === 'success' &&
            <DownloadLabel baseURL={schemaUrl} version={selectedVersion} artifact={schemaName} label="JSON Schema"/>}.
          </p>
          <VersionSelect version={selectedVersion} setVersion={setSelectedVersion} gitlabId={gitlabId}/>
          <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>
  )
}