Fix profile settings update flow and improve editor UX
This commit is contained in:
Adolfo Reyna
4
API.js
4
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){
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import { View, ImageBackground, ScrollView, Picker } from "react-native";
|
||||
import { Text, TextInput, Button, Divider, Checkbox, RadioButton } from "react-native-paper";
|
||||
import { View, ImageBackground, ScrollView, Platform } from "react-native";
|
||||
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()
|
||||
setUpdateKey(updateKey + 1);
|
||||
await updateProfile({ photo: newPhotoURL });
|
||||
setUpdateKey((k) => k + 1);
|
||||
}
|
||||
setPhoto(null);
|
||||
setUploading(false);
|
||||
@@ -91,27 +111,51 @@ let ProfileSettings = () => {
|
||||
return uploadedFile;
|
||||
};
|
||||
|
||||
let updateProfile = async () => {
|
||||
let currentProfile = await API.getUserProfile(viewer?._id);
|
||||
const currentData = currentProfile?.data || {};
|
||||
currentProfile = currentProfile?.profile || {};
|
||||
let updateProfile = async (overrides = {}) => {
|
||||
let currentProfile = {};
|
||||
let currentData = {};
|
||||
try {
|
||||
//let currentProfile = JSON.parse(JSON.stringify(viewer.profile));
|
||||
currentProfile.firstName = name;
|
||||
currentProfile.lastName = lastName;
|
||||
currentProfile.description = description;
|
||||
currentProfile.language = language;
|
||||
currentProfile.photo = photoUrl;
|
||||
currentData = JSON.parse(JSON.stringify(viewer?.data || {}));
|
||||
} catch (_) {
|
||||
currentData = {};
|
||||
}
|
||||
try {
|
||||
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>
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<RadioButton.Group value={language} onValueChange={setLanguage} style={{ flexDirection: "row" }}>
|
||||
<RadioButton.Item value="es" label="Español" />
|
||||
<RadioButton.Item value="en" label="English" />
|
||||
<RadioButton.Item value="da" label="Danish" />
|
||||
<RadioButton.Item value="fr" label="French" />
|
||||
</RadioButton.Group>
|
||||
<Text style={{ marginBottom: 4 }}>Language:</Text>
|
||||
<View style={{ marginBottom: 10 }}>
|
||||
<Menu
|
||||
visible={languageMenuVisible}
|
||||
onDismiss={() => setLanguageMenuVisible(false)}
|
||||
anchor={
|
||||
<Button mode="outlined" onPress={() => setLanguageMenuVisible(true)}>
|
||||
{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>
|
||||
<Divider />
|
||||
<View style={{ paddingTop: 10 }}>
|
||||
<Text style={{ fontSize: 20, padding: 5, color: "#666" }}>Preview:</Text>
|
||||
<ProfileCardHorizontal profileObj={GlobalState.me} skipFollow={true} skiptOnPress={true} key={updateKey} />
|
||||
</View>
|
||||
<Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={updateProfile}
|
||||
buttonColor="#c44d56"
|
||||
textColor="#ffffff"
|
||||
style={{ marginTop: 8 }}
|
||||
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>
|
||||
)
|
||||
|
||||
@@ -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={{
|
||||
height: 300
|
||||
}} />
|
||||
<TouchableOpacity activeOpacity={canEditProfileImage ? 0.8 : 1} onPress={handlePressPhoto}>
|
||||
<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} />
|
||||
|
||||
Reference in New Issue
Block a user