chore: various small refactorings

src/components/ContentItems/ContentItems.tsx

@@ -9,7 +9,6 @@ import { ContentItemModel } from '../../services/MenuBuilder';
 import { GroupModel, OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
 import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes';
-import { StoreConsumer } from '../StoreBuilder';
 
 const DEFAULT_ALLOWED_COMPONENTS = {
   'security-definitions': {
@@ -74,7 +73,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
 
     return (
       <>
-        <Section id={item.id} underlined={item.type === 'section'}>
+        <Section id={item.id} underlined={item.type === 'operation'}>
           {content}
         </Section>
         {item.items && (
@@ -91,7 +90,8 @@ const middlePanelWrap = component => <MiddlePanel>{component}</MiddlePanel>;
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
     const { name, description, level } = this.props.item as GroupModel;
-    const components = this.props.allowedMdComponents;
+    const { allowedMdComponents } = this.props;
+
     const Header = level === 2 ? H2 : H1;
     return (
       <>
@@ -103,16 +103,11 @@ export class SectionItem extends React.Component<ContentItemProps> {
             </Header>
           </MiddlePanel>
         </Row>
-        <StoreConsumer>
+        <AdvancedMarkdown
-          {store => (
+          allowedComponents={allowedMdComponents}
-            <AdvancedMarkdown
+          source={description || ''}
-              source={description || ''}
+          htmlWrap={middlePanelWrap}
-              allowedComponents={components}
+        />
-              store={store}
-              htmlWrap={middlePanelWrap}
-            />
-          )}
-        </StoreConsumer>
       </>
     );
   }

src/components/Markdown/AdvancedMarkdown.tsx

@@ -4,16 +4,20 @@ import { AppStore, MarkdownRenderer, MDXComponentMeta } from '../../services';
 import { BaseMarkdownProps } from './Markdown';
 import { SanitizedMarkdownHTML } from './SanitizedMdBlock';
 
+import { StoreConsumer } from '../StoreBuilder';
+
 export interface AdvancedMarkdownProps extends BaseMarkdownProps {
-  store?: AppStore;
   allowedComponents: Dict<MDXComponentMeta>;
   htmlWrap?: (part: JSX.Element) => JSX.Element;
 }
 
 export class AdvancedMarkdown extends React.Component<AdvancedMarkdownProps> {
   render() {
-    const { store, source, allowedComponents, htmlWrap = i => i } = this.props;
+    return <StoreConsumer>{store => this.renderWithStore(store)}</StoreConsumer>;
+  }
 
+  renderWithStore(store?: AppStore) {
+    const { allowedComponents, source, htmlWrap = i => i } = this.props;
     if (!store) {
       throw new Error('When using componentes in markdown, store prop must be provided');
     }

src/components/Markdown/SanitizedMdBlock.tsx

@@ -1,7 +1,7 @@
 import * as DOMPurify from 'dompurify';
 import * as React from 'react';
 
-import { OptionsContext } from '../OptionsProvider';
+import { OptionsConsumer } from '../OptionsProvider';
 import { StylingMarkdownProps } from './Markdown';
 import { StyledMarkdownBlock } from './styled.elements';
 
@@ -15,7 +15,7 @@ export function SanitizedMarkdownHTML(
   const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
 
   return (
-    <OptionsContext.Consumer>
+    <OptionsConsumer>
       {options => (
         <Wrap
           className={'redoc-markdown ' + (props.className || '')}
@@ -25,6 +25,6 @@ export function SanitizedMarkdownHTML(
           {...props}
         />
       )}
-    </OptionsContext.Consumer>
+    </OptionsConsumer>
   );
 }

src/services/MenuStore.ts

@@ -74,7 +74,7 @@ export class MenuStore {
    * @param scroll scroll service instance used by this menu
    */
   constructor(spec: SpecStore, public scroll: ScrollService) {
-    this.items = spec.operationGroups;
+    this.items = spec.contentItems;
 
     this.flatItems = flattenByProp(this.items || [], 'items');
     this.flatItems.forEach((item, idx) => (item.absoluteIdx = idx));

src/services/SpecStore.ts

@@ -13,7 +13,7 @@ export class SpecStore {
 
   info: ApiInfoModel;
   externalDocs?: OpenAPIExternalDocumentation;
-  operationGroups: ContentItemModel[];
+  contentItems: ContentItemModel[];
   securitySchemes: SecuritySchemesModel;
 
   constructor(
@@ -24,8 +24,7 @@ export class SpecStore {
     this.parser = new OpenAPIParser(spec, specUrl, options);
     this.info = new ApiInfoModel(this.parser);
     this.externalDocs = this.parser.spec.externalDocs;
-    this.operationGroups = MenuBuilder.buildStructure(this.parser, this.options);
+    this.contentItems = MenuBuilder.buildStructure(this.parser, this.options);
-
     this.securitySchemes = new SecuritySchemesModel(this.parser);
   }
 }