93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import type { Operation } from './types'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
import { CodeBlock } from './CodeBlock'
|
|
import { getShellExample, getGHExample, getJSExample } from '../lib/get-rest-code-samples'
|
|
|
|
type Props = {
|
|
slug: string
|
|
operation: Operation
|
|
}
|
|
|
|
export function RestCodeSamples({ operation, slug }: Props) {
|
|
const { t } = useTranslation('products')
|
|
|
|
const JAVASCRIPT_HEADING = (
|
|
<span>
|
|
JavaScript{' '}
|
|
<a className="text-underline" href="https://github.com/octokit/core.js#readme">
|
|
@octokit/core.js
|
|
</a>
|
|
</span>
|
|
)
|
|
|
|
const GH_CLI_HEADING = (
|
|
<span>
|
|
GitHub CLI{' '}
|
|
<a className="text-underline" href="https://cli.github.com/manual/gh_api">
|
|
gh api
|
|
</a>
|
|
</span>
|
|
)
|
|
|
|
// Format the example properties into different language examples
|
|
const languageExamples = operation.codeExamples.map((sample) => {
|
|
const languageExamples = {
|
|
curl: getShellExample(operation, sample),
|
|
javascript: getJSExample(operation, sample),
|
|
ghcli: getGHExample(operation, sample),
|
|
}
|
|
return Object.assign({}, sample, languageExamples)
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<h4 id={`${slug}--code-samples`}>
|
|
<a href={`#${slug}--code-samples`}>{`${t('rest.reference.code_samples')}`}</a>
|
|
</h4>
|
|
{languageExamples.map((sample, index) => (
|
|
<div key={`${JSON.stringify(sample)}-${index}`}>
|
|
{/* Example requests */}
|
|
{sample.request && (
|
|
<>
|
|
{/* Title of the code sample block */}
|
|
<h5 dangerouslySetInnerHTML={{ __html: sample.request.description }} />
|
|
{sample.curl && (
|
|
<CodeBlock headingLang="Shell" codeBlock={sample.curl} highlight="curl" />
|
|
)}
|
|
{sample.javascript && (
|
|
<CodeBlock
|
|
headingLang={JAVASCRIPT_HEADING}
|
|
codeBlock={sample.javascript}
|
|
highlight="javascript"
|
|
/>
|
|
)}
|
|
{sample.ghcli && (
|
|
<CodeBlock headingLang={GH_CLI_HEADING} codeBlock={sample.ghcli} highlight="curl" />
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Title of the response */}
|
|
{sample.response && (
|
|
<>
|
|
<h5 dangerouslySetInnerHTML={{ __html: sample.response.description }} />
|
|
{/* Status code */}
|
|
{sample.response.statusCode && (
|
|
<CodeBlock codeBlock={`Status: ${sample.response.statusCode}`} />
|
|
)}
|
|
|
|
{/* Example response */}
|
|
{sample.response.example && (
|
|
<CodeBlock
|
|
codeBlock={JSON.stringify(sample.response.example, null, 2)}
|
|
highlight="json"
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</>
|
|
)
|
|
}
|