@xyo-network/react-payload 2.23.7

package/src/components/Details/ValidationDetails/ValidationDetailsProps.ts

@@ -0,0 +1,9 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+
+export interface PayloadValidationDetailsProps extends FlexBoxProps {
+  skipBody?: boolean
+  skipMeta?: boolean
+  value?: XyoPayload
+  viewSchemaUrl?: string
+}

package/src/components/Details/ValidationDetails/index.ts

@@ -0,0 +1,2 @@
+export * from './ValidationDetails'
+export * from './ValidationDetailsProps'

package/src/components/Details/index.ts

@@ -0,0 +1,5 @@
+export * from './DataDetails'
+export * from './Details'
+export * from './JsonDetails'
+export * from './MetaDetails'
+export * from './ValidationDetails'

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -0,0 +1,28 @@
+export type PayloadTableColumnSlug = 'hash' | 'archive' | 'client' | 'date' | 'time' | 'schema' | 'valid'
+
+export interface PayloadTableColumnConfig {
+  xs?: PayloadTableColumnSlug[]
+  sm?: PayloadTableColumnSlug[]
+  md?: PayloadTableColumnSlug[]
+  lg?: PayloadTableColumnSlug[]
+  xl?: PayloadTableColumnSlug[]
+}
+
+export const payloadColumnNames: Record<PayloadTableColumnSlug, string> = {
+  archive: 'Archive',
+  client: 'Client',
+  date: 'Date',
+  hash: 'Hash',
+  schema: 'Schema',
+  time: 'Time',
+  valid: 'Valid',
+}
+
+export const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig => {
+  const xs: PayloadTableColumnSlug[] = ['hash']
+  const sm: PayloadTableColumnSlug[] = ['hash', 'valid']
+  const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'time', 'valid']
+  const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'archive', 'date', 'time', 'valid']
+  const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'archive', 'client', 'date', 'time', 'valid']
+  return { lg, md, sm, xl, xs }
+}

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { appThemeDecorator, samplePayload } from '../../.storybook'
+import { PayloadTable } from './Table'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadTable,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Payload/Table',
+} as ComponentMeta<typeof PayloadTable>
+
+const Template: ComponentStory<typeof PayloadTable> = (args) => (
+  <BrowserRouter>
+    <PayloadTable {...args}></PayloadTable>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { payloads: [samplePayload, samplePayload] }
+WithData.decorators = [appThemeDecorator]
+
+const WithError = Template.bind({})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { _hash, ...badPayload } = samplePayload
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+WithError.args = { payloads: [samplePayload, badPayload] }
+
+export { Default, WithData, WithError }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -0,0 +1,63 @@
+import { Alert, Table, TableBody, TableCell, TableHead, TableProps, TableRow, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
+import { ScrollTableOnSm } from '@xyo-network/react-shared'
+
+import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
+import { PayloadTableRow } from './TableRow'
+
+export interface PayloadTableProps extends TableProps {
+  exploreDomain?: string
+  onRowClick?: (value: XyoPayload) => void
+  payloads?: XyoPayload[] | null
+  columns?: PayloadTableColumnConfig
+}
+
+export const PayloadTable: React.FC<PayloadTableProps> = ({ exploreDomain, onRowClick, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
+  const breakPoint = useBreakpoint()
+  return breakPoint ? (
+    <ScrollTableOnSm>
+      <Table {...props}>
+        <TableHead>
+          <TableRow>
+            {columns[breakPoint]?.map((column, index) => {
+              return (
+                <TableCell key={index} width={index > 0 ? '10px' : undefined} align={index === 0 ? 'left' : 'center'}>
+                  <Typography variant="caption" noWrap>
+                    <strong>{payloadColumnNames[column]}</strong>
+                  </Typography>
+                </TableCell>
+              )
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {payloads?.map((payload, index) => (
+            <XyoApiThrownErrorBoundary
+              key={`${payload._hash}-${payload._timestamp}-${index}`}
+              errorComponent={(e) => (
+                <Alert severity="error">
+                  Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+                </Alert>
+              )}
+            >
+              <PayloadTableRow
+                onClick={
+                  onRowClick
+                    ? () => {
+                        onRowClick(payload)
+                      }
+                    : undefined
+                }
+                exploreDomain={exploreDomain}
+                payload={payload}
+              />
+            </XyoApiThrownErrorBoundary>
+          ))}
+          {children}
+        </TableBody>
+      </Table>
+    </ScrollTableOnSm>
+  ) : null
+}

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,96 @@
+import { TableCell, TableRow, TableRowProps, Typography } from '@mui/material'
+import { useBreakpoint } from '@xylabs/sdk-react'
+import { XyoPayload, XyoPayloadWrapper, XyoPayloadWrapperValidator } from '@xyo-network/core'
+import { useNetwork } from '@xyo-network/react-network'
+import { HashTableCell } from '@xyo-network/react-shared'
+import { DateTime } from 'luxon'
+import { ReactElement } from 'react'
+import { MdClear, MdDone } from 'react-icons/md'
+
+import { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig'
+
+export interface PayloadTableRowProps extends TableRowProps {
+  payload?: XyoPayload
+  exploreDomain?: string
+  columns?: PayloadTableColumnConfig
+  network?: string
+}
+
+export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({ exploreDomain, network: networkProp, payload, columns = payloadTableColumnConfigDefaults(), ...props }) => {
+  const breakPoint = useBreakpoint()
+  const timeStamp = payload?._timestamp ? DateTime.fromMillis(payload?._timestamp) : undefined
+  const wrapper = payload ? new XyoPayloadWrapper(payload) : undefined
+  const { network } = useNetwork()
+
+  const archive = (
+    <TableCell key="archive" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {payload?._archive}
+      </Typography>
+    </TableCell>
+  )
+
+  const client = (
+    <TableCell key="client" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {payload?._client}
+      </Typography>
+    </TableCell>
+  )
+
+  const date = (
+    <TableCell key="date" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {timeStamp?.toLocaleString(DateTime.DATE_SHORT)}
+      </Typography>
+    </TableCell>
+  )
+
+  const hash = (
+    <HashTableCell key="hash" value={payload?._hash} archive={payload?._archive} dataType="payload" exploreDomain={exploreDomain} network={networkProp ?? network?.slug} />
+  )
+
+  const schema = (
+    <TableCell key="payloads" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {payload?.schema}
+      </Typography>
+    </TableCell>
+  )
+
+  const time = (
+    <TableCell key="time" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {timeStamp?.toLocaleString(DateTime.TIME_SIMPLE)}
+      </Typography>
+    </TableCell>
+  )
+
+  const isValid = wrapper ? new XyoPayloadWrapperValidator(wrapper).all().length === 0 : undefined
+
+  const valid = (
+    <TableCell key="valid" align="center">
+      <Typography fontFamily="monospace" variant="body2" noWrap>
+        {isValid === undefined ? <MdDone fontSize={18} color="yellow" /> : isValid ? <MdDone fontSize={18} color="green" /> : <MdClear color="red" fontSize={18} />}
+      </Typography>
+    </TableCell>
+  )
+
+  const tableCells: Record<PayloadTableColumnSlug, ReactElement> = {
+    archive,
+    client,
+    date,
+    hash,
+    schema,
+    time,
+    valid,
+  }
+
+  return breakPoint ? (
+    <TableRow style={{ maxWidth: '100vw' }} {...props}>
+      {columns[breakPoint]?.map((column) => {
+        return tableCells[column]
+      })}
+    </TableRow>
+  ) : null
+}

package/src/components/Table/index.ts

@@ -0,0 +1,3 @@
+export * from './PayloadTableColumnConfig'
+export * from './Table'
+export * from './TableRow'

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Details'
+export * from './Table'

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './lib'
+export * from './useGetSchema'
+export * from './useHuriHash'
+export * from './usePayload'
+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 { Huri } from '@xyo-network/core'
+import { XyoNetworkPayload } from '@xyo-network/network'
+
+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/useGetSchema.stories.tsx

@@ -0,0 +1,70 @@
+import { FormControl, TextField, Typography } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol, FlexRow } from '@xylabs/sdk-react'
+import { XyoSchemaCache } from '@xyo-network/utils'
+import { lazy, Suspense, useEffect, useState } from 'react'
+
+import { useGetSchemaPayload } from './useGetSchema'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+XyoSchemaCache.instance.proxy = 'https://beta.api.archivist.xyo.network/domain'
+
+const UseGetSchemaComponent: React.FC<{ schema: string }> = ({ schema }) => {
+  const exampleSchemas = ['network.xyo.domain', 'network.xyo.payload', 'network.xyo.schema']
+  const [schemaFieldValue, setSchemaFieldValue] = useState('')
+  const { schemaPayload } = useGetSchemaPayload(schemaFieldValue)
+
+  useEffect(() => {
+    if (schema) {
+      setSchemaFieldValue(schema)
+    }
+  }, [schema])
+
+  return (
+    <>
+      <Typography variant="body1" fontWeight="bold" mb={2}>
+        Example schemas to test:
+        {exampleSchemas.map((schema, index) => (
+          <Typography component="span" mx={1} key={index} onClick={() => setSchemaFieldValue(schema)} sx={{ cursor: 'pointer', textDecoration: 'underline' }}>
+            {schema}
+          </Typography>
+        ))}
+      </Typography>
+      <FormControl>
+        <TextField value={schemaFieldValue} label="Schema Name" onChange={(e) => setSchemaFieldValue(e.target.value)} />
+      </FormControl>
+      <FlexRow my={3} justifyContent="start">
+        <Suspense fallback={<FlexCol busy />}>
+          <JsonView src={schemaPayload || {}} />
+        </Suspense>
+      </FlexRow>
+    </>
+  )
+}
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: UseGetSchemaComponent,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'hooks/useGetSchema',
+}
+
+const Template: ComponentStory<typeof UseGetSchemaComponent> = ({ schema }) => {
+  return <UseGetSchemaComponent schema={schema} />
+}
+
+const Default = Template.bind({})
+Default.args = { schema: 'network.xyo.schema' }
+
+const Domain = Template.bind({})
+Domain.args = { schema: 'network.xyo.domain' }
+
+export { Default, Domain }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/useGetSchema.tsx

@@ -0,0 +1,51 @@
+import { useAsyncEffect } from '@xylabs/sdk-react'
+import { XyoApiError } from '@xyo-network/api'
+import { XyoPayloadBuilder } from '@xyo-network/core'
+import { XyoSchemaCache, XyoSchemaCacheEntry } from '@xyo-network/utils'
+import { useState } from 'react'
+
+/**
+ * Gets a Huri and schema payload from a schema string
+ */
+const useGetSchemaPayload = (schema?: string) => {
+  const [notFound, setNotFound] = useState(false)
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [schemaCacheEntry, setSchemaCacheEntry] = useState<XyoSchemaCacheEntry | null | undefined>()
+  const [schemaLocal, setSchemaLocal] = useState<string>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      const firstRequest = !notFound && !schemaCacheEntry && !apiError
+      const schemaChanged = schema !== schemaLocal
+
+      if ((schema && firstRequest) || (schema && schemaChanged)) {
+        try {
+          const schemaCacheEntry = await XyoSchemaCache.instance.get(schema)
+          if (mounted()) {
+            setSchemaCacheEntry(schemaCacheEntry)
+            setNotFound(schemaCacheEntry === null || schemaCacheEntry === undefined)
+          }
+        } catch (e) {
+          console.error(e)
+          if (mounted()) {
+            setApiError(e as XyoApiError)
+          }
+        }
+      }
+      if (schemaChanged) {
+        setSchemaLocal(schema)
+      }
+    },
+    [apiError, notFound, schema, schemaLocal, schemaCacheEntry]
+  )
+
+  return {
+    apiError,
+    notFound,
+    schemaHuri: schemaCacheEntry?.huri,
+    schemaPayload: schemaCacheEntry ? new XyoPayloadBuilder(schemaCacheEntry?.payload).fields(schemaCacheEntry.payload).build() : schemaCacheEntry,
+  }
+}
+
+export { useGetSchemaPayload }

package/src/hooks/useHuriHash.stories.tsx

@@ -0,0 +1,68 @@
+import { Typography } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol } from '@xylabs/sdk-react'
+import { Huri } from '@xyo-network/core'
+import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
+import { XyoSchemaCache } from '@xyo-network/utils'
+import { lazy, Suspense } from 'react'
+
+import { useHuriHash } from './useHuriHash'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+interface UseHuriHashComponentProps {
+  huriOrHash: string | Huri
+}
+
+const apiDomain = 'https://beta.api.archivist.xyo.network'
+const hash = '5605fabad11b10bb5fb86b309ca0970894eda8f22362dda1a489817723bca992'
+XyoSchemaCache.instance.proxy = `${apiDomain}/domain`
+
+const Wrapper: React.FC<UseHuriHashComponentProps> = ({ huriOrHash }) => (
+  <ArchivistApiProvider apiDomain={apiDomain}>
+    <UseHuriHashComponent huriOrHash={huriOrHash} />
+  </ArchivistApiProvider>
+)
+
+const UseHuriHashComponent: React.FC<UseHuriHashComponentProps> = ({ huriOrHash }) => {
+  const [payload] = useHuriHash(huriOrHash)
+
+  return (
+    <>
+      <Typography variant="body1" fontWeight="bold">
+        Fetches the payload for a huriOrHash.
+      </Typography>
+      <FlexCol my={3}>
+        <Suspense fallback={<FlexCol busy />}>
+          <JsonView src={payload || {}} />
+        </Suspense>
+      </FlexCol>
+    </>
+  )
+}
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: UseHuriHashComponent,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'hooks/useHuriHash',
+}
+
+const Template: ComponentStory<typeof UseHuriHashComponent> = ({ huriOrHash }) => {
+  return <Wrapper huriOrHash={huriOrHash} />
+}
+
+const Default = Template.bind({})
+Default.args = { huriOrHash: hash }
+
+const WithHuri = Template.bind({})
+WithHuri.args = { huriOrHash: new Huri(`${apiDomain}/${hash}`) }
+
+export { Default, WithHuri }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/useHuriHash.tsx

@@ -0,0 +1,27 @@
+import { XyoApiError } from '@xyo-network/api'
+import { Huri, XyoPayload } from '@xyo-network/core'
+import { useCallback } from 'react'
+
+import { FetchHuriHashOptions } from './lib'
+import { usePayload } from './usePayload'
+import { useResolveHuri } from './useResolveHuri'
+
+const useHuriHash = (huriOrHash?: string | Huri, huriUri?: string, options?: FetchHuriHashOptions): [XyoPayload | undefined, boolean, XyoApiError | undefined] => {
+  const hash = useCallback((huriOrHash?: string | Huri) => {
+    if (huriOrHash) {
+      if (typeof huriOrHash === 'string') {
+        return huriOrHash
+      }
+      if (huriOrHash instanceof Huri) {
+        return huriOrHash.hash
+      }
+    }
+  }, [])
+
+  const [payload, notFound, apiError] = usePayload(hash(huriOrHash))
+  const [huriPayload, huriPayloadNotFound, huriApiError] = useResolveHuri(huriUri, notFound, options)
+
+  return [payload ?? huriPayload, huriPayloadNotFound, apiError ?? huriApiError]
+}
+
+export { useHuriHash }

package/src/hooks/usePayload.tsx

@@ -0,0 +1,39 @@
+import { useAsyncEffect } from '@xylabs/sdk-react'
+import { XyoApiError } from '@xyo-network/api'
+import { XyoPayload } from '@xyo-network/core'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { useState } from 'react'
+
+export const usePayload = (hash?: string): [XyoPayload | undefined, boolean, XyoApiError | undefined] => {
+  const { api } = useArchivistApi()
+  const { archive } = useArchive()
+  const [notFound, setNotFound] = useState(false)
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [payload, setPayload] = useState<XyoPayload>()
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (hash && hash.length > 0) {
+        try {
+          const result = await api?.archive(archive).payload.hash(hash).get()
+          if (mounted()) {
+            setApiError(undefined)
+            if (result?.length) {
+              setPayload(result[0])
+            } else if (result) {
+              setNotFound(true)
+              setPayload(undefined)
+            }
+          }
+        } catch (e) {
+          setApiError(e as XyoApiError)
+          setPayload(undefined)
+          console.error(e)
+        }
+      }
+    },
+    [hash, api, archive]
+  )
+  return [payload, notFound, apiError]
+}

