@xyo-network/react-api 2.32.0-rc.11

package/src/components/ApiErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'
+import { XyoApiError } from '@xyo-network/api'
+
+export interface ApiErrorAlertProps extends AlertProps {
+  call?: XyoApiError
+}
+
+const ApiErrorAlert: React.FC<ApiErrorAlertProps> = ({ call, ...props }) => {
+  return (
+    <Alert severity="error" {...props}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      <Typography sx={{ wordBreak: 'break-all' }}>{call?.config?.url}</Typography>
+      <Typography variant="caption" mr={0.5} fontWeight="bold">
+        Error:
+      </Typography>
+      <Typography variant="caption">{call?.message}</Typography>
+    </Alert>
+  )
+}
+
+export { ApiErrorAlert }

package/src/components/JsonRouteWrapper/JsonApiButton.tsx

@@ -0,0 +1,19 @@
+import { ButtonEx, ButtonExProps } from '@xylabs/react-button'
+import { useSearchParams } from 'react-router-dom'
+
+export const JsonApiButton: React.FC<ButtonExProps> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  return (
+    <ButtonEx
+      marginX={2}
+      variant="outlined"
+      onClick={() => {
+        searchParams.set('json', 'true')
+        setSearchParams(searchParams)
+      }}
+      {...props}
+    >
+      JSON
+    </ButtonEx>
+  )
+}

package/src/components/JsonRouteWrapper/JsonRouteWrapper.stories.tsx

@@ -0,0 +1,68 @@
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoArchivistApi } from '@xyo-network/api'
+import { BrowserRouter, useSearchParams } from 'react-router-dom'
+
+import { JsonRouteWrapper } from './JsonRouteWrapper'
+
+const JsonDecorator: DecoratorFn = (Story) => (
+  <BrowserRouter>
+    <Story />
+  </BrowserRouter>
+)
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: 'https://beta.api.archivist.xyo.network',
+  },
+  component: JsonRouteWrapper,
+  decorators: [JsonDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/JsonRouteWrapper',
+} as ComponentMeta<typeof JsonRouteWrapper>
+
+const Template: ComponentStory<typeof JsonRouteWrapper> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const activeJson = searchParams.get('json')
+  return (
+    <FlexCol>
+      <ButtonEx
+        marginY={3}
+        onClick={() => {
+          activeJson === 'true' ? searchParams.delete('json') : searchParams.set('json', 'true')
+          setSearchParams(searchParams)
+        }}
+        variant="outlined"
+      >
+        Toggle JSON Page
+      </ButtonEx>
+      <JsonRouteWrapper {...props}></JsonRouteWrapper>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  callback: () => new XyoArchivistApi({ apiDomain: 'https://beta.api.archivist.xyo.network' }).archive('temp').block.stats.get(),
+}
+
+const HideBackButton = Template.bind({})
+HideBackButton.args = {
+  callback: () =>
+    new XyoArchivistApi({
+      apiDomain: 'https://beta.api.archivist.xyo.network',
+    })
+      .archive('temp')
+      .block.stats.get(),
+  noBackButton: true,
+}
+
+export { Default, HideBackButton }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonRouteWrapper.tsx

