Fix profile settings update flow and improve editor UX
This commit is contained in:
Adolfo Reyna
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user