package/src/hooks/useResolveHuri.tsx

@@ -0,0 +1,59 @@
+import { useAsyncEffect } from '@xylabs/sdk-react'
+import { XyoApiError } from '@xyo-network/api'
+import { Huri, XyoPayload } from '@xyo-network/core'
+import { XyoNetworkPayload } from '@xyo-network/network'
+import { useNetwork } from '@xyo-network/react-network'
+import { useState } from 'react'
+
+import { FetchHuriHashOptions, findHuriNetwork } from './lib'
+
+const useResolveHuri = (huriUri?: string, dependentNotFound?: boolean, options?: FetchHuriHashOptions): [XyoPayload | undefined, boolean, XyoApiError | undefined] => {
+  const { network, networks, setNetwork } = useNetwork()
+  const [huriNetwork, setHuriNetwork] = useState<XyoNetworkPayload>()
+  const [huriPayload, setHuriPayload] = useState<XyoPayload>()
+  const [huriPayloadNotFound, setHuriPayloadNotFound] = useState(false)
+  const [huriApiError, setHuriApiError] = useState<XyoApiError>()
+
+  const { changeActiveNetwork } = options ?? {}
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if ((dependentNotFound === undefined || dependentNotFound) && huriUri && network !== huriNetwork) {
+        const huriInstance = new Huri(huriUri)
+
+        const foundHuriNetwork = findHuriNetwork(huriInstance, networks)
+
+        // Update when we found a huri network and it doesn't match the current one
+        if (foundHuriNetwork && mounted()) {
+          setHuriNetwork(huriNetwork)
+          if (network !== foundHuriNetwork && changeActiveNetwork) {
+            setNetwork?.(foundHuriNetwork)
+            return
+          }
+
+          // If no matching network try to resolve the huri itself
+          try {
+            const huriPayload = await huriInstance.fetch()
+            if (mounted()) {
+              if (huriPayload) {
+                setHuriPayload(huriPayload)
+              } else {
+                setHuriPayloadNotFound(true)
+              }
+            }
+          } catch (e) {
+            if (mounted()) {
+              setHuriApiError(e as XyoApiError)
+            }
+          }
+        }
+      }
+    },
+    [huriNetwork, huriUri, network, networks, dependentNotFound, setNetwork, changeActiveNetwork]
+  )
+
+  return [huriPayload, huriPayloadNotFound, huriApiError]
+}
+
+export { useResolveHuri }

package/src/index.ts

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

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'