refactor rest context provider to be generic (#29021)
This commit is contained in:
@@ -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 {
|
||||||
@@ -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.
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user