Fix profile settings update flow and improve editor UX

API.js

@@ -304,6 +304,10 @@ const API = {
         return getCall("/user/" + CurrentProfile);
     },
     updateMyProfile(profile, data) {
+        if (CurrentProfile) {
+            delete userNameCache[CurrentProfile];
+            delete failedProfileCache[CurrentProfile];
+        }
         return postCall("/user/myProfile", {profile, data});
     },
     searchProfiles(query){

Views/ProfileSettings.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { View, ImageBackground, ScrollView, Picker } from "react-native";
+import { View, ImageBackground, ScrollView, Platform } from "react-native";
-import { Text, TextInput, Button, Divider, Checkbox, RadioButton } from "react-native-paper";
+import { Text, TextInput, Button, Divider, Checkbox, Menu } from "react-native-paper";
 import i18n from "../i18nMessages.js";
 import Moment from 'moment';
 import 'moment/min/locales';
@@ -25,6 +25,26 @@ let ProfileSettings = () => {
     const [updateKey, setUpdateKey] = React.useState(0);
     const [description, setDescription] = React.useState(viewerProfile.description || "");
     const [uploading, setUploading] = React.useState(false);
+    const [languageMenuVisible, setLanguageMenuVisible] = React.useState(false);
+    const previewProfile = {
+        ...(GlobalState.me || {}),
+        profile: {
+            ...(GlobalState.me?.profile || {}),
+            firstName: name,
+            lastName: lastName,
+            description: description,
+            language: language,
+            photo: photoUrl,
+        },
+    };
+
+    const languageOptions = [
+        { value: "es", label: "Español" },
+        { value: "en", label: "English" },
+        { value: "da", label: "Danish" },
+        { value: "fr", label: "French" },
+    ];
+    const currentLanguageLabel = languageOptions.find((opt) => opt.value === language)?.label || "English";
 
     const pickImage = async () => {
         if (uploading) return;
@@ -44,8 +64,8 @@ let ProfileSettings = () => {
                 setphotoUrl(newPhotoURL);
                 if (!GlobalState.me.profile) GlobalState.me.profile = {};
                 GlobalState.me.profile.photo = newPhotoURL;
-                updateProfile()
+                await updateProfile({ photo: newPhotoURL });
-                setUpdateKey(updateKey + 1);
+                setUpdateKey((k) => k + 1);
             }
             setPhoto(null);
             setUploading(false);
@@ -91,27 +111,51 @@ let ProfileSettings = () => {
         return uploadedFile;
     };
 
-    let updateProfile = async () => {
+    let updateProfile = async (overrides = {}) => {
-        let currentProfile = await API.getUserProfile(viewer?._id);
+        let currentProfile = {};
-        const currentData = currentProfile?.data || {};
+        let currentData = {};
-        currentProfile = currentProfile?.profile || {};
         try {
-            //let currentProfile = JSON.parse(JSON.stringify(viewer.profile));
+            currentData = JSON.parse(JSON.stringify(viewer?.data || {}));
-            currentProfile.firstName = name;
+        } catch (_) {
-            currentProfile.lastName = lastName;
+            currentData = {};
-            currentProfile.description = description;
+        }
-            currentProfile.language = language;
+        try {
-            currentProfile.photo = photoUrl;
+            currentProfile = {
+                firstName: name,
+                lastName: lastName,
+                description,
+                language,
+                photo: overrides.photo ?? photoUrl,
+            };
             console.log("updating", currentProfile);
         } catch (error) {
             alert("Error updating profile, contact administrator.");
             return;
         }
         let r = await API.updateMyProfile(currentProfile, currentData).catch((e) => {
+            console.error("Profile update request failed", e);
             alert("Error updating profile, contact administrator.");
+            return null;
         });
+        if (!r || r.status !== "ok") {
+            console.error("Profile update unexpected response", r);
+            return alert("Error updating profile, contact administrator.");
+        }
+        const refreshedProfile = await API.getUserProfile(viewer?._id, true).catch(() => null);
+        if (refreshedProfile && refreshedProfile._id) {
+            GlobalState.me = {
+                ...GlobalState.me,
+                ...refreshedProfile,
+            };
+        } else {
+            if (!GlobalState.me.profile) GlobalState.me.profile = {};
+            GlobalState.me.profile = {
+                ...GlobalState.me.profile,
+                ...currentProfile,
+            };
+        }
         console.log(r);
-        setUpdateKey(updateKey + 1);
+        setUpdateKey((k) => k + 1);
     }
 
     return (
@@ -122,7 +166,12 @@ let ProfileSettings = () => {
                 imageStyle={{ resizeMode: "contain", opacity: 0.05 }}
                 style={{ paddingBottom: 50 }}
             >
-                <Text style={{ marginBottom: 10, fontSize: 20 }}>Profile Settings</Text>
+                <View style={{ paddingTop: 10 }}>
+                    <ProfileCardHorizontal profileObj={previewProfile} skipFollow={true} skiptOnPress={true} key={updateKey} />
+                </View>
+                <Text style={{ marginBottom: 10, marginTop: 10, fontSize: 20 }}>Profile Setting</Text>
+                <Button icon="photo" mode="outlined" onPress={pickImage}>{!uploading ? i18n.t("message.updatePhoto") : "uploading"}</Button>
+                <Divider />
                 <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                     <TextInput
                         label={i18n.t("message.name")}
@@ -145,22 +194,40 @@ let ProfileSettings = () => {
                     value={description}
                     onChangeText={text => setDescription(text)}
                 />
-                <Text>Language:</Text>
+                <Text style={{ marginBottom: 4 }}>Language:</Text>
-                <View style={{ flexDirection: "row" }}>
+                <View style={{ marginBottom: 10 }}>
-                    <RadioButton.Group value={language} onValueChange={setLanguage} style={{ flexDirection: "row" }}>
+                    <Menu
-                        <RadioButton.Item value="es" label="Español" />
+                        visible={languageMenuVisible}
-                        <RadioButton.Item value="en" label="English" />
+                        onDismiss={() => setLanguageMenuVisible(false)}
-                        <RadioButton.Item value="da" label="Danish" />
+                        anchor={
-                        <RadioButton.Item value="fr" label="French" />
+                            <Button mode="outlined" onPress={() => setLanguageMenuVisible(true)}>
-                    </RadioButton.Group>
+                                {currentLanguageLabel}
+                            </Button>
+                        }
+                    >
+                        {languageOptions.map((option) => (
+                            <Menu.Item
+                                key={option.value}
+                                title={option.label}
+                                onPress={() => {
+                                    setLanguage(option.value);
+                                    setLanguageMenuVisible(false);
+                                }}
+                            />
+                        ))}
+                    </Menu>
                 </View>
-                <Button icon="photo" mode="outlined" onPress={pickImage}>{!uploading ? i18n.t("message.updatePhoto") : "uploading"}</Button>
+                <Button
-                <Divider />
+                    mode="contained"
-                <View style={{ paddingTop: 10 }}>
+                    onPress={updateProfile}
-                    <Text style={{ fontSize: 20, padding: 5, color: "#666" }}>Preview:</Text>
+                    buttonColor="#c44d56"
-                    <ProfileCardHorizontal profileObj={GlobalState.me} skipFollow={true} skiptOnPress={true} key={updateKey} />
+                    textColor="#ffffff"
-                </View>
+                    style={{ marginTop: 8 }}
-                <Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
+                    contentStyle={{ paddingVertical: 6 }}
+                >
+                    {i18n.t("message.update")}
+                </Button>
+                {/*
                 <Divider />
                 <Text style={{ fontSize: 20, padding: 5, color: "#666" }}>{i18n.t("message.optional")}:</Text>
                 <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
@@ -201,6 +268,7 @@ let ProfileSettings = () => {
                 //onChangeText={text => setLastName(text)}
                 />
                 <Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
+                */}
             </ImageBackground>
         </ScrollView>
     )

components/ProfileHeader.js

@@ -1,21 +1,39 @@
 import React, { useState, useEffect } from 'react';
-import { View, Share } from 'react-native';
+import { View, Share, TouchableOpacity } from 'react-native';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import UserName from './UserName';
 import FollowButton from './basics/FollowButton';
+import { useNavigation } from '@react-navigation/native';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
 const ProfileHeader = ({ profileObj }) => {
+    const navigation = useNavigation();
+    const viewer = useSnapshot(GlobalState).me || {};
     const safeProfileObj = profileObj || {};
     const safeProfile = safeProfileObj.profile || {};
     let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo + '?width=1000&height=1000' : DefaultPhoto;
+    const canEditProfileImage = !!(
+        safeProfileObj?._id &&
+        !safeProfileObj?.isGroup &&
+        String(safeProfileObj._id) === String(viewer?._id || '')
+    );
+
+    const handlePressPhoto = () => {
+        if (!canEditProfileImage) return;
+        navigation.navigate("ProfileSettings");
+    };
+
     return (
         <>
             <Card elevation={3}>
-                <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
+                <TouchableOpacity activeOpacity={canEditProfileImage ? 0.8 : 1} onPress={handlePressPhoto}>
-                    height: 300
+                    <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
-                }} />
+                        height: 300
+                    }} />
+                </TouchableOpacity>
                 <Card.Content style={{}}>
                     <Title style={{ position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10 }}>
                         <UserName profileid={safeProfileObj._id} />