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 [updateKey, setUpdateKey] = React.useState(0);
    const [description, setDescription] = React.useState(viewer.profile.description);

    const pickImage = async () => {
        // 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.7,
            //allowsMultipleSelection: true,
        });
        if (!result.cancelled) {
            setPhoto(result);
            let newPhotoURL = await handleUploadPhoto(result);
            if(newPhotoURL !== ""){
                setphotoUrl(newPhotoURL);
                GlobalState.me.profile.photo = newPhotoURL;
                setUpdateKey(updateKey+1);
            }
            setPhoto(null);
        }
    };

    const handleUploadPhoto = async (photo) => {
        if (!photo) return;
        const uri =
            Platform.OS === "android"
                ? photo.uri
                : photo.uri.replace("file://", "");
        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) => {
                    return data.fileName;
                })
                .catch((err) => console.error(err));
        } catch (err) {
            console.log(err);
            alert("Something went wrong");
        }
        return uploadedFile;
    };

    let updateProfile = () => {
        GlobalState.me.profile.firstName = name;
        GlobalState.me.profile.lastName = lastName;
        GlobalState.me.profile.description = description;
        API.updateMyProfile(viewer.profile, viewer.data);
        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='en' style={{flexDirection:"row"}}>
                        <RadioButton.Item value="es" label="Español"/>
                        <RadioButton.Item value="en" label="English"/>
                    </RadioButton.Group>
                </View>
                <Button icon="photo" mode="outlined" onPress={pickImage} >{i18n.t("message.updatePhoto")}</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;