@xyo-network/react-api 2.32.0-rc.8 → 2.32.1

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

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