feat: credential list footer component injectable (openwallet-foundat…

…ion#1266) Signed-off-by: fc-santos <[email protected]>
fullboar · Oct 1, 2024 · 16ed1fc · 16ed1fc
1 parent a657da4
commit 16ed1fc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/packages/legacy/core/App/container-api.ts b/packages/legacy/core/App/container-api.ts
@@ -18,6 +18,7 @@ import { Config } from './types/config'
 import { NotificationReturnType, NotificationsInputProps } from './hooks/notifications'
 import { NotificationListItemProps } from './components/listItems/NotificationListItem'
 import { PINCreateHeaderProps } from './components/misc/PINCreateHeader'
+import { CredentialListFooterProps } from './types/credential-list-footer'
 
 export type FN_ONBOARDING_DONE = (
   dispatch: React.Dispatch<ReducerAction<unknown>>,
@@ -67,6 +68,7 @@ export const FN_TOKENS = {
   FN_ONBOARDING_DONE: 'fn.onboardingDone',
   COMPONENT_CRED_LIST_HEADER_RIGHT: 'fn.credListHeaderRight',
   COMPONENT_CRED_LIST_OPTIONS: 'fn.credListOptions',
+  COMPONENT_CRED_LIST_FOOTER: 'fn.credListFooter',
 } as const
 
 export const HISTORY_TOKENS = {
@@ -164,6 +166,7 @@ export type TokenMapping = {
   [TOKENS.CONFIG]: Config
   [TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT]: React.FC
   [TOKENS.COMPONENT_CRED_LIST_OPTIONS]: React.FC
+  [TOKENS.COMPONENT_CRED_LIST_FOOTER]: React.FC<CredentialListFooterProps>
   [TOKENS.COMPONENT_HOME_HEADER]: React.FC
   [TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST]: React.FC
   [TOKENS.COMPONENT_HOME_FOOTER]: React.FC

diff --git a/packages/legacy/core/App/container-impl.ts b/packages/legacy/core/App/container-impl.ts
@@ -104,6 +104,7 @@ export class MainContainer implements Container {
     this._container.registerInstance(TOKENS.CONFIG, defaultConfig)
     this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT, () => null)
     this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_OPTIONS, () => null)
+    this._container.registerInstance(TOKENS.COMPONENT_CRED_LIST_FOOTER, () => null)
     this._container.registerInstance(TOKENS.COMPONENT_HOME_HEADER, HomeHeaderView)
     this._container.registerInstance(TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST, NoNewUpdates)
     this._container.registerInstance(TOKENS.COMPONENT_HOME_FOOTER, HomeFooterView)

diff --git a/packages/legacy/core/App/index.ts b/packages/legacy/core/App/index.ts
@@ -47,6 +47,7 @@ import Scan from './screens/Scan'
 import Onboarding from './screens/Onboarding'
 import { PINRules } from './constants'
 import NotificationListItem from './components/listItems/NotificationListItem'
+import { CredentialListFooterProps } from './types/credential-list-footer'
 
 export * from './types/attestation'
 export { LocalStorageKeys } from './constants'
@@ -103,6 +104,7 @@ export type {
   Migration as MigrationState,
   Tours as ToursState,
 } from './types/state'
+export type { CredentialListFooterProps }
 export * from './container-api'
 export { MainContainer } from './container-impl'
 

diff --git a/packages/legacy/core/App/screens/ListCredentials.tsx b/packages/legacy/core/App/screens/ListCredentials.tsx
@@ -16,14 +16,22 @@ import { CredentialStackParams, Screens } from '../types/navigators'
 import { TourID } from '../types/tour'
 import { TOKENS, useServices } from '../container-api'
 import { EmptyListProps } from '../components/misc/EmptyList'
+import { CredentialListFooterProps } from '../types/credential-list-footer'
 
 const ListCredentials: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
-  const [CredentialListOptions, credentialEmptyList, {
-    enableTours: enableToursConfig,
-    credentialHideList,
-  }] = useServices([TOKENS.COMPONENT_CRED_LIST_OPTIONS, TOKENS.COMPONENT_CRED_EMPTY_LIST, TOKENS.CONFIG])
+  const [
+    CredentialListOptions,
+    credentialEmptyList,
+    credentialListFooter,
+    { enableTours: enableToursConfig, credentialHideList },
+  ] = useServices([
+    TOKENS.COMPONENT_CRED_LIST_OPTIONS,
+    TOKENS.COMPONENT_CRED_EMPTY_LIST,
+    TOKENS.COMPONENT_CRED_LIST_FOOTER,
+    TOKENS.CONFIG,
+  ])
   const navigation = useNavigation<StackNavigationProp<CredentialStackParams>>()
   const { ColorPallet } = useTheme()
   const { start } = useTour()
@@ -34,6 +42,7 @@ const ListCredentials: React.FC = () => {
   ]
 
   const CredentialEmptyList = credentialEmptyList as React.FC<EmptyListProps>
+  const CredentialListFooter = credentialListFooter as React.FC<CredentialListFooterProps>
 
   // Filter out hidden credentials when not in dev mode
   if (!store.preferences.developerModeEnabled) {
@@ -78,6 +87,7 @@ const ListCredentials: React.FC = () => {
           )
         }}
         ListEmptyComponent={() => <CredentialEmptyList message={t('Credentials.EmptyList')} />}
+        ListFooterComponent={() => <CredentialListFooter credentialsCount={credentials.length} />}
       />
       <CredentialListOptions />
     </View>

diff --git a/packages/legacy/core/App/types/credential-list-footer.ts b/packages/legacy/core/App/types/credential-list-footer.ts
@@ -0,0 +1,3 @@
+export interface CredentialListFooterProps {
+  credentialsCount: number
+}