chore: move example and declaration lodes into redux

packages/api-explorer/src/ApiExplorer.tsx

@@ -44,14 +44,8 @@ import { funFetch, fallbackFetch, OAuthScene } from '@looker/run-it'
 import { FirstPage } from '@styled-icons/material/FirstPage'
 import { LastPage } from '@styled-icons/material/LastPage'
 
-import { LodeContext, defaultLodeContextValue } from './context'
 import type { IApixEnvAdaptor } from './utils'
-import {
-  getLoded,
-  oAuthPath,
-  registerEnvAdaptor,
-  unregisterEnvAdaptor,
-} from './utils'
+import { oAuthPath, registerEnvAdaptor, unregisterEnvAdaptor } from './utils'
 import {
   Header,
   SideNav,
@@ -63,13 +57,17 @@ import {
 import { specReducer, initDefaultSpecState, updateSpecApi } from './reducers'
 import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
-import { useActions, useSettingsStoreState } from './state'
-
+import {
+  useSettingActions,
+  useSettingStoreState,
+  useLodeActions,
+  useLodesStoreState,
+} from './state'
 export interface ApiExplorerProps {
   specs: SpecList
   envAdaptor: IApixEnvAdaptor
   setVersionsUrl: RunItSetter
-  exampleLodeUrl?: string
+  examplesLodeUrl?: string
   declarationsLodeUrl?: string
   headless?: boolean
 }
@@ -80,12 +78,14 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   specs,
   envAdaptor,
   setVersionsUrl,
-  exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
+  examplesLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
-  const { initialized } = useSettingsStoreState()
-  const { initAction } = useActions()
+  const { initialized } = useSettingStoreState()
+  useLodesStoreState()
+  const { initLodesAction } = useLodeActions()
+  const { initSettingsAction } = useSettingActions()
   const location = useLocation()
   const oauthReturn = location.pathname === `/${oAuthPath}`
   const [specState, specDispatch] = useReducer(
@@ -94,8 +94,6 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   )
   const { spec } = specState
 
-  const [lode, setLode] = useState(defaultLodeContextValue)
-
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
@@ -108,7 +106,8 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
 
   useEffect(() => {
     registerEnvAdaptor(envAdaptor)
-    initAction()
+    initSettingsAction()
+    initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
 
     return () => unregisterEnvAdaptor()
   }, [])
@@ -144,10 +143,6 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [spec, location])
 
-  useEffect(() => {
-    getLoded(exampleLodeUrl, declarationsLodeUrl).then((resp) => setLode(resp))
-  }, [exampleLodeUrl, declarationsLodeUrl])
-
   const themeOverrides = envAdaptor.themeOverrides()
 
   return (
@@ -160,87 +155,85 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
           <Loader message="Initializing" themeOverrides={themeOverrides} />
         ) : (
           <ErrorBoundary logError={envAdaptor.logError.bind(envAdaptor)}>
-            <LodeContext.Provider value={{ ...lode }}>
-              <Page style={{ overflow: 'hidden' }}>
-                {!headless && (
-                  <Header
-                    specs={specs}
-                    spec={spec}
-                    specDispatch={specDispatch}
-                    toggleNavigation={toggleNavigation}
-                  />
-                )}
-                <Layout hasAside height="100%">
-                  <AsideBorder
-                    borderRight
-                    isOpen={hasNavigation}
-                    headless={headless}
-                  >
-                    {headless && (
-                      <>
-                        <Space
-                          alignItems="center"
-                          py="u3"
-                          px={hasNavigation ? 'u5' : '0'}
-                          justifyContent={
-                            hasNavigation ? 'space-between' : 'center'
-                          }
-                        >
-                          {hasNavigation && (
-                            <Heading
-                              as="h2"
-                              fontSize="xsmall"
-                              fontWeight="bold"
-                              color="text2"
-                            >
-                              API DOCUMENTATION
-                            </Heading>
-                          )}
-                          <IconButton
-                            size="xsmall"
-                            shape="round"
-                            icon={hasNavigation ? <FirstPage /> : <LastPage />}
-                            label={HEADER_TOGGLE_LABEL}
-                            onClick={() => toggleNavigation()}
-                          />
-                        </Space>
+            <Page style={{ overflow: 'hidden' }}>
+              {!headless && (
+                <Header
+                  specs={specs}
+                  spec={spec}
+                  specDispatch={specDispatch}
+                  toggleNavigation={toggleNavigation}
+                />
+              )}
+              <Layout hasAside height="100%">
+                <AsideBorder
+                  borderRight
+                  isOpen={hasNavigation}
+                  headless={headless}
+                >
+                  {headless && (
+                    <>
+                      <Space
+                        alignItems="center"
+                        py="u3"
+                        px={hasNavigation ? 'u5' : '0'}
+                        justifyContent={
+                          hasNavigation ? 'space-between' : 'center'
+                        }
+                      >
                         {hasNavigation && (
-                          <>
-                            <Divider mb="u3" appearance="light" />
-                            <SelectorContainer
-                              ml="large"
-                              mr="large"
-                              specs={specs}
-                              spec={spec}
-                              specDispatch={specDispatch}
-                            />
-                          </>
+                          <Heading
+                            as="h2"
+                            fontSize="xsmall"
+                            fontWeight="bold"
+                            color="text2"
+                          >
+                            API DOCUMENTATION
+                          </Heading>
                         )}
-                      </>
-                    )}
-                    {hasNavigation && (
-                      <SideNav
-                        headless={headless}
-                        specs={specs}
-                        spec={spec}
-                        specDispatch={specDispatch}
-                      />
-                    )}
-                  </AsideBorder>
-                  {oauthReturn && <OAuthScene />}
-                  {!oauthReturn && spec.api && (
-                    <AppRouter
-                      api={spec.api}
-                      specKey={spec.key}
+                        <IconButton
+                          size="xsmall"
+                          shape="round"
+                          icon={hasNavigation ? <FirstPage /> : <LastPage />}
+                          label={HEADER_TOGGLE_LABEL}
+                          onClick={() => toggleNavigation()}
+                        />
+                      </Space>
+                      {hasNavigation && (
+                        <>
+                          <Divider mb="u3" appearance="light" />
+                          <SelectorContainer
+                            ml="large"
+                            mr="large"
+                            specs={specs}
+                            spec={spec}
+                            specDispatch={specDispatch}
+                          />
+                        </>
+                      )}
+                    </>
+                  )}
+                  {hasNavigation && (
+                    <SideNav
+                      headless={headless}
                       specs={specs}
-                      toggleNavigation={toggleNavigation}
-                      envAdaptor={envAdaptor}
-                      setVersionsUrl={setVersionsUrl}
+                      spec={spec}
+                      specDispatch={specDispatch}
                     />
                   )}
-                </Layout>
-              </Page>
-            </LodeContext.Provider>
+                </AsideBorder>
+                {oauthReturn && <OAuthScene />}
+                {!oauthReturn && spec.api && (
+                  <AppRouter
+                    api={spec.api}
+                    specKey={spec.key}
+                    specs={specs}
+                    toggleNavigation={toggleNavigation}
+                    envAdaptor={envAdaptor}
+                    setVersionsUrl={setVersionsUrl}
+                  />
+                )}
+              </Layout>
+            </Page>
           </ErrorBoundary>
         )}
       </ComponentsProvider>

packages/api-explorer/src/components/DocSdkUsage/DocSdkUsage.spec.tsx

@@ -27,7 +27,7 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 import { findExampleLanguages } from '@looker/sdk-codegen'
 
-import { renderWithReduxProviderAndLode } from '../../test-utils'
+import { renderWithLode } from '../../test-utils'
 import { api, examples } from '../../test-data'
 import { DocSdkUsage } from './DocSdkUsage'
 import {
@@ -47,7 +47,7 @@ describe('DocSdkUsage', () => {
       method.operationId,
       1
     )
-    renderWithReduxProviderAndLode(<DocSdkUsage method={method} />, examples)
+    renderWithLode(<DocSdkUsage method={method} />, examples)
     expect(screen.getAllByRole('link')).toHaveLength(PER_PAGE_COUNT)
 
     expect(

packages/api-explorer/src/components/DocSdkUsage/DocSdkUsage.tsx

@@ -24,7 +24,7 @@
 
  */
 import type { FC } from 'react'
-import React, { useContext, useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Box,
   Card,
@@ -41,8 +41,7 @@ import { CollapserCard } from '@looker/run-it'
 import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile'
 import { useSelector } from 'react-redux'
 
-import { selectSdkLanguage } from '../../state'
-import { LodeContext } from '../../context'
+import { selectSdkLanguage, selectExamplesLode } from '../../state'
 import {
   exampleColumns,
   EMPTY_STRING,
@@ -61,15 +60,16 @@ interface DocSdkUsageProps {
  *  links to the source files
  */
 export const DocSdkUsage: FC<DocSdkUsageProps> = ({ method }) => {
-  const { examples } = useContext(LodeContext)
+  const examples = useSelector(selectExamplesLode)
   const sdkLanguage = useSelector(selectSdkLanguage)
-  let languages = findExampleLanguages(examples, method.name)
   const [page, setPage] = useState(1)
 
   useEffect(() => {
     setPage(1)
   }, [method])
 
+  if (!examples) return <></>
+  let languages = findExampleLanguages(examples, method.name)
   if (languages.length === 0) return <></>
 
   languages = sortLanguagesByPreference(languages, sdkLanguage)

packages/api-explorer/src/components/DocSource/DocSource.tsx

@@ -24,21 +24,22 @@
 
  */
 import type { FC } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { IMethod, IType } from '@looker/sdk-codegen'
 import { findDeclaration } from '@looker/sdk-codegen'
 import { Icon, Link, Tooltip } from '@looker/components'
 import { IdeFileDocument } from '@looker/icons'
+import { useSelector } from 'react-redux'
 
-import { LodeContext } from '../../context'
+import { selectDeclarationsLode } from '../../state'
 
 interface DocSourceProps {
   method?: IMethod
   type?: IType
 }
 
 export const DocSource: FC<DocSourceProps> = ({ method, type }) => {
-  const { declarations } = useContext(LodeContext)
+  const declarations = useSelector(selectDeclarationsLode)
   let sourceLink
   let declaration
   if (declarations) {

packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.spec.tsx

@@ -29,7 +29,7 @@ import userEvent from '@testing-library/user-event'
 import { codeGenerators } from '@looker/sdk-codegen'
 import * as reactRedux from 'react-redux'
 
-import { defaultSettingsState, slice as settingsSlice } from '../../state'
+import { defaultSettingsState, settingsSlice } from '../../state'
 import {
   registerTestEnvAdaptor,
   renderWithReduxProvider,

packages/api-explorer/src/components/SelectorContainer/SdkLanguageSelector.tsx

@@ -30,13 +30,13 @@ import { Select } from '@looker/components'
 import { useSelector } from 'react-redux'
 import type { SelectOptionProps } from '@looker/components'
 
-import { useActions, selectSdkLanguage } from '../../state'
+import { useSettingActions, selectSdkLanguage } from '../../state'
 
 /**
  * Allows the user to select their preferred SDK language
  */
 export const SdkLanguageSelector: FC = () => {
-  const { setSdkLanguageAction } = useActions()
+  const { setSdkLanguageAction } = useSettingActions()
   const selectedSdkLanguage = useSelector(selectSdkLanguage)
 
   const allSdkLanguages: SelectOptionProps[] = codeGenerators.map((gen) => ({

packages/api-explorer/src/components/SideNav/SideNav.tsx

@@ -49,7 +49,7 @@ import { useSelector } from 'react-redux'
 import type { SpecAction } from '../../reducers'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
-import { selectSearchCriteria, useActions } from '../../state'
+import { selectSearchCriteria, useSettingActions } from '../../state'
 import { SideNavMethodTags } from './SideNavMethodTags'
 import { SideNavTypeTags } from './SideNavTypeTags'
 import { useDebounce, countMethods, countTypes } from './searchUtils'
@@ -100,7 +100,7 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
   }
   const tabs = useTabs({ defaultIndex, onChange: onTabChange })
   const searchCriteria = useSelector(selectSearchCriteria)
-  const { setSearchPatternAction } = useActions()
+  const { setSearchPatternAction } = useSettingActions()
 
   const [pattern, setSearchPattern] = useState('')
   const debouncedPattern = useDebounce(pattern, 250)

packages/api-explorer/src/state/index.ts

@@ -25,3 +25,4 @@
  */
 export * from './store'
 export * from './settings'
+export * from './lodes'

packages/api-explorer/src/context/index.ts → packages/api-explorer/src/state/lodes/index.ts

@@ -23,4 +23,5 @@
  SOFTWARE.
 
  */
-export { LodeContext, defaultLodeContextValue } from './lode'
+export * from './selectors'
+export * from './slice'