Function RestCodeSamples

components/rest/RestCodeSamples.tsx:43–350

({ operation, slug }: Props)

}

export function RestCodeSamples({ operation, slug }: Props) {
  const { t } = useTranslation('products')

  // Refs to track the request example, response example
  // and the first render
  const requestCodeExample = useRef<HTMLSpanElement>(null)
  const responseCodeExample = useRef<HTMLSpanElement>(null)
  const firstRender = useRef(true)
  const scrollRef = useRef<HTMLDivElement>(null)

  // Get format examples for each language
  const languageExamples = operation.codeExamples.map((sample) => ({
    description: sample.request.description,
    curl: getShellExample(operation, sample),
    javascript: getJSExample(operation, sample),
    ghcli: getGHExample(operation, sample),
    response: sample.response,
  }))

  // Menu options for the language selector
  const languageSelectOptions: LanguageOptionT[] = [{ key: CURLKEY, text: 'cURL' }]

  // Management Console operations are not supported by Octokit
  if (operation.subcategory !== 'management-console') {
    languageSelectOptions.push({ key: JSKEY, text: 'JavaScript' })

    // Not all examples support the GH CLI language option. If any of
    // the examples don't support it, we don't show GH CLI as an option.
    if (!languageExamples.some((example) => example.ghcli === undefined)) {
      languageSelectOptions.push({ key: GHCLIKEY, text: 'GitHub CLI' })
    }
  }

  // Menu options for the example selector

  // We show the media type in the examples menu items for each example if
  // there's more than one example and if the media types aren't all the same
  // for the examples (e.g. if all examples have content type `application/json`,
  // we won't show that information in the menu items).
  const showExampleOptionMediaType =
    languageExamples.length > 1 &&
    !languageExamples.every(
      (example) => example.response.contentType === languageExamples[0].response.contentType
    )
  const exampleSelectOptions = languageExamples.map((example, index) => ({
    text: showExampleOptionMediaType
      ? `${example.description} (${example.response.contentType})`
      : example.description,
    // maps to the index of the example in the languageExamples array
    languageIndex: index,
  }))

  const [selectedLanguage, setSelectedLanguage] = useState<keyof ExampleT>(
    languageSelectOptions[0].key
  )
  const [selectedExample, setSelectedExample] = useState(exampleSelectOptions[0])
  const [selectedResponse, setSelectedResponse] = useState(responseSelectOptions[0].key)
  const [responseMaxHeight, setResponseMaxHeight] = useState(0)