fix(INJI-286):Show VC detailed view in the Received Vc screen

screens/Home/ReceivedVcsTabController.ts

@@ -1,23 +1,49 @@
-import { useSelector } from '@xstate/react';
-import { useContext, useState } from 'react';
+import { useSelector, useInterpret } from '@xstate/react';
+import { useContext, useRef, useState } from 'react';
 import { ActorRefFrom } from 'xstate';
 import {
+  VcEvents,
   selectIsRefreshingReceivedVcs,
   selectReceivedVcs,
 } from '../../machines/vc';
 import { vcItemMachine } from '../../machines/vcItem';
 import { GlobalContext } from '../../shared/GlobalContext';
-import { HomeScreenTabProps } from './HomeScreen';
 import {
   ReceivedVcsTabEvents,
   ReceivedVcsTabMachine,
 } from './ReceivedVcsTabMachine';
+import { MyVcsTabEvents, MyVcsTabMachine } from './MyVcsTabMachine';
+import {
+  HomeScreenEvents,
+  HomeScreenMachine,
+  selectSelectedVc,
+  selectTabRefs,
+  selectViewingVc,
+} from './HomeScreenMachine';
 
-export function useReceivedVcsTab(props: HomeScreenTabProps) {
-  const service = props.service as ActorRefFrom<typeof ReceivedVcsTabMachine>;
-  const { appService } = useContext(GlobalContext);
+export function useReceivedVcsTab() {
   const [isVisible, setIsVisible] = useState(false);
-  const settingsService = appService.children.get('settings');
+
+  const { appService } = useContext(GlobalContext);
+  const machine = useRef(
+    HomeScreenMachine.withContext({
+      ...HomeScreenMachine.context,
+      serviceRefs: appService.getSnapshot().context.serviceRefs,
+    })
+  );
+  const service = useInterpret(machine.current);
+
+  const tabRefs = useSelector(service, selectTabRefs);
+
+  const selectedVc = useSelector(service, selectSelectedVc);
+
+  const isViewingVc = useSelector(service, selectViewingVc);
+
+  const ReceivedVcsService = tabRefs.receivedVcs as ActorRefFrom<
+    typeof ReceivedVcsTabMachine
+  >;
+  const myVcservice = tabRefs.myVcs as ActorRefFrom<typeof MyVcsTabMachine>;
+
   const vcService = appService.children.get('vc');
 
   return {
@@ -28,8 +54,17 @@ export function useReceivedVcsTab(props: HomeScreenTabProps) {
 
     TOGGLE_RECEIVED_CARDS: () => setIsVisible(!isVisible),
 
-    VIEW_VC: (vcItemActor: ActorRefFrom<typeof vcItemMachine>) =>
-      service.send(ReceivedVcsTabEvents.VIEW_VC(vcItemActor)),
-    REFRESH: () => service.send(ReceivedVcsTabEvents.REFRESH()),
+    VIEW_VC: (vcRef: ActorRefFrom<typeof vcItemMachine>) => {
+      return myVcservice.send(MyVcsTabEvents.VIEW_VC(vcRef));
+    },
+    isViewingVc,
+    selectedVc,
+    activeTab: 1,
+    DISMISS_MODAL: () => service.send(HomeScreenEvents.DISMISS_MODAL()),
+    REVOKE: () => {
+      vcService.send(VcEvents.REFRESH_MY_VCS());
+      service.send(HomeScreenEvents.DISMISS_MODAL());
+    },
+    REFRESH: () => ReceivedVcsService.send(ReceivedVcsTabEvents.REFRESH()),
   };
 }

screens/Settings/ReceivedCards.tsx

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { RefreshControl } from 'react-native';
-import { Pressable, TouchableOpacity } from 'react-native';
-import { Centered, Column, Row, Text } from '../../components/ui';
+import { Pressable } from 'react-native';
+import { Centered, Column, Text } from '../../components/ui';
 import { Icon } from 'react-native-elements';
 import { Theme } from '../../components/ui/styleUtils';
 import { Image } from 'react-native';
 import { Modal } from '../../components/ui/Modal';
-import { HomeScreenTabProps } from '../Home/HomeScreen';
 import { useReceivedVcsTab } from '../Home/ReceivedVcsTabController';
 import { VcItem } from '../../components/VcItem';
+import { ViewVcModal } from '../Home/ViewVcModal';
 
-export const ReceivedCards: React.FC<HomeScreenTabProps> = (props) => {
+export const ReceivedCards: React.FC = () => {
   const { t } = useTranslation('ReceivedVcsTab');
-  const controller = useReceivedVcsTab(props);
+  const controller = useReceivedVcsTab();
 
   return (
     <React.Fragment>
@@ -71,6 +71,15 @@ export const ReceivedCards: React.FC<HomeScreenTabProps> = (props) => {
             </React.Fragment>
           )}
         </Column>
+        {controller.selectedVc && (
+          <ViewVcModal
+            isVisible={controller.isViewingVc}
+            onDismiss={controller.DISMISS_MODAL}
+            vcItemActor={controller.selectedVc}
+            onRevokeDelete={() => console.log('revoke')}
+            activeTab={controller.activeTab}
+          />
+        )}
       </Modal>
     </React.Fragment>
   );

screens/Settings/SettingScreen.tsx

@@ -64,8 +64,10 @@ export const SettingScreen: React.FC<
         headerTitle={t('header')}
         headerElevation={2}
         onDismiss={controller.TOGGLE_SETTINGS}>
-        <ScrollView backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
-          <Column style={{ display: Platform.OS !== 'ios' ? 'flex' : 'none' }}>
+        <ScrollView>
+          <Column
+            style={{ display: Platform.OS !== 'ios' ? 'flex' : 'none' }}
+            backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
             <Text
               weight="semibold"
               margin="10"
@@ -86,11 +88,7 @@ export const SettingScreen: React.FC<
                   </Text>
                 </Column>
               </Pressable>
-              <ReceivedCards
-                isVisible={false}
-                service={undefined}
-                vcItemActor={undefined}
-              />
+              <ReceivedCards />
             </Row>
 
             <Text