fix: add more accurate loading status for image upload

src/helpers/images.tsx

@@ -26,6 +26,7 @@ export const uploadImgToFirebase = async (
 ): Promise<string> => {
   try {
     setLoading && setLoading(true);
+    console.log("ayam");
 
     const blob: Blob = await new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();

src/redux/user/actions.tsx

@@ -19,13 +19,9 @@ export const getUser = (uid: string) => {
 
 export const setProfilePic = (url: string, id: string) => {
   return async (dispatch: Dispatch<any>) => {
-    try {
-      await userService.addProfilePic(url, id);
+    await userService.addProfilePic(url, id);
 
-      dispatch({ type: "SET_PIC", payload: { pic: url } });
-    } catch (e) {
-      console.log(e);
-    }
+    return dispatch({ type: "SET_PIC", payload: { pic: url } });
   };
 };
 

src/screens/profile/AccountSettingsScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import { Button, StyleSheet, Image, ActivityIndicator } from "react-native";
+import {
+  Button,
+  StyleSheet,
+  Image,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
 import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
 import PlainForm from "../../components/Forms/PlainForm";
 import { useState } from "react";
@@ -29,13 +35,19 @@ export default function AccountSettingsScreen({
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
   const handlePickImage = () => {
-    setIsLoading(true);
+    // setIsLoading(true);
     pickImage().then((res) => {
       if (!res.cancelled) {
+        setIsLoading(true);
         const { uri } = res as ImageInfo;
         uploadImgToFirebase(uri, `profile/${user.id}`).then((res) => {
-          dispatch(setProfilePic(res, user.id));
-          setIsLoading(false);
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+          dispatch(setProfilePic(res, user.id))
+            .then(() => setIsLoading(false))
+            .catch(() => {
+              setIsLoading(false);
+              Alert.alert("Error", "failed to upload image");
+            });
         });
       }
     });