@looker/api-explorer 0.9.22 → 0.9.27

package/src/scenes/DiffScene/DiffScene.tsx

@@ -26,7 +26,7 @@
 
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import type { ApiModel, DiffRow, SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import {
   Box,
@@ -38,35 +38,14 @@ import {
   SelectMulti,
 } from '@looker/components'
 import { SyncAlt } from '@styled-icons/material/SyncAlt'
-import { fallbackFetch, funFetch } from '@looker/run-it'
-import { getDefaultSpecKey } from '../../reducers/spec/utils'
-import { diffPath } from '../../utils'
+import { useSelector } from 'react-redux'
+
 import { ApixSection } from '../../components'
+import { selectCurrentSpec } from '../../state'
+import { diffPath, getApixAdaptor } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
-/**
- * Pick the left key, or default spec
- * @param specs to pick from
- * @param leftKey spec key that may or may not have a value
- */
-const pickLeft = (specs: SpecList, leftKey: string) => {
-  if (leftKey) return leftKey
-  return getDefaultSpecKey(specs)
-}
-
-/**
- * Pick the right key, or "other" spec
- * @param specs to pick from
- * @param rightKey spec key from url path
- * @param leftKey spec key from url path
- */
-const pickRight = (specs: SpecList, rightKey: string, leftKey: string) => {
-  if (rightKey) return rightKey
-  if (!leftKey) leftKey = getDefaultSpecKey(specs)
-  return Object.keys(specs).find((k) => k !== leftKey) || ''
-}
-
 const diffToggles = [
   {
     label: 'Missing',
@@ -104,7 +83,10 @@ const validateParam = (specs: SpecList, specKey = '') => {
 }
 
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+  const adaptor = getApixAdaptor()
   const history = useHistory()
+  const spec = useSelector(selectCurrentSpec)
+  const currentSpecKey = spec.key
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
@@ -114,83 +96,62 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
     label: `${key} (${spec.status})`,
   }))
 
-  const [leftKey, setLeftKey] = useState<string>(pickLeft(specs, l))
-  const [rightKey, setRightKey] = useState<string>(pickRight(specs, r, leftKey))
+  const [leftKey, setLeftKey] = useState<string>(l || currentSpecKey)
+  const [rightKey, setRightKey] = useState<string>(r || '')
   const [leftApi, setLeftApi] = useState<ApiModel>(specs[leftKey].api!)
-  const [rightApi, setRightApi] = useState<ApiModel>(
+  const [rightApi, setRightApi] = useState<ApiModel>(() =>
     rightKey ? specs[rightKey].api! : specs[leftKey].api!
   )
   const [toggles, setToggles] = useState<string[]>(standardDiffToggles)
 
   useEffect(() => {
-    toggleNavigation(false)
-  }, [])
-
-  const computeDelta = (left: string, right: string, toggles: string[]) => {
-    if (left && right && specs[left].api && specs[right].api) {
-      return diffSpecs(specs[left].api!, specs[right].api!, toggles)
+    if (r !== rightKey) {
+      setRightKey(r)
     }
-    return []
-  }
-  const [delta, setDelta] = useState<DiffRow[]>(
-    computeDelta(leftKey, rightKey, toggles)
-  )
+  }, [r, rightKey])
 
-  const loadSpec = async (
-    specs: SpecList,
-    key: string,
-    setter: (spec: SpecItem) => void
-  ) => {
-    const spec = specs[key]
-    if (!spec.api) {
-      try {
-        const newSpec = { ...spec }
-        const api = await fallbackFetch(newSpec, funFetch)
-        if (api) {
-          spec.api = api
-          setter(spec)
-        }
-      } catch (error) {
-        console.error(error)
-      }
+  useEffect(() => {
+    if (l !== leftKey) {
+      setLeftKey(l)
     }
-  }
+  }, [l, leftKey])
 
-  const compareKeys = async (left: string, right: string) => {
-    if (left !== leftKey || right !== rightKey) {
-      history.push(`/${diffPath}/${left}/${right}`)
-    }
-    if (!specs[left].api) {
-      await loadSpec(specs, leftKey, (spec) => setLeftApi(spec.api!))
-    }
-    if (!specs[right].api) {
-      await loadSpec(specs, rightKey, (spec) => setRightApi(spec.api!))
-    }
-    setDelta([...computeDelta(left, right, toggles)])
-  }
+  useEffect(() => {
+    toggleNavigation(false)
+  }, [])
+
+  const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    setLeftKey(newLeft)
+    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
+  }
+  const handleRightChange = (newRight: string) => {
+    history.push(`/${diffPath}/${leftKey}/${newRight}`)
   }
 
-  const handleTogglesChange = (values?: string[]) => {
-    const newToggles = values || []
-    setToggles(newToggles)
-    setDelta([...computeDelta(leftKey, rightKey, newToggles)])
+  const handleSwitch = () => {
+    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
   }
 
   useEffect(() => {
-    compareKeys(leftKey, rightKey)
-  }, [leftKey, rightKey])
+    adaptor.fetchSpec(specs[leftKey]).then((spec) => setLeftApi(spec.api!))
+  }, [leftKey])
 
