1
0
mirror of synced 2025-12-23 11:54:18 -05:00

refactor rest context provider to be generic (#29021)

This commit is contained in:
Rachael Sewell
2022-07-14 07:09:38 -07:00
committed by GitHub
parent d738183157
commit 26e4dbc4bf
5 changed files with 32 additions and 30 deletions

View File

@@ -1,26 +1,28 @@
import { createContext, useContext } from 'react' import { createContext, useContext } from 'react'
import type { MiniTocItem } from 'components/context/ArticleContext' import type { MiniTocItem } from 'components/context/ArticleContext'
export type RestContextT = { export type AutomatedPageContextT = {
title: string title: string
intro: string intro: string
renderedPage: string | JSX.Element[] renderedPage: string | JSX.Element[]
miniTocItems: Array<MiniTocItem> miniTocItems: Array<MiniTocItem>
} }
export const RestContext = createContext<RestContextT | null>(null) export const AutomatedPageContext = createContext<AutomatedPageContextT | null>(null)
export const useRestContext = (): RestContextT => { export const useAutomatedPageContext = (): AutomatedPageContextT => {
const context = useContext(RestContext) const context = useContext(AutomatedPageContext)
if (!context) { if (!context) {
throw new Error('"useRestContext" may only be used inside "RestContext.Provider"') throw new Error(
'"useAutomatedPageContext" may only be used inside "AutomatedPageContext.Provider"'
)
} }
return context return context
} }
export const getRestContextFromRequest = (req: any): RestContextT => { export const getAutomatedPageContextFromRequest = (req: any): AutomatedPageContextT => {
const page = req.context.page const page = req.context.page
return { return {

View File

@@ -8,7 +8,7 @@ import { MarkdownContent } from 'components/ui/MarkdownContent'
import { Lead } from 'components/ui/Lead' import { Lead } from 'components/ui/Lead'
import { RestOperation } from './RestOperation' import { RestOperation } from './RestOperation'
import styles from './RestOperation.module.scss' import styles from './RestOperation.module.scss'
import { useRestContext } from 'components/context/RestContext' import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
import { Operation } from './types' import { Operation } from './types'
const ClientSideHighlightJS = dynamic(() => import('components/article/ClientSideHighlightJS'), { const ClientSideHighlightJS = dynamic(() => import('components/article/ClientSideHighlightJS'), {
@@ -28,7 +28,7 @@ export type StructuredContentT = {
export const RestReferencePage = ({ restOperations }: StructuredContentT) => { export const RestReferencePage = ({ restOperations }: StructuredContentT) => {
const { asPath } = useRouter() const { asPath } = useRouter()
const { title, intro, renderedPage } = useRestContext() const { title, intro, renderedPage } = useAutomatedPageContext()
// We have some one-off redirects for rest api docs // We have some one-off redirects for rest api docs
// currently those are limited to the repos page, but // currently those are limited to the repos page, but
// that will grow soon as we restructure the rest api docs. // that will grow soon as we restructure the rest api docs.

View File

@@ -7,7 +7,7 @@ import { ActionList } from '@primer/react'
import { Link } from 'components/Link' import { Link } from 'components/Link'
import { ProductTreeNode } from 'components/context/MainContext' import { ProductTreeNode } from 'components/context/MainContext'
import { EventType, sendEvent } from 'components/lib/events' import { EventType, sendEvent } from 'components/lib/events'
import { useRestContext } from 'components/context/RestContext' import { useAutomatedPageContext } from 'components/context/AutomatedPageContext'
import type { MiniTocItem } from 'components/context/ArticleContext' import type { MiniTocItem } from 'components/context/ArticleContext'
import styles from './SidebarProduct.module.scss' import styles from './SidebarProduct.module.scss'
@@ -47,7 +47,7 @@ export const RestCollapsibleSection = (props: SectionProps) => {
router.asPath.includes('/rest/guides') || router.asPath.includes('/rest/guides') ||
router.asPath.includes('/rest/overview') router.asPath.includes('/rest/overview')
? [] ? []
: useRestContext().miniTocItems : useAutomatedPageContext().miniTocItems
useEffect(() => { useEffect(() => {
if (!currentAnchor) { if (!currentAnchor) {

View File

@@ -4,10 +4,10 @@ import { Operation } from 'components/rest/types'
import { RestReferencePage } from 'components/rest/RestReferencePage' import { RestReferencePage } from 'components/rest/RestReferencePage'
import { getMainContext, MainContext, MainContextT } from 'components/context/MainContext' import { getMainContext, MainContext, MainContextT } from 'components/context/MainContext'
import { import {
RestContext, AutomatedPageContext,
RestContextT, AutomatedPageContextT,
getRestContextFromRequest, getAutomatedPageContextFromRequest,
} from 'components/context/RestContext' } from 'components/context/AutomatedPageContext'
import type { MiniTocItem } from 'components/context/ArticleContext' import type { MiniTocItem } from 'components/context/ArticleContext'
type MinitocItemsT = { type MinitocItemsT = {
@@ -16,16 +16,16 @@ type MinitocItemsT = {
type Props = { type Props = {
mainContext: MainContextT mainContext: MainContextT
restContext: RestContextT automatedPageContext: AutomatedPageContextT
restOperations: Operation[] restOperations: Operation[]
} }
export default function SubCategory({ mainContext, restContext, restOperations }: Props) { export default function SubCategory({ mainContext, automatedPageContext, restOperations }: Props) {
return ( return (
<MainContext.Provider value={mainContext}> <MainContext.Provider value={mainContext}>
<RestContext.Provider value={restContext}> <AutomatedPageContext.Provider value={automatedPageContext}>
<RestReferencePage restOperations={restOperations} /> <RestReferencePage restOperations={restOperations} />
</RestContext.Provider> </AutomatedPageContext.Provider>
</MainContext.Provider> </MainContext.Provider>
) )
} }
@@ -50,7 +50,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
// Gets the miniTocItems in the article context. At this point it will only // Gets the miniTocItems in the article context. At this point it will only
// include miniTocItems generated from the Markdown pages in // include miniTocItems generated from the Markdown pages in
// content/rest/* // content/rest/*
const { miniTocItems } = getRestContextFromRequest(req) const { miniTocItems } = getAutomatedPageContextFromRequest(req)
// When operations exist, update the miniTocItems in the article context // When operations exist, update the miniTocItems in the article context
// with the list of operations in the OpenAPI. // with the list of operations in the OpenAPI.
@@ -75,7 +75,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
props: { props: {
restOperations, restOperations,
mainContext: getMainContext(req, res), mainContext: getMainContext(req, res),
restContext: getRestContextFromRequest(req), automatedPageContext: getAutomatedPageContextFromRequest(req),
}, },
} }
} }

View File

@@ -5,10 +5,10 @@ import { Operation } from 'components/rest/types'
import { RestReferencePage } from 'components/rest/RestReferencePage' import { RestReferencePage } from 'components/rest/RestReferencePage'
import { getMainContext, MainContext, MainContextT } from 'components/context/MainContext' import { getMainContext, MainContext, MainContextT } from 'components/context/MainContext'
import { import {
RestContext, AutomatedPageContext,
RestContextT, AutomatedPageContextT,
getRestContextFromRequest, getAutomatedPageContextFromRequest,
} from 'components/context/RestContext' } from 'components/context/AutomatedPageContext'
import type { MiniTocItem } from 'components/context/ArticleContext' import type { MiniTocItem } from 'components/context/ArticleContext'
import { import {
getTocLandingContextFromRequest, getTocLandingContextFromRequest,
@@ -25,13 +25,13 @@ type MinitocItemsT = {
type Props = { type Props = {
mainContext: MainContextT mainContext: MainContextT
tocLandingContext: TocLandingContextT tocLandingContext: TocLandingContextT
restContext: RestContextT automatedPageContext: AutomatedPageContextT
restOperations: Operation[] restOperations: Operation[]
} }
export default function Category({ export default function Category({
mainContext, mainContext,
restContext, automatedPageContext,
tocLandingContext, tocLandingContext,
restOperations, restOperations,
}: Props) { }: Props) {
@@ -39,7 +39,7 @@ export default function Category({
return ( return (
<MainContext.Provider value={mainContext}> <MainContext.Provider value={mainContext}>
<RestContext.Provider value={restContext}> <AutomatedPageContext.Provider value={automatedPageContext}>
{/* When the page is the rest product landing page, we don't want to {/* When the page is the rest product landing page, we don't want to
render the rest-specific sidebar because toggling open the categories render the rest-specific sidebar because toggling open the categories
won't have the minitoc items at that level. These are pages that have won't have the minitoc items at that level. These are pages that have
@@ -51,7 +51,7 @@ export default function Category({
) : ( ) : (
<RestReferencePage restOperations={restOperations} /> <RestReferencePage restOperations={restOperations} />
)} )}
</RestContext.Provider> </AutomatedPageContext.Provider>
</MainContext.Provider> </MainContext.Provider>
) )
} }
@@ -165,7 +165,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
// Gets the miniTocItems in the article context. At this point it will only // Gets the miniTocItems in the article context. At this point it will only
// include miniTocItems generated from the Markdown pages in // include miniTocItems generated from the Markdown pages in
// content/rest/* // content/rest/*
const { miniTocItems } = getRestContextFromRequest(req) const { miniTocItems } = getAutomatedPageContextFromRequest(req)
// When operations exist, update the miniTocItems in the article context // When operations exist, update the miniTocItems in the article context
// with the list of operations in the OpenAPI. // with the list of operations in the OpenAPI.
@@ -194,7 +194,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
props: { props: {
restOperations, restOperations,
mainContext: getMainContext(req, res), mainContext: getMainContext(req, res),
restContext: getRestContextFromRequest(req), automatedPageContext: getAutomatedPageContextFromRequest(req),
tocLandingContext, tocLandingContext,
}, },
} }