chore: refactor, rename StoreProvider to StoreBuilder

src/components/Redoc/Redoc.tsx

@@ -13,6 +13,7 @@ import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSideba
 import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements';
 
 import { SearchBox } from '../SearchBox/SearchBox';
+import { StoreProvider } from '../StoreBuilder';
 
 export interface RedocProps {
   store: AppStore;
@@ -38,29 +39,31 @@ export class Redoc extends React.Component<RedocProps> {
     const store = this.props.store;
     return (
       <ThemeProvider theme={options.theme}>
-        <OptionsProvider value={options}>
+        <StoreProvider value={this.props.store}>
-          <RedocWrap className="redoc-wrap">
+          <OptionsProvider value={options}>
-            <StickyResponsiveSidebar menu={menu} className="menu-content">
+            <RedocWrap className="redoc-wrap">
-              <ApiLogo info={spec.info} />
+              <StickyResponsiveSidebar menu={menu} className="menu-content">
-              {(!options.disableSearch && (
+                <ApiLogo info={spec.info} />
-                <SearchBox
+                {(!options.disableSearch && (
-                  search={search!}
+                  <SearchBox
-                  marker={marker}
+                    search={search!}
-                  getItemById={menu.getItemById}
+                    marker={marker}
-                  onActivate={menu.activateAndScroll}
+                    getItemById={menu.getItemById}
-                />
+                    onActivate={menu.activateAndScroll}
-              )) ||
+                  />
-                null}
+                )) ||
-              <SideMenu menu={menu} />
+                  null}
-            </StickyResponsiveSidebar>
+                <SideMenu menu={menu} />
-            <ApiContentWrap className="api-content">
+              </StickyResponsiveSidebar>
-              <ApiInfo store={store} />
+              <ApiContentWrap className="api-content">
-              <ApiDescription store={store} />
+                <ApiInfo store={store} />
-              <ContentItems items={menu.items as any} />
+                <ApiDescription description={store.spec.info.description} />
-            </ApiContentWrap>
+                <ContentItems items={menu.items as any} />
-            <BackgroundStub />
+              </ApiContentWrap>
-          </RedocWrap>
+              <BackgroundStub />
-        </OptionsProvider>
+            </RedocWrap>
+          </OptionsProvider>
+        </StoreProvider>
       </ThemeProvider>
     );
   }

src/components/RedocStandalone.tsx

@@ -5,7 +5,7 @@ import { RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormal
 import { ErrorBoundary } from './ErrorBoundary';
 import { Loading } from './Loading/Loading';
 import { Redoc } from './Redoc/Redoc';
-import { StoreProvider } from './StoreProvider';
+import { StoreBuilder } from './StoreBuilder';
 
 export interface RedocStandaloneProps {
   spec?: object;
@@ -44,7 +44,7 @@ export class RedocStandalone extends React.PureComponent<RedocStandaloneProps> {
 
     return (
       <ErrorBoundary>
-        <StoreProvider spec={spec} specUrl={specUrl} options={options} onLoaded={onLoaded}>
+        <StoreBuilder spec={spec} specUrl={specUrl} options={options} onLoaded={onLoaded}>
           {({ loading, store }) =>
             !loading ? (
               <Redoc store={store!} />
@@ -52,7 +52,7 @@ export class RedocStandalone extends React.PureComponent<RedocStandaloneProps> {
               <Loading color={normalizedOpts.theme.colors.primary.main} />
             )
           }
-        </StoreProvider>
+        </StoreBuilder>
       </ErrorBoundary>
     );
   }

src/components/StoreBuilder.ts

@@ -1,11 +1,11 @@
 import memoize from 'memoize-one';
-import { Component } from 'react';
+import { Component, createContext } from 'react';
 
 import { AppStore } from '../services/';
 import { RedocRawOptions } from '../services/RedocNormalizedOptions';
 import { loadAndBundleSpec } from '../utils';
 
-export interface StoreProviderProps {
+export interface StoreBuilderProps {
   specUrl?: string;
   spec?: object;
   store?: AppStore;
@@ -17,7 +17,7 @@ export interface StoreProviderProps {
   children: (props: { loading: boolean; store?: AppStore }) => any;
 }
 
-export interface StoreProviderState {
+export interface StoreBuilderState {
   error?: Error;
   loading: boolean;
   resolvedSpec?: any;
@@ -25,8 +25,11 @@ export interface StoreProviderState {
   prevSpecUrl?: string;
 }
 
-export class StoreProvider extends Component<StoreProviderProps, StoreProviderState> {
+const { Provider, Consumer } = createContext<AppStore | undefined>(undefined);
-  static getDerivedStateFromProps(nextProps: StoreProviderProps, prevState: StoreProviderState) {
+export { Provider as StoreProvider, Consumer as StoreConsumer };
+
+export class StoreBuilder extends Component<StoreBuilderProps, StoreBuilderState> {
+  static getDerivedStateFromProps(nextProps: StoreBuilderProps, prevState: StoreBuilderState) {
     if (nextProps.specUrl !== prevState.prevSpecUrl || nextProps.spec !== prevState.prevSpec) {
       return {
         loading: true,
@@ -39,7 +42,7 @@ export class StoreProvider extends Component<StoreProviderProps, StoreProviderSt
     return null;
   }
 
-  state: StoreProviderState = {
+  state: StoreBuilderState = {
     loading: true,
     resolvedSpec: null,
   };

src/components/index.ts

@@ -25,7 +25,7 @@ export * from './PayloadSamples/PayloadSamples';
 export * from './MediaTypeSwitch/MediaTypesSwitch';
 
 export * from './ErrorBoundary';
-export * from './StoreProvider';
+export * from './StoreBuilder';
 export * from './OptionsProvider';
 export * from './SideMenu/';
 export * from './StickySidebar/StickyResponsiveSidebar';