Merge pull request #1025 from jolocom/SW-621/user-sees-history-record…

…-after-interaction

SW-621 - user sees record after interaction ends on History screen

src/hooks/interactions/useAuthSubmit.ts

@@ -2,19 +2,19 @@ import { useInteraction } from './handlers'
 import { useCompleteInteraction } from './useCompleteInteraction'
 import { useAgent } from '../sdk'
 import { ScreenNames } from '~/types/screens'
+import { useRedirect } from '../navigation'
 
 const useAuthSubmit = () => {
   const getInteraction = useInteraction()
   const agent = useAgent()
+  const redirect = useRedirect()
   const { completeInteraction } = useCompleteInteraction(async () => {
     const interaction = await getInteraction()
     const authResponse = await interaction.createAuthenticationResponse()
     await agent.processJWT(authResponse)
     await interaction.send(authResponse)
 
-    return {
-      screenToNavigate: ScreenNames.History,
-    }
+    return redirect(ScreenNames.History, { id: interaction.id })
   })
 
   return completeInteraction

src/hooks/interactions/useAuthzSubmit.ts

@@ -2,19 +2,19 @@ import { useInteraction } from './handlers'
 import { useCompleteInteraction } from './useCompleteInteraction'
 import { useAgent } from '../sdk'
 import { ScreenNames } from '~/types/screens'
+import { useRedirect } from '../navigation'
 
 const useAuthzSubmit = () => {
   const getInteraction = useInteraction()
   const agent = useAgent()
+  const redirect = useRedirect()
   const { completeInteraction } = useCompleteInteraction(async () => {
     const interaction = await getInteraction()
     const authzResponse = await interaction.createAuthorizationResponse()
     await agent.processJWT(authzResponse)
     await interaction.send(authzResponse)
 
-    return {
-      screenToNavigate: ScreenNames.History,
-    }
+    return redirect(ScreenNames.History, { id: interaction.id })
   })
 
   return completeInteraction

src/hooks/interactions/useCredentialShareSubmit.ts

@@ -1,15 +1,18 @@
 import { useCredentialShareFlow } from './useCredentialShareFlow'
 import { useCompleteInteraction } from './useCompleteInteraction'
 import { ScreenNames } from '~/types/screens'
+import { useInteraction } from './handlers'
+import { useRedirect } from '../navigation'
 
 const useCredentialShareSubmit = () => {
+  const getInteraction = useInteraction()
   const { assembleShareResponseToken } = useCredentialShareFlow()
+  const redirect = useRedirect()
   const { completeInteraction } = useCompleteInteraction(async () => {
+    const interaction = await getInteraction()
     await assembleShareResponseToken()
 
-    return {
-      screenToNavigate: ScreenNames.History,
-    }
+    return redirect(ScreenNames.History, { id: interaction.id })
   })
 
   return completeInteraction

src/screens/LoggedIn/History/RecordItemsList.tsx

@@ -21,11 +21,22 @@ import { LoaderAnimation } from '~/components/LoaderAnimation/LoaderAnimation'
 
 const ITEMS_PER_PAGE = 5
 
-const RecordItemsList: React.FC<IRecordItemsListProps> = ({ id, flows }) => {
+const RecordItemsList: React.FC<IRecordItemsListProps> = ({
+  id,
+  itemId,
+  flows,
+}) => {
   const { t } = useTranslation()
   const sectionListRef = useRef<SectionList | null>(null)
   const { updateActiveSection } = useRecord()
 
+  useEffect(() => {
+    itemId && setFocusedItem(itemId)
+    return () => {
+      setFocusedItem(null)
+    }
+  }, [itemId])
+
   const [activeSection, setActiveSection] = useState('')
   const [interactions, setInteractions] = useState<IPreLoadedInteraction[]>([])
   const [page, setPage] = useState(0)
@@ -75,6 +86,7 @@ const RecordItemsList: React.FC<IRecordItemsListProps> = ({ id, flows }) => {
   useEffect(() => {
     getInteractionTokens(ITEMS_PER_PAGE, 0, flows)
       .then((tokens) => {
+        tokens.length && setFocusedItem(tokens[0].id)
         setTimeout(() => setLoaderType(LoaderTypes.empty), 200)
         setInteractions(tokens)
       })

src/screens/LoggedIn/History/index.tsx

@@ -1,10 +1,13 @@
 import { FlowType } from '@jolocom/sdk'
+import { RouteProp, useRoute } from '@react-navigation/native'
 import React from 'react'
 
 import ScreenContainer from '~/components/ScreenContainer'
 import TabsContainer from '~/components/Tabs/Container'
 import Tabs from '~/components/Tabs/Tabs'
 import useTranslation from '~/hooks/useTranslation'
+import { ScreenNames } from '~/types/screens'
+import { MainTabsParamList } from '../MainTabs'
 import Record from './Record'
 
 export enum RecordTypes {
@@ -15,6 +18,9 @@ export enum RecordTypes {
 
 const History = () => {
   const { t } = useTranslation()
+  const itemId =
+    useRoute<RouteProp<MainTabsParamList, ScreenNames.History>>().params?.id
+
   const SUBTABS = [
     { id: 'all', value: t('History.allTab') },
     { id: 'shared', value: t('History.sharedTab') },
@@ -43,7 +49,7 @@ const History = () => {
                   {/* ItemsList should have a param type: should be added once there is a
                     support for passing multiple interaction types to support all subtab usecase
                   */}
-                  <Record.ItemsList id="all" />
+                  <Record.ItemsList id="all" itemId={itemId} />
                 </Tabs.PersistChildren>
                 <Tabs.PersistChildren
                   isContentVisible={activeSubtab?.id === 'shared'}

src/screens/LoggedIn/History/types.ts

@@ -14,5 +14,6 @@ export interface IRecordItemProps {
 
 export interface IRecordItemsListProps {
   id: string
+  itemId?: string
   flows?: FlowType[]
 }

src/screens/LoggedIn/MainTabs.tsx

@@ -19,7 +19,7 @@ import { getAusweisInteractionDetails } from '~/modules/interaction/selectors'
 export type MainTabsParamList = {
   [ScreenNames.Identity]: undefined
   [ScreenNames.Documents]: undefined
-  [ScreenNames.History]: undefined
+  [ScreenNames.History]: { id?: string }
   [ScreenNames.Settings]: undefined
 }