@@ -0,0 +1,85 @@
+import { ButtonEx } from '@xylabs/react-button'
+import { ErrorDialog } from '@xylabs/react-dialogs'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { lazy, Suspense, useState } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+import { useSearchParams } from 'react-router-dom'
+
+import { JsonApiButton } from './JsonApiButton'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface JsonFromPromiseProps extends FlexBoxProps {
+  callback: () => Promise<object | undefined>
+  noBackButton?: boolean
+  noJsonButton?: boolean
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const JsonRouteWrapper: React.FC<JsonFromPromiseProps> = ({
+  callback,
+  children,
+  noBackButton = false,
+  noJsonButton = false,
+  jsonViewProps,
+  ...props
+}) => {
+  const [apiResponse, setApiResponse] = useState<object>()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const active = !!searchParams.get('json')
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      try {
+        const response = await callback()
+        if (mounted()) {
+          setApiResponse(response)
+        }
+      } catch (ex) {
+        if (mounted()) {
+          const error = ex as XyoApiError
+          if (error.isXyoError) {
+            setApiError(error)
+          } else {
+            throw ex
+          }
+        }
+      }
+    },
+    [callback],
+  )
+
+  return (
+    <FlexCol {...props}>
+      {active ? (
+        <>
+          <Suspense fallback={null}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...jsonViewProps} />}</Suspense>
+          {!noBackButton && (
+            <FlexRow marginY={3}>
+              <ButtonEx
+                flexDirection="row"
+                variant="outlined"
+                onClick={() => {
+                  searchParams.delete('json')
+                  setSearchParams(searchParams)
+                }}
+              >
+                Back
+              </ButtonEx>
+            </FlexRow>
+          )}
+          <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+        </>
+      ) : (
+        <>
+          {children}
+          {!noJsonButton && <JsonApiButton marginTop={2} />}
+        </>
+      )}
+    </FlexCol>
+  )
+}

package/src/components/JsonRouteWrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './JsonApiButton'
+export * from './JsonRouteWrapper'

