feat(react-hooks): extend credential providers with format data

packages/react-hooks/src/CredentialProvider.tsx

@@ -1,30 +1,35 @@
-import type { RecordsState } from './recordUtils'
-import type { Agent, CredentialState } from '@aries-framework/core'
+import type { CombinedRecordsState, RecordsState } from './recordUtils'
+import type { Agent, CredentialState, GetFormatDataReturn, IndyCredentialFormat } from '@aries-framework/core'
 import type { PropsWithChildren } from 'react'
 
 import { CredentialExchangeRecord } from '@aries-framework/core'
 import { useState, createContext, useContext, useEffect, useMemo } from 'react'
 import * as React from 'react'
 
 import {
+  addCombinedRecord,
+  removeCombinedRecord,
+  updateCombinedRecord,
   recordsRemovedByType,
   recordsUpdatedByType,
   recordsAddedByType,
-  removeRecord,
-  updateRecord,
-  addRecord,
 } from './recordUtils'
 
-const CredentialContext = createContext<RecordsState<CredentialExchangeRecord> | undefined>(undefined)
+const CredentialContext = createContext<CombinedRecordsState<CredentialExchangeRecord> | undefined>(undefined)
 
-export const useCredentials = () => {
+export const useCombinedCredentials = () => {
   const credentialContext = useContext(CredentialContext)
   if (!credentialContext) {
     throw new Error('useCredentials must be used within a CredentialContextProvider')
   }
   return credentialContext
 }
 
+export const useCredentials = (): RecordsState<CredentialExchangeRecord> => {
+  const { records: combinedRecords, loading } = useCombinedCredentials()
+  return { records: combinedRecords.map(({ record }) => record), loading }
+}
+
 export const useCredentialById = (id: string): CredentialExchangeRecord | undefined => {
   const { records: credentials } = useCredentials()
   return credentials.find((c: CredentialExchangeRecord) => c.id === id)
@@ -39,20 +44,34 @@ export const useCredentialByState = (state: CredentialState): CredentialExchange
   return filteredCredentials
 }
 
+export const useFormatDataForCredentialById = (id: string): GetFormatDataReturn<[IndyCredentialFormat]> | undefined => {
+  const { records: combinedRecords } = useCombinedCredentials()
+  return combinedRecords.find(({ record: c }) => c.id === id)?.formatData
+}
+
 interface Props {
   agent: Agent | undefined
 }
 
 const CredentialProvider: React.FC<PropsWithChildren<Props>> = ({ agent, children }) => {
-  const [state, setState] = useState<RecordsState<CredentialExchangeRecord>>({
+  const [state, setState] = useState<CombinedRecordsState<CredentialExchangeRecord>>({
     records: [],
     loading: true,
   })
 
+  const combineRecord = async (record: CredentialExchangeRecord) => {
+    let formatData: GetFormatDataReturn<[IndyCredentialFormat]> = {}
+    if (agent) {
+      formatData = await agent.credentials.getFormatData(record.id)
+    }
+    return { record, formatData }
+  }
+
   const setInitialState = async () => {
     if (agent) {
       const records = await agent.credentials.getAll()
-      setState({ records, loading: false })
+      const combinedRecords = await Promise.all(records.map(combineRecord))
+      setState({ records: combinedRecords, loading: false })
     }
   }
 
@@ -62,17 +81,20 @@ const CredentialProvider: React.FC<PropsWithChildren<Props>> = ({ agent, childre
 
   useEffect(() => {
     if (!state.loading) {
-      const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(addRecord(record, state))
-      )
-
-      const credentialUpdated$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(updateRecord(record, state))
-      )
-
-      const credentialRemoved$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe((record) =>
-        setState(removeRecord(record, state))
-      )
+      const credentialAdded$ = recordsAddedByType(agent, CredentialExchangeRecord).subscribe(async (record) => {
+        const combinedRecord = await combineRecord(record)
+        return setState(addCombinedRecord(combinedRecord, state))
+      })
+
+      const credentialUpdated$ = recordsUpdatedByType(agent, CredentialExchangeRecord).subscribe(async (record) => {
+        const combinedRecord = await combineRecord(record)
+        setState(updateCombinedRecord(combinedRecord, state))
+      })
+
+      const credentialRemoved$ = recordsRemovedByType(agent, CredentialExchangeRecord).subscribe(async (record) => {
+        const combinedRecord = await combineRecord(record)
+        setState(removeCombinedRecord(combinedRecord, state))
+      })
 
       return () => {
         credentialAdded$?.unsubscribe()

packages/react-hooks/src/recordUtils.ts

@@ -5,6 +5,8 @@ import type {
   RecordUpdatedEvent,
   Agent,
   BaseEvent,
+  GetFormatDataReturn,
+  IndyCredentialFormat,
 } from '@aries-framework/core'
 import type { Constructor } from '@aries-framework/core/build/utils/mixins'
 
@@ -14,9 +16,20 @@ import { map, filter, pipe } from 'rxjs'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type BaseRecordAny = BaseRecord<any, any, any>
 type RecordClass<R extends BaseRecordAny> = Constructor<R> & { type: string }
+
+interface CombinedRecord<R extends BaseRecord> {
+  record: R
+  formatData: GetFormatDataReturn<[IndyCredentialFormat]>
+}
+
 export interface RecordsState<R extends BaseRecordAny> {
   loading: boolean
-  records: R[]
+  records: Array<R>
+}
+
+export interface CombinedRecordsState<R extends BaseRecordAny> {
+  loading: boolean
+  records: Array<CombinedRecord<R>>
 }
 
 export const addRecord = <R extends BaseRecordAny>(record: R, state: RecordsState<R>): RecordsState<R> => {
@@ -48,6 +61,46 @@ export const removeRecord = <R extends BaseRecordAny>(record: R, state: RecordsS
   }
 }
 
+export const addCombinedRecord = <R extends BaseRecordAny>(
+  combinedRecord: CombinedRecord<R>,
+  state: CombinedRecordsState<R>
+): CombinedRecordsState<R> => {
+  const newRecordsState = [...state.records]
+  newRecordsState.unshift(combinedRecord)
+  return {
+    loading: state.loading,
+    records: newRecordsState,
+  }
+}
+
+export const updateCombinedRecord = <R extends BaseRecordAny>(
+  combinedRecord: CombinedRecord<R>,
+  state: CombinedRecordsState<R>
+): CombinedRecordsState<R> => {
+  const { record } = combinedRecord
+  const newRecordsState = [...state.records]
+  const index = newRecordsState.findIndex(({ record: r }) => r.id === record.id)
+  if (index > -1) {
+    newRecordsState[index] = combinedRecord
+  }
+  return {
+    loading: state.loading,
+    records: newRecordsState,
+  }
+}
+
+export const removeCombinedRecord = <R extends BaseRecordAny>(
+  combinedRecord: CombinedRecord<R>,
+  state: CombinedRecordsState<R>
+): CombinedRecordsState<R> => {
+  const { record } = combinedRecord
+  const newRecordsState = state.records.filter(({ record: r }) => r.id !== record.id)
+  return {
+    loading: state.loading,
+    records: newRecordsState,
+  }
+}
+
 const filterByType = <R extends BaseRecordAny>(recordClass: RecordClass<R>) => {
   return pipe(
     map((event: BaseEvent) => (event.payload as Record<string, R>).record),