-  const handleRightChange = (newRight: string) => {
-    setRightKey(newRight)
-  }
+  useEffect(() => {
+    if (rightKey in specs) {
+      adaptor.fetchSpec(specs[rightKey]).then((spec) => setRightApi(spec.api!))
+    }
+  }, [rightKey])
 
-  const handleSwitch = () => {
-    const currLeftKey = leftKey
-    setLeftKey(rightKey)
-    setRightKey(currLeftKey)
+  useEffect(() => {
+    if (leftApi && rightApi) {
+      setDelta([...diffSpecs(leftApi, rightApi, toggles)])
+    }
+  }, [leftApi, rightApi, toggles])
+
+  const handleTogglesChange = (values?: string[]) => {
+    const newToggles = values || []
+    setToggles(newToggles)
   }
 
   return (
@@ -211,6 +172,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
           <IconButton
             label="switch"
             size="small"
+            disabled={!leftKey || !rightKey}
             icon={<SyncAlt />}
             mt="medium"
             onClick={handleSwitch}
@@ -221,6 +183,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
               mt="xxsmall"
               id="compare"
               name="Right Version"
+              placeholder="Select a comparison..."
               value={rightKey}
               options={options}
               onChange={handleRightChange}

package/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx

@@ -28,8 +28,7 @@ import { Router } from 'react-router'
 import type { MemoryHistory } from 'history'
 import { createMemoryHistory } from 'history'
 import { renderWithTheme } from '@looker/components-test-utils'
-import userEvent from '@testing-library/user-event'
-import { act, screen } from '@testing-library/react'
+import { screen, fireEvent } from '@testing-library/react'
 import { api } from '../../../test-data'
 import { DiffMethodLink } from './DiffItem'
 
@@ -37,27 +36,24 @@ describe('DiffMethodLink', () => {
   const method = api.methods.create_dashboard
   const specKey = '4.0'
   let history: MemoryHistory
-  let pushSpy: jasmine.Spy
 
   beforeEach(() => {
     history = createMemoryHistory()
-    pushSpy = spyOn(history, 'push')
   })
 
   test('it renders method and navigates on click', () => {
+    const pushSpy = jest.spyOn(history, 'push')
     renderWithTheme(
       <Router history={history}>
         <DiffMethodLink method={method} specKey={specKey} />
       </Router>
     )
-    const s = `${method.name} for ${specKey}`
-    expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).toHaveBeenCalledWith(
-        `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
-      )
-    })
+    const link = screen.getByRole('link')
+    expect(link).toHaveTextContent(`${method.name} for ${specKey}`)
+    fireEvent.click(link)
+    expect(pushSpy).toHaveBeenCalledWith(
+      `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
+    )
   })
 
   test('it renders missing method and does not navigate on click', () => {
@@ -68,9 +64,6 @@ describe('DiffMethodLink', () => {
     )
     const s = `Missing in ${specKey}`
     expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).not.toHaveBeenCalled()
-    })
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
   })
 })

package/src/scenes/DiffScene/DocDiff/DiffItem.tsx

@@ -23,12 +23,12 @@
  SOFTWARE.
 
  */
-import type { FC, BaseSyntheticEvent } from 'react'
+import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import { useHistory } from 'react-router'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import styled from 'styled-components'
-import { Accordion2, Box, Card, Grid, Heading } from '@looker/components'
+import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components'
 import type { DiffRow } from '@looker/sdk-codegen/src'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
@@ -42,7 +42,7 @@ interface DiffMethodLinkProps {
   specKey: string
 }
 
-const DiffLink = styled(Heading)`
+const DiffLink = styled(Link)`
   color: ${({ theme }) => theme.colors.ui5};
   cursor: pointer;
   display: block;