package/src/components/ResultLoader.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { AxiosError } from 'axios'
+
+import { ResultLoader } from './ResultLoader'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: ResultLoader,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/ResultLoader',
+}
+
+const Template: ComponentStory<typeof ResultLoader> = (props) => {
+  return <ResultLoader {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const NotFound = Template.bind({})
+NotFound.args = { notFound: true }
+
+const ApiError = Template.bind({})
+ApiError.args = { apiError: new AxiosError(), children: <h1>Shown in case of error</h1> }
+
+const SearchResult = Template.bind({})
+SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
+
+export { ApiError, Default, NotFound, SearchResult }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ResultLoader.tsx

@@ -0,0 +1,26 @@
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { XyoApiError } from '@xyo-network/api'
+import { NotFound } from '@xyo-network/react-shared'
+import { PropsWithChildren } from 'react'
+
+export interface HandleItemDetailLoadingProps<T> {
+  apiError: Error | XyoApiError | undefined
+  notFound: boolean
+  searchResult: T | undefined
+}
+
+export function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>) {
+  const { notFound, apiError, searchResult, children } = props
+  if (notFound) {
+    return <NotFound />
+  }
+  // Defer error handling to the children
+  if (apiError) {
+    return <>{children}</>
+  }
+  if (searchResult === undefined) {
+    return <FlexGrowRow busy minHeight="50px" />
+  } else {
+    return <>{children}</>
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ApiErrorAlert'
+export * from './JsonRouteWrapper'
+export * from './ResultLoader'

package/src/hooks/ResolvePayloadArgs.ts

@@ -0,0 +1,6 @@
+import { XyoApiError } from '@xyo-network/api'
+import { XyoPayload } from '@xyo-network/payload'
+
+export type UsePayload = [XyoPayload?, boolean?, XyoApiError?]
+
+export type UseHuriOrHash = [...UsePayload, boolean?]

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './lib'
+export * from './ResolvePayloadArgs'
+export * from './useHuriHash'
+export * from './useLoadPayload'
+export * from './useResolveHuri'

package/src/hooks/lib/FetchHuriHashOptions.ts

@@ -0,0 +1,3 @@
+export interface FetchHuriHashOptions {
+  changeActiveNetwork?: boolean
+}

package/src/hooks/lib/findHuriNetwork.ts

@@ -0,0 +1,13 @@
+import { XyoNetworkPayload } from '@xyo-network/network'
+import { Huri } from '@xyo-network/payload'
+
+export const findHuriNetwork = (huriInstance: Huri, networks?: XyoNetworkPayload[]) => {
+  // see if huri archivist matches any archivist in the network configs
+  return networks
+    ?.filter((network) =>
+      network.nodes?.find((node) => {
+        return node.type === 'archivist' && new URL(node.uri).hostname === huriInstance.archivist
+      }),
+    )
+    .shift()
+}

package/src/hooks/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './FetchHuriHashOptions'
+export * from './findHuriNetwork'

package/src/hooks/useHuriHash.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable import/no-internal-modules */
+import { Alert, Typography } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { Huri } from '@xyo-network/payload'
+import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
+import { NetworkMemoryProvider } from '@xyo-network/react-network'
+import { XyoSchemaCache } from '@xyo-network/utils'
+import { lazy, Suspense, useState } from 'react'
+
+import { FetchHuriHashOptions } from './lib'
+import { useHuriHash } from './useHuriHash'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+interface UseHuriHashComponentProps {
+  huriOrHash: string | Huri
+  huriUri?: string
+  options?: FetchHuriHashOptions
+  reTestable?: boolean
+}
+
+const apiDomain = 'https://beta.api.archivist.xyo.network'
+const hash = '5605fabad11b10bb5fb86b309ca0970894eda8f22362dda1a489817723bca992'
+XyoSchemaCache.instance.proxy = `${apiDomain}/domain`
+
+const mainApiDomain = 'https://api.archivist.xyo.network'
+const mainHash = 'd3a3936e31ba1d835c528784ab77c1eaaeedd6e16b7aad68a88241ce539853cb'
+
+const Wrapper: React.FC<UseHuriHashComponentProps> = (props) => (
+  <NetworkMemoryProvider>
+    <ArchivistApiProvider apiDomain={apiDomain}>
+      <UseHuriHashComponent {...props} />
+    </ArchivistApiProvider>
+  </NetworkMemoryProvider>
+)
+
+const UseHuriHashComponent: React.FC<UseHuriHashComponentProps> = ({ huriOrHash, huriUri, options, reTestable }) => {
+  const [trigger, setTrigger] = useState<string | Huri>(huriOrHash)
+  const [payload, notFound, , networkNotFound] = useHuriHash(trigger, huriUri, options)
+
+  return (
+    <>
+      <Typography variant="body1" fontWeight="bold">
+        Fetches the payload for a huriOrHash.
+      </Typography>
+      {reTestable ? (
+        <FlexRow columnGap={2}>
+          <ButtonEx variant="contained" onClick={() => setTrigger(hash)}>
+            Fetch Valid Hash
+          </ButtonEx>
+          <ButtonEx variant="contained" onClick={() => setTrigger('foo')}>
+            Hash Not Found
+          </ButtonEx>
+        </FlexRow>
+      ) : null}
+      <FlexCol my={3}>
+        {notFound === undefined && networkNotFound === undefined ? 'Loading...' : null}
+        {notFound ? <Alert severity="warning">Not Found</Alert> : null}
+        {networkNotFound ? <Alert severity="warning">Network Not Found</Alert> : null}
+        <Suspense fallback={<FlexCol busy />}>
+          <JsonView src={payload || {}} />
+        </Suspense>
+      </FlexCol>
+    </>
+  )
+}
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: UseHuriHashComponent,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/useHuriHash',
+}
+
+const Template: ComponentStory<typeof UseHuriHashComponent> = (props) => {
+  return <Wrapper {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = { huriOrHash: hash }
+
+const NotFound = Template.bind({})
+NotFound.args = { huriOrHash: 'foo', reTestable: true }
+
+const WithHuri = Template.bind({})
+WithHuri.args = { huriOrHash: new Huri(`${apiDomain}/${hash}`) }
+
+const WithHuriUri = Template.bind({})
+WithHuriUri.args = { huriUri: `${mainApiDomain}/${mainHash}` }
+
+const WithHuriUriNetworkNotFound = Template.bind({})
+WithHuriUriNetworkNotFound.args = { huriUri: `http://badarchivisturl.com/${mainHash}` }
+
+// Note - story will work correctly once main net return 200 instead of 404 when payloads aren't found
+// Resolve huriUri when network is different from the current network
+const WithHuriUriNotFound = Template.bind({})
+WithHuriUriNotFound.args = { huriUri: `${mainApiDomain}/foo` }
+
+export { Default, NotFound, WithHuri, WithHuriUri, WithHuriUriNetworkNotFound, WithHuriUriNotFound }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/useHuriHash.tsx

@@ -0,0 +1,40 @@
+import { Huri } from '@xyo-network/payload'
+import { useCallback } from 'react'
+
+import { FetchHuriHashOptions } from './lib'
+import { UseHuriOrHash } from './ResolvePayloadArgs'
+import { useLoadPayload } from './useLoadPayload'
+import { useResolveHuri } from './useResolveHuri'
+
+/**
+ * Resolve a hash or a huri regardless of network
+ */
+const useHuriHash = (huriOrHash?: string | Huri, huriUri?: string, options?: FetchHuriHashOptions): UseHuriOrHash => {
+  const hash = useCallback((huriOrHash?: string | Huri) => {
+    if (huriOrHash) {
+      if (typeof huriOrHash === 'string') {
+        return huriOrHash
+      }
+      if (huriOrHash instanceof Huri) {
+        return huriOrHash.hash
+      }
+    }
+  }, [])
+
+  const providedHash = hash(huriOrHash)
+
+  //AT: TODO -> Talk about this pattern
+
+  // Optimistically try to grab the has from the current network and archive
+  const [payload, notFound, apiError] = useLoadPayload(providedHash)
+
+  // if a huriUri was passed, we can safely override the notFound from the hash only query
+  const notFoundOverride = huriUri ? true : notFound
+
+  // If payload isn't found, fallback to the huriUri
+  const [huriPayload, huriPayloadNotFound, huriApiError, networkNotFound] = useResolveHuri(huriUri, notFoundOverride, options)
+
+  return [payload ?? huriPayload, huriPayloadNotFound, apiError ?? huriApiError, networkNotFound]
+}
+
+export { useHuriHash }

package/src/hooks/useLoadPayload.stories.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { ArchivistApiProvider, useArchivistApi } from '@xyo-network/react-archivist-api'
+import { lazy, Suspense, useState } from 'react'
+
+import { useLoadPayload } from './useLoadPayload'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+const apiDomain = 'https://beta.api.archivist.xyo.network'
+const hash = '5605fabad11b10bb5fb86b309ca0970894eda8f22362dda1a489817723bca992'
+
+const Wrapper: React.FC<{ hash?: string }> = ({ hash }) => (
+  <ArchivistApiProvider apiDomain={apiDomain}>
+    <UsePayloadComponent hash={hash} />
+  </ArchivistApiProvider>
+)
+
+const UsePayloadComponent: React.FC<{ hash?: string }> = ({ hash }) => {
+  const { api } = useArchivistApi()
+  const [trigger, setTrigger] = useState<string>()
+  const [payload, notFound] = useLoadPayload(trigger)
+
+  return (
+    <>
+      {api ? (
+        <>
+          <ButtonEx variant="contained" marginBottom={2} onClick={() => setTrigger(hash)}>
+            Fetch Payload
+          </ButtonEx>
+          <ButtonEx variant="contained" onClick={() => setTrigger('foo')}>
+            Fetch Not Found
+          </ButtonEx>
+        </>
+      ) : null}
+      <FlexCol my={3}>
+        <Suspense fallback={<FlexCol busy />}>
+          {notFound ? 'Not Found' : null}
+          <JsonView src={payload || {}} />
+        </Suspense>
+      </FlexCol>
+    </>
+  )
+}
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: UsePayloadComponent,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'payload/usePayload',
+}
+
+const Template: ComponentStory<typeof UsePayloadComponent> = (props) => {
+  return <Wrapper {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = { hash }
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/useLoadPayload.tsx

@@ -0,0 +1,59 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { XyoPayload } from '@xyo-network/payload'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { useEffect, useState } from 'react'
+
+import { UsePayload } from './ResolvePayloadArgs'
+
+export const useLoadPayload = (hash?: string): UsePayload => {
+  const { api } = useArchivistApi()
+  const { archive } = useArchive()
+  const [localHash, setLocalHash] = useState<string>()
+  const [notFound, setNotFound] = useState<boolean>()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [payload, setPayload] = useState<XyoPayload>()
+
+  const reset = () => {
+    setPayload(undefined)
+    setApiError(undefined)
+    setNotFound(undefined)
+  }
+
+  // allow for hash changes to retrigger the api call
+  useEffect(() => {
+    if (hash !== localHash) {
+      setLocalHash(hash)
+      reset()
+    }
+  }, [hash, localHash])
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (api && localHash && localHash.length > 0 && notFound === undefined) {
+        reset()
+        try {
+          const result = await api?.archive(archive).payload.hash(localHash).get()
+          if (mounted()) {
+            if (result?.length) {
+              setPayload(result[0])
+              setNotFound(false)
+            } else if (result?.length === 0) {
+              setNotFound(true)
+              setPayload(undefined)
+            }
+          }
+        } catch (e) {
+          reset()
+          setNotFound(false)
+          setApiError(e as XyoApiError)
+          console.error(e)
+        }
+      }
+    },
+    [hash, api, archive, payload, notFound, localHash],
+  )
+  return [payload, notFound, apiError]
+}

package/src/hooks/useResolveHuri.tsx

@@ -0,0 +1,75 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { Huri, XyoPayload } from '@xyo-network/payload'
+import { useNetwork } from '@xyo-network/react-network'
+import { useEffect, useState } from 'react'
+
+import { FetchHuriHashOptions, findHuriNetwork } from './lib'
+import { UseHuriOrHash } from './ResolvePayloadArgs'
+
+const useResolveHuri = (huriUri?: string, dependentNotFound?: boolean, options?: FetchHuriHashOptions): UseHuriOrHash => {
+  const { network, networks, setNetwork } = useNetwork()
+  const [huriPayload, setHuriPayload] = useState<XyoPayload>()
+  const [huriPayloadNotFound, setHuriPayloadNotFound] = useState<boolean>()
+  const [huriNetworkNotFound, setHuriNetworkNotFound] = useState<boolean>()
+  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
+
+  const { changeActiveNetwork } = options ?? {}
+
+  //AT: TODO -> Talk about this pattern
+  const reset = () => {
+    setHuriPayload(undefined)
+    setHuriPayloadNotFound(undefined)
+    setHuriApiError(undefined)
+  }
+
+  useEffect(() => {
+    // Initially, sync local not found with dependent's status
+    setHuriPayloadNotFound(dependentNotFound)
+  }, [dependentNotFound])
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      // if dependent value is resolved, don't do anything, if not resolved, try to resolve huriUri
+      if (dependentNotFound && huriUri) {
+        reset()
+        const huriInstance = new Huri(huriUri)
+
+        const foundHuriNetwork = findHuriNetwork(huriInstance, networks)
+
+        if (foundHuriNetwork && mounted()) {
+          if (network !== foundHuriNetwork && changeActiveNetwork) {
+            setNetwork?.(foundHuriNetwork)
+            return
+          }
+
+          try {
+            const huriPayload = await huriInstance.fetch()
+            if (mounted()) {
+              if (huriPayload) {
+                setHuriPayload(huriPayload)
+                setHuriPayloadNotFound(false)
+              } else {
+                setHuriPayloadNotFound(true)
+              }
+            }
+          } catch (e) {
+            if (mounted()) {
+              setHuriPayloadNotFound(false)
+              setHuriPayload(undefined)
+              setHuriApiError(e as XyoApiError)
+            }
+          }
+        } else {
+          setHuriNetworkNotFound(true)
+        }
+      }
+    },
+    [huriUri, network, networks, dependentNotFound, setNetwork, changeActiveNetwork],
+  )
+
+  return [huriPayload, huriPayloadNotFound, huriApiError, huriNetworkNotFound]
+}
+
+export { useResolveHuri }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'