EMI-ExpoAPP/Views/ProfileSettings.js

import React from "react";
import { View, ImageBackground, ScrollView, Picker } from "react-native";
import { Text, TextInput, Button, Divider, Checkbox, RadioButton } from "react-native-paper";
import i18n from "../i18nMessages.js";
import Moment from 'moment';
import 'moment/min/locales';
import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";
Moment.locale(i18n.locale);
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import API from "../API.js";
import * as ImagePicker from 'expo-image-picker';



let ProfileSettings = () => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    const [photo, setPhoto] = React.useState(null);
    const [name, setName] = React.useState(viewer.profile.firstName);
    const [lastName, setLastName] = React.useState(viewer.profile.lastName);
    const [photoUrl, setphotoUrl] = React.useState(viewer.profile.photo);
    const [language, setLanguage] = React.useState(viewer.profile.language);
    const [updateKey, setUpdateKey] = React.useState(0);
    const [description, setDescription] = React.useState(viewer.profile.description);
    const [uploading, setUploading] = React.useState(false);

    const pickImage = async () => {
        if (uploading) return;
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 0.5,
            //allowsMultipleSelection: true,
        });
        if (!result.canceled) {
            setUploading(true);
            setPhoto(result);
            let newPhotoURL = await handleUploadPhoto(result.assets[0]);
            if (newPhotoURL !== "") {
                setphotoUrl(newPhotoURL);
                GlobalState.me.profile.photo = newPhotoURL;
                updateProfile()
                setUpdateKey(updateKey + 1);
            }
            setPhoto(null);
            setUploading(false);
        }
    };

    const handleUploadPhoto = async (photo) => {
        console.log(photo)
        if (!photo) return;
        const uri =
            Platform.OS === "android"
                ? photo.uri
                : photo.uri.replace("file://", "");

        console.log(uri);
        const filename = photo.uri.split("/").pop();
        const match = /\.(\w+)$/.exec(filename);
        const ext = match?.[1];
        const type = match ? `image/${match[1]}` : `image`;
        const formData = new FormData();
        formData.append("banner", {
            uri,
            name: `image.${ext}`,
            type,
        });
        let uploadedFile = '';
        try {
            uploadedFile = await fetch("https://social.emmint.com/upload.php", {
                method: "POST",
                body: formData,
                headers: { "Content-Type": "multipart/form-data" }
            })
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    return data.fileName;
                });
            console.log(uploadedFile);
        } catch (err) {
            console.log(err);
            alert("Something went wrong uploading the photo.");
        }
        return uploadedFile;
    };

    let updateProfile = async () => {
        let currentProfile = await API.getUserProfile(viewer._id)
        currentData = currentProfile.data;
        currentProfile = currentProfile.profile;
        try {
            //let currentProfile = JSON.parse(JSON.stringify(viewer.profile));
            currentProfile.firstName = name;
            currentProfile.lastName = lastName;
            currentProfile.description = description;
            currentProfile.language = language;
            currentProfile.photo = photoUrl;
            console.log("updating", currentProfile);
        } catch (error) {
            alert("Error updating profile, contact administrator.");
            return;
        }
        let r = await API.updateMyProfile(currentProfile, currentData).catch((e) => {
            alert("Error updating profile, contact administrator.");
        });
        console.log(r);
        setUpdateKey(updateKey + 1);
    }

    return (
        <ScrollView style={{
            padding: 10,
        }}>
            <ImageBackground source={require("../assets/settings.png")}
                imageStyle={{ resizeMode: "contain", opacity: 0.05 }}
                style={{ paddingBottom: 50 }}
            >
                <Text style={{ marginBottom: 10, fontSize: 20 }}>Profile Settings</Text>
                <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                    <TextInput
                        label={i18n.t("message.name")}
                        style={{ width: "48%", backgroundColor: "rgba(0,0,0,0)" }}
                        value={name}
                        onChangeText={text => setName(text)}
                    />
                    <TextInput
                        label={i18n.t("message.lastName")}
                        style={{ width: "48%", backgroundColor: "rgba(0,0,0,0)" }}
                        value={lastName}
                        onChangeText={text => setLastName(text)}
                    />
                </View>
                <TextInput
                    label={i18n.t("message.description")}
                    style={{ backgroundColor: "rgba(0,0,0,0)", marginBottom: 5 }}
                    multiline={true}
                    numberOfLines={3}
                    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>
                </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>
                <Divider />
                <Text style={{ fontSize: 20, padding: 5, color: "#666" }}>{i18n.t("message.optional")}:</Text>
                <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
                    <Checkbox.Item status={'unchecked'} label="Married" />
                    <Checkbox.Item status={'unchecked'} label="With Kids" />
                </View>
                <Text>{i18n.t("message.birthday")}</Text>
                <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                    <TextInput
                        label={"Day:"}
                        style={{ width: "48%", backgroundColor: "rgba(0,0,0,0)" }}
                    //value={name}
                    //onChangeText={text => setName(text)}
                    />
                    <TextInput
                        label={"Month:"}
                        style={{ width: "48%", backgroundColor: "rgba(0,0,0,0)" }}
                    //value={lastName}
                    //onChangeText={text => setLastName(text)}
                    />
                </View>
                <TextInput
                    label={i18n.t("message.localMinistry")}
                    style={{ backgroundColor: "rgba(0,0,0,0)" }}
                //value={lastName}
                //onChangeText={text => setLastName(text)}
                />
                <TextInput
                    label={i18n.t("message.country")}
                    style={{ backgroundColor: "rgba(0,0,0,0)" }}
                //value={lastName}
                //onChangeText={text => setLastName(text)}
                />
                <TextInput
                    label={i18n.t("message.ocupation")}
                    style={{ backgroundColor: "rgba(0,0,0,0)" }}
                //value={lastName}
                //onChangeText={text => setLastName(text)}
                />
                <Button mode="outlined" onPress={updateProfile}>{i18n.t("message.update")}</Button>
            </ImageBackground>
        </ScrollView>
    )
}

export default ProfileSettings;