From 233020f5b36cbca0cd5664291382dbd9faadeaff Mon Sep 17 00:00:00 2001
From: "quan.vo" <quan.vo@wizeline.com>
Date: Tue, 24 Sep 2024 15:13:51 +0700
Subject: [PATCH] Back to homescreen after upload file successfull in file
 detail screen

---
 app/(tabs)/_layout.tsx         | 20 ++++++++++----------
 app/(tabs)/home/[fileName].tsx |  8 ++++++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index e9e93d6..be341e4 100644
--- a/app/(tabs)/_layout.tsx
+++ b/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}
diff --git a/app/(tabs)/home/[fileName].tsx b/app/(tabs)/home/[fileName].tsx
index c8e44f3..25b936c 100644
--- a/app/(tabs)/home/[fileName].tsx
+++ b/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)
           }