@@ -61,19 +61,18 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   specKey,
 }) => {
   const history = useHistory()
+
   if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
 
-  const handleClick = (e: BaseSyntheticEvent) => {
-    e.stopPropagation()
-    const tag = method.schema.tags[0]
-    const path = `${buildMethodPath(specKey, tag, method.name)}`
-    history.push(path)
-  }
+  const tag = method.schema.tags[0]
+  const path = `${buildMethodPath(specKey, tag, method.name)}`
 
   return (
     <DiffLink
-      as="h4"
-      onClick={handleClick}
+      role="link"
+      onClick={() => {
+        history.push(path)
+      }}
     >{`${method.name} for ${specKey}`}</DiffLink>
   )
 }

package/src/scenes/DiffScene/DocDiff/DocDiff.tsx

@@ -80,9 +80,9 @@ export const DocDiff: FC<DocDiffProps> = ({
             <Heading as="h2">{`${delta.length} differences between ${leftKey} and ${rightKey}`}</Heading>
           </Space>
           <SpaceVertical mt="large" gap="xxsmall">
-            {pageItemData.map((item) => (
+            {pageItemData.map((item, index) => (
               <DiffItem
-                key={item.id}
+                key={index}
                 item={item}
                 leftKey={leftKey}
                 leftSpec={leftSpec}

package/src/scenes/MethodScene/MethodScene.tsx

@@ -25,7 +25,7 @@
  */
 
 import type { FC } from 'react'
-import React, { useContext, useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Aside,
   Button,
@@ -36,12 +36,13 @@ import {
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
 import { useHistory, useParams } from 'react-router-dom'
-import type { RunItSetter } from '@looker/run-it'
-import { RunIt, RunItContext, RunItFormKey } from '@looker/run-it'
+import { RunIt, RunItFormKey } from '@looker/run-it'
 import type { ApiModel } from '@looker/sdk-codegen'
 import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
+import { getApixAdaptor } from '../../utils'
 import {
   ApixSection,
   DocActivityType,
@@ -57,13 +58,10 @@ import {
   DocSchema,
 } from '../../components'
 import { selectSdkLanguage } from '../../state'
-import type { IApixEnvAdaptor } from '../../utils'
 import { DocOperation, DocRequestBody } from './components'
 
 interface MethodSceneProps {
   api: ApiModel
-  envAdaptor: IApixEnvAdaptor
-  setVersionsUrl: RunItSetter
 }
 
 interface MethodSceneParams {
@@ -72,18 +70,14 @@ interface MethodSceneParams {
   specKey: string
 }
 
-const showRunIt = async (envAdaptor: IApixEnvAdaptor) => {
-  const data = await envAdaptor.localStorageGetItem(RunItFormKey)
+const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
+  const data = await adaptor.localStorageGetItem(RunItFormKey)
   return !!data
 }
 
-export const MethodScene: FC<MethodSceneProps> = ({
-  api,
-  envAdaptor,
-  setVersionsUrl,
-}) => {
+export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
+  const adaptor = getApixAdaptor()
   const history = useHistory()
-  const { sdk } = useContext(RunItContext)
   const sdkLanguage = useSelector(selectSdkLanguage)
   const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
   const { value, toggle, setOn } = useToggle()
@@ -110,7 +104,7 @@ export const MethodScene: FC<MethodSceneProps> = ({
   useEffect(() => {
     const checkRunIt = async () => {
       try {
-        const show = await showRunIt(envAdaptor)
+        const show = await showRunIt(adaptor)
         if (show) {
           setOn()
         }
@@ -119,7 +113,7 @@ export const MethodScene: FC<MethodSceneProps> = ({
       }
     }
     checkRunIt()
-  }, [envAdaptor, setOn])
+  }, [adaptor, setOn])
 
   const runItToggle = (
     <RunItButton
@@ -157,7 +151,7 @@ export const MethodScene: FC<MethodSceneProps> = ({
           <DocSchema object={method.schema} />
         </ApixSection>
       )}
-      {sdk && value && (
+      {value && (
         <Aside width="50rem">
           <ExtendComponentsThemeProvider
             themeCustomizations={{
@@ -171,11 +165,11 @@ export const MethodScene: FC<MethodSceneProps> = ({
             }}
           >
             <RunIt
+              adaptor={adaptor}
               key={method.operationId}
               sdkLanguage={sdkLanguage}
               api={api}
               method={method}
-              setVersionsUrl={setVersionsUrl}
             />
           </ExtendComponentsThemeProvider>
         </Aside>

package/src/state/index.ts

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

package/src/{context → state/lodes}/index.ts

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

package/src/state/lodes/sagas.spec.ts

@@ -0,0 +1,92 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import ReduxSagaTester from 'redux-saga-tester'
+import { examples, declarations } from '../../test-data'
+import * as lodeUtils from '../../utils/lodeUtils'
+import * as sagas from './sagas'
+import { lodeActions, lodesSlice } from './slice'
+
+describe('Lode sagas', () => {
+  let sagaTester: ReduxSagaTester<any>
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+    sagaTester = new ReduxSagaTester({
+      initialState: { lodes: { examples, declarations } },
+      reducers: {
+        lodes: lodesSlice.reducer,
+      },
+    })
+    sagaTester.start(sagas.saga)
+  })
+
+  describe('initSaga', () => {
+    const { initLodesAction, initLodesSuccessAction, initLodesFailureAction } =
+      lodeActions
+    const examplesLodeUrl = 'https://foo.com/examples.json'
+    const declarationsLodeUrl = 'https://foo.com/declarations.json'
+
+    test('sends initLodesSuccessAction with examples and declarations on success', async () => {
+      jest
+        .spyOn(lodeUtils, 'getLoded')
+        .mockResolvedValueOnce({ examples, declarations })
+
+      sagaTester.dispatch(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+
+      await sagaTester.waitFor('lodes/initLodesSuccessAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+      expect(calledActions[1]).toEqual(
+        initLodesSuccessAction({
+          examples,
+          declarations,
+        })
+      )
+    })
+
+    test('sends initLodesFailureAction on error', async () => {
+      const error = new Error('boom')
+      jest.spyOn(lodeUtils, 'getLoded').mockRejectedValueOnce(error)
+
+      sagaTester.dispatch(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+
+      await sagaTester.waitFor('lodes/initLodesFailureAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+      expect(calledActions[1]).toEqual(initLodesFailureAction(error))
+    })
+  })
+})

package/src/state/lodes/sagas.ts

@@ -0,0 +1,51 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { call, put, takeEvery } from 'typed-redux-saga'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { getLoded } from '../../utils'
+import type { InitPayload } from './slice'
+import { lodeActions } from './slice'
+
+function* initSaga(action: PayloadAction<InitPayload>) {
+  const { initLodesSuccessAction, initLodesFailureAction } = lodeActions
+  try {
+    const lode = yield* call(
+      getLoded,
+      action.payload.examplesLodeUrl,
+      action.payload.declarationsLodeUrl
+    )
+    yield* put(initLodesSuccessAction(lode))
+  } catch (error: any) {
+    yield* put(initLodesFailureAction(error))
+  }
+}
+
+export function* saga() {
+  const { initLodesAction } = lodeActions
+
+  yield* takeEvery(initLodesAction, initSaga)
+}

package/src/state/lodes/selectors.spec.ts

@@ -0,0 +1,42 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { createTestStore } from '../../test-utils'
+import { declarations, examples } from '../../test-data'
+import { selectDeclarationsLode, selectExamplesLode } from './selectors'
+
+const testStore = createTestStore({ lodes: { examples, declarations } })
+
+describe('Lode selectors', () => {
+  const state = testStore.getState()
+
+  test('selectExamplesLode selects', () => {
+    expect(selectExamplesLode(state)).toEqual(examples)
+  })
+
+  test('selectDeclarationsLode selects', () => {
+    expect(selectDeclarationsLode(state)).toEqual(declarations)
+  })
+})

package/src/{reducers/spec/actions.spec.ts → state/lodes/selectors.ts}

@@ -23,14 +23,12 @@
  SOFTWARE.
 
  */
-import { selectSpec } from './actions'
-
-describe('Spec reducer actions', () => {
-  test('returns a SELECT_SPEC action object with provided values', () => {
-    const action = selectSpec('3.1')
-    expect(action).toEqual({
-      type: 'SELECT_SPEC',
-      payload: '3.1',
-    })
-  })
-})
+import type { RootState } from '../store'
+
+const selectLodeState = (state: RootState) => state.lodes
+
+export const selectExamplesLode = (state: RootState) =>
+  selectLodeState(state).examples
+
+export const selectDeclarationsLode = (state: RootState) =>
+  selectLodeState(state).declarations