Skip to content

Commit

Permalink
fix: always render provider children (#459)
Browse files Browse the repository at this point in the history
  • Loading branch information
SgtPooki authored Oct 31, 2024
1 parent f9513b0 commit c0ae357
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 11 deletions.
10 changes: 8 additions & 2 deletions dev/devPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { createRoot } from 'react-dom/client'
import { I18nextProvider, useTranslation } from 'react-i18next'
import 'tachyons'
import i18n from '../src/i18n.js'
import { ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm, ExploreProvider, HeliaProvider, useExplore } from '../src/index.js'
import { ExplorePage, StartExploringPage, IpldExploreForm, IpldCarExploreForm, ExploreProvider, HeliaProvider, useExplore, useHelia } from '../src/index.js'

globalThis.Buffer = globalThis.Buffer ?? Buffer

Expand Down Expand Up @@ -65,6 +65,12 @@ const HeaderComponent: React.FC = () => {

const PageRenderer = (): React.ReactElement => {
const { setExplorePath, exploreState: { path } } = useExplore()
const { doInitHelia } = useHelia()

useEffect(() => {
void doInitHelia()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

useEffect(() => {
const onHashChange = (): void => {
Expand All @@ -87,7 +93,7 @@ const App = (): React.ReactElement => {
<HeliaProvider>
<ExploreProvider>
<HeaderComponent />
<PageRenderer />
<PageRenderer />
</ExploreProvider>
</HeliaProvider>
)
Expand Down
7 changes: 5 additions & 2 deletions src/components/ExplorePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import ReactJoyride from 'react-joyride'
import { Loader } from '../components/loader/loader.js'
import { explorerTour } from '../lib/tours.js'
import { useExplore } from '../providers/explore.js'
import { useHelia } from '../providers/helia.js'
import CidInfo from './cid-info/CidInfo.js'
import ErrorBoundary from './error/ErrorBoundary'
import { IpldExploreErrorComponent } from './explore/IpldExploreErrorComponent'
Expand All @@ -25,6 +27,7 @@ export const ExplorePage = ({
}): null | React.ReactNode => {
const { t, ready: tReady } = useTranslation('explore')

const { helia } = useHelia()
const { exploreState, doExploreLink } = useExplore()
const { path } = exploreState

Expand All @@ -37,8 +40,8 @@ export const ExplorePage = ({
const { error, targetNode, localPath, nodes, pathBoundaries } = exploreState
const sourceNode = nodes?.[0] ?? null

if (!tReady) {
return null
if (!tReady || helia == null) {
return <Loader color='dark' />
}

return (
Expand Down
2 changes: 1 addition & 1 deletion src/components/loader/loader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import styles from './loader.module.css'

export const Loader: React.FC<{ color?: string }> = ({ color = 'light', ...props }) => {
const className = `dib ${styles.laBallTrianglePath} la-${color} la-sm`
const className = `dib ${styles.laBallTrianglePath} ${color === 'dark' ? styles.laDark : ''} la-sm`
return (
<div {...props}>
<div
Expand Down
7 changes: 1 addition & 6 deletions src/providers/explore.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CID } from 'multiformats/cid'
import React, { createContext, useContext, useState, useEffect, type ReactNode, useCallback } from 'react'
import { Loader } from '../components/loader/loader.js'
import { type LinkObject } from '../components/object-info/links-table'
import { ensureLeadingSlash } from '../lib/helpers.js'
import { importCar } from '../lib/import-car.js'
Expand Down Expand Up @@ -204,12 +203,8 @@ export const ExploreProvider = ({ children, state, explorePathPrefix = '#/explor
}
}, [explorePathPrefix, helia])

if (helia == null) {
return <Loader color='dark' />
}

return (
<ExploreContext.Provider value={{ exploreState, explorePathPrefix, isLoading, doExploreLink, doExploreUserProvidedPath, doUploadUserProvidedCar, setExplorePath }} key={path}>
<ExploreContext.Provider value={{ exploreState, explorePathPrefix, isLoading, doExploreLink, doExploreUserProvidedPath, doUploadUserProvidedCar, setExplorePath }}>
{children}
</ExploreContext.Provider>
)
Expand Down

0 comments on commit c0ae357

Please sign in to comment.