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";

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

const loadSchema = async (version) => {
  return await axios.get(`${SCHEMA_BASE_URL}/${version}/${SCHEMA_FILE_NAME}`).catch((error) => {
    throw `Fetching of schema with version ${version} failed with status code ${error.response.status}`
  }).then(({data}) => data)
}

export default function JSONSchema(props) {
  const isInBrowser = ExecutionEnvironment.canUseDOM
  const {pluginId} = useActivePlugin({failfast: true})
  const {name: siteVersion} = useActiveVersion(pluginId)

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

  const [metadataSchema, setMetadataSchema] = useState(null)

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

    useEffect(async () => {
      if (status === 'success') {
        console.log('vvvvvv', latestVersion, siteVersion, props.version)
        setMetadataSchema(await loadSchema(latestVersion))
      }
    }, [status])
  }

  return (
    <BrowserOnly fallback={<div>Lädt...</div>}>
      {() => (
        <div>
          <p>Die aktuell angezeigte Version des Metadatenschema ist {status === 'success' &&
            <code>{latestVersion}</code>} {status === 'success' &&
            <DownloadLabel baseURL={SCHEMA_BASE_URL} version={latestVersion} artifact={SCHEMA_FILE_NAME} label="JSON Schema"/>}.
          </p><br />

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

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