Refresh profile from server and return after update

Views/ProfileSettings.js

@@ -10,10 +10,12 @@ import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 import API from "../API.js";
 import * as ImagePicker from 'expo-image-picker';
+import { useNavigation } from '@react-navigation/native';
 
 
 
 let ProfileSettings = () => {
+    const navigation = useNavigation();
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
     const viewerProfile = viewer?.profile || {};
@@ -64,8 +66,10 @@ let ProfileSettings = () => {
                 setphotoUrl(newPhotoURL);
                 if (!GlobalState.me.profile) GlobalState.me.profile = {};
                 GlobalState.me.profile.photo = newPhotoURL;
-                await updateProfile({ photo: newPhotoURL });
+                await updateProfile({ photo: newPhotoURL }, false);
                 setUpdateKey((k) => k + 1);
+            } else {
+                alert("Could not upload photo. Please try another image.");
             }
             setPhoto(null);
             setUploading(false);
@@ -74,17 +78,17 @@ let ProfileSettings = () => {
 
     const handleUploadPhoto = async (photo) => {
         console.log(photo)
-        if (!photo) return;
+        if (!photo) return '';
         const uri =
             Platform.OS === "android"
                 ? photo.uri
                 : photo.uri.replace("file://", "");
 
         console.log(uri);
-        const filename = photo.uri.split("/").pop();
+        const filename = photo.uri.split("/").pop() || "image.jpg";
         const match = /\.(\w+)$/.exec(filename);
-        const ext = match?.[1];
-        const type = match ? `image/${match[1]}` : `image`;
+        const ext = (match?.[1] || "jpg").toLowerCase();
+        const type = ext === "heic" || ext === "heif" ? "image/heic" : `image/${ext}`;
         const formData = new FormData();
         formData.append("banner", {
             uri,
@@ -101,7 +105,7 @@ let ProfileSettings = () => {
                 .then((res) => res.json())
                 .then((data) => {
                     console.log(data);
-                    return data.fileName;
+                    return data?.fileName || '';
                 });
             console.log(uploadedFile);
         } catch (err) {
@@ -111,7 +115,7 @@ let ProfileSettings = () => {
         return uploadedFile;
     };
 
-    let updateProfile = async (overrides = {}) => {
+    let updateProfile = async (overrides = {}, goBackAfter = true) => {
         let currentProfile = {};
         let currentData = {};
         try {
@@ -156,6 +160,9 @@ let ProfileSettings = () => {
         }
         console.log(r);
         setUpdateKey((k) => k + 1);
+        if (goBackAfter) {
+            navigation.goBack();
+        }
     }
 
     return (
@@ -219,7 +226,7 @@ let ProfileSettings = () => {
                 </View>
                 <Button
                     mode="contained"
-                    onPress={updateProfile}
+                    onPress={() => updateProfile({}, true)}
                     buttonColor="#c44d56"
                     textColor="#ffffff"
                     style={{ marginTop: 8 }}