WALLET-577: Back to homeScreen after upload file successful in file detail screen

app/(tabs)/_layout.tsx

@@ -14,7 +14,7 @@
 // limitations under the License.
 //
 
-import { Tabs } from "expo-router";
+import { router, Tabs } from "expo-router";
 import type { MutableRefObject } from "react";
 import React, { useRef, useState } from "react";
 import HouseOutLine from "@/assets/images/house-outline.svg";
@@ -34,8 +34,6 @@ import {
 } from "react-native";
 import PopupMenu from "@/components/PopupMenu";
 import { ThemedText } from "@/components/ThemedText";
-import { fetchFiles } from "@/api/files";
-import { useQueryClient } from "@tanstack/react-query";
 
 const { width, height } = Dimensions.get("window");
 
@@ -45,7 +43,6 @@ export default function TabLayout() {
   const [positionType, setPositionType] = useState<
     "topMiddle" | "bottomLeft" | "bottomMiddle"
   >("bottomMiddle");
-  const queryClient = useQueryClient();
   const tabBarAddButtonRef = useRef(null);
   const rightHeaderAddButtonRef = useRef(null);
   const toggleMenu = (
@@ -109,6 +106,7 @@ export default function TabLayout() {
           name="home"
           options={{
             title: "Home",
+            href: "/home",
             tabBarIcon: ({ color, focused }) =>
               focused ? (
                 <FontAwesome6 size={24} name="house" color={color} />
@@ -195,12 +193,14 @@ export default function TabLayout() {
       </Tabs>
       <PopupMenu
         visible={menuVisible}
-        onClose={() => toggleMenu("topMiddle", rightHeaderAddButtonRef)}
-        onUploadSuccess={async () => {
-          await queryClient.fetchQuery({
-            queryKey: ["files"],
-            queryFn: fetchFiles,
-          });
+        onClose={() => {
+          toggleMenu(
+            "topMiddle",
+            tabBarAddButtonRef || rightHeaderAddButtonRef
+          );
+        }}
+        onUploadSuccess={() => {
+          router.replace("/home");
         }}
         position={menuPosition}
         positionType={positionType}

app/(tabs)/accesses/_layout.tsx

@@ -15,18 +15,24 @@
 //
 import { Stack } from "expo-router";
 import React from "react";
+import Loading from "@/components/LoadingButton";
+import { useIsMutating } from "@tanstack/react-query";
 
 export default function TabLayout() {
+  const isMutatingFiles = useIsMutating({ mutationKey: ["filesMutation"] });
   return (
-    <Stack
-      screenOptions={{
-        headerShadowVisible: false,
-        headerTitleStyle: { fontFamily: "ReadexPro-Regular" },
-        headerTitleAlign: "center",
-      }}
-    >
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="[webId]" options={{ headerShown: true }} />
-    </Stack>
+    <>
+      <Stack
+        screenOptions={{
+          headerShadowVisible: false,
+          headerTitleStyle: { fontFamily: "ReadexPro-Regular" },
+          headerTitleAlign: "center",
+        }}
+      >
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="[webId]" options={{ headerShown: true }} />
+      </Stack>
+      <Loading isLoading={!!isMutatingFiles} />
+    </>
   );
 }

app/(tabs)/home/[fileName].tsx

@@ -15,7 +15,7 @@
 //
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { View, StyleSheet, TouchableOpacity, Image } from "react-native";
-import { useQuery } from "@tanstack/react-query";
+import { useIsMutating, useQuery } from "@tanstack/react-query";
 import { getFile } from "@/api/files";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import { faEllipsis } from "@fortawesome/free-solid-svg-icons/faEllipsis";
@@ -27,6 +27,7 @@ import { Colors } from "@/constants/Colors";
 import VcCard from "@/components/files/VcCard";
 import BottomModal from "@/components/files/BottomModal";
 import type { WalletFile } from "@/types/WalletFile";
+import Loading from "@/components/LoadingButton";
 
 interface FileDetailProps {
   file: WalletFile;
@@ -46,6 +47,8 @@ const blobToBase64 = (blob: Blob): Promise<string> => {
 };
 
 const Page: React.FC<FileDetailProps> = () => {
+  const isMutatingFiles = useIsMutating({ mutationKey: ["filesMutation"] });
+
   const { fileName, isRDFResourceStr, identifier } = useLocalSearchParams();
   const isRDFResource: boolean = isRDFResourceStr === "true";
   const [imageUri, setImageUri] = useState<string | null>(null);
@@ -114,6 +117,7 @@ const Page: React.FC<FileDetailProps> = () => {
         />
       )}
       {isRDFResource && data && <VcCard data={data} />}
+      <Loading isLoading={!!isMutatingFiles} />
       <BottomSheetModal
         enableDismissOnClose
         ref={bottomSheetModalRef}
@@ -135,7 +139,7 @@ const Page: React.FC<FileDetailProps> = () => {
             isRDFResource,
           }}
           onCloseModal={() => bottomSheetModalRef.current?.close()}
-          onDeleteSuccessfully={() => goBack()}
+          onDeleteSuccessfully={goBack}
           onChangeSnapPoint={(snapHeight: number) =>
             bottomSheetModalRef.current?.snapToPosition(snapHeight)
           }

app/(tabs)/profile.tsx

@@ -22,13 +22,14 @@ import Logo from "@/assets/images/future_co.svg";
 import { faEllipsis } from "@fortawesome/free-solid-svg-icons/faEllipsis";
 import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons/faRightFromBracket";
 
-import { useQuery } from "@tanstack/react-query";
+import { useIsMutating, useQuery } from "@tanstack/react-query";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import { BottomSheetModal, BottomSheetView } from "@gorhom/bottom-sheet";
 import type { UserInfo } from "@/constants/user";
 import AccessSolid from "@/assets/images/access-solid.svg";
 import { formatResourceName } from "@/utils/fileUtils";
 import { getUserInfo } from "@/api/user";
+import Loading from "@/components/LoadingButton";
 
 export default function Profile() {
   const { data: userInfo, refetch } = useQuery<UserInfo>({
@@ -69,6 +70,8 @@ export default function Profile() {
     });
   }, [navigation]);
 
+  const isMutatingFiles = useIsMutating({ mutationKey: ["filesMutation"] });
+
   const { logo, name, webId } = userInfo || {};
 
   return (
@@ -105,6 +108,7 @@ export default function Profile() {
           <QRCode size={226} value={webId} backgroundColor="#E7F1F7" />
         </View>
       </View>
+      <Loading isLoading={!!isMutatingFiles} />
       <BottomSheetModal
         enableDismissOnClose
         ref={bottomSheetModalRef}

app/(tabs)/requests/_layout.tsx

@@ -15,20 +15,26 @@
 //
 import { Stack } from "expo-router";
 import React from "react";
+import { useIsMutating } from "@tanstack/react-query";
+import Loading from "@/components/LoadingButton";
 
 export default function TabLayout() {
+  const isMutatingFiles = useIsMutating({ mutationKey: ["filesMutation"] });
   return (
-    <Stack
-      screenOptions={{
-        headerShadowVisible: false,
-        headerTitleStyle: { fontFamily: "ReadexPro-Regular" },
-      }}
-    >
-      <Stack.Screen
-        name="index"
-        options={{ headerShown: false, headerTitleAlign: "center" }}
-      />
-      <Stack.Screen name="[requestId]" />
-    </Stack>
+    <>
+      <Stack
+        screenOptions={{
+          headerShadowVisible: false,
+          headerTitleStyle: { fontFamily: "ReadexPro-Regular" },
+        }}
+      >
+        <Stack.Screen
+          name="index"
+          options={{ headerShown: false, headerTitleAlign: "center" }}
+        />
+        <Stack.Screen name="[requestId]" />
+      </Stack>
+      <Loading isLoading={!!isMutatingFiles} />
+    </>
   );
 }