EMI-ExpoAPP/Views/NewPost.js

import React, { useEffect, useState } from 'react';
import { View, TextInput, Image } from "react-native";
import { Text, Button, Divider } from "react-native-paper";
import { SafeAreaView } from "react-native-safe-area-context";
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import i18n from "../i18nMessages";
import Media from '../components/Media';


let NewPostView = (props) => {
    let [postContent, setPostContent] = useState('');
    let [extraContent, setExtraContent] = useState([]);
    let [toProfile, setToProfile] = useState([]);
    const [photo, setPhoto] = React.useState(null);
    const navigation = useNavigation();

    useEffect(() => {
        let subscribed = true;
        const getProfileData = async () => {
            if (!props.route.params?.toProfile) return 0;
            await API.getUserProfile(props.route.params.toProfile).then((profileObj) => {
                if (!subscribed) return 0;
                setToProfile(profileObj);
            });
        };
        getProfileData();
        return () => {
            subscribed = false;
        }
    }, []);

    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 newPhotoURLs = await handleUploadPhoto(result);
            let newExtraContent = [extraContent]
            newPhotoURLs.forEach((newPhotoURL) => {
                newExtraContent = ["@image:" + newPhotoURL].concat(newExtraContent);
            });
            setExtraContent(newExtraContent);
            setPhoto(null);
        }
    };

    const handleUploadPhoto = async (results) => {
        if (!results) return;
        let allUploads = [];
        results.assets.forEach(photo => {
            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,
            });
            try {
                allUploads.push(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");
            }
        });
        uploadedFiles = Promise.all(allUploads);
        return uploadedFiles;
    };

    const handleNewPostButton = async () => {
        //setPostContent('');
        API.newPost(postContent + " " + extraContent.join(" "), props.route.params?.toProfile).then((newPost) => {
            setPostContent('');
            setExtraContent([]);
            navigation.navigate('Feed', {reRender: Math.random()});
            //if (newPostCB) newPostCB(newPost);
        });
    }

    return (
            <View style={{ padding: 10, paddingTop: 20, flex:1, justifyContent:"center"}}>
                <View style={{ flexDirection: "row", marginBottom: 10, justifyContent: "space-around" }}>
                    <Text style={{ fontSize: 25 }}>{i18n.t("message.statusUpdate")}:</Text>
                    <Button icon="send" mode="outlined" onPress={handleNewPostButton}>
                        {i18n.t("message.post")}
                    </Button>
                </View>
                {
                    toProfile._id ?
                        <Text style={{ paddingLeft: 10, paddingBottom: 5 }}>
                            Posting on: {toProfile._id ? toProfile.profile.firstName + " " + toProfile.profile.lastName : ''}
                        </Text> : <></>
                }
                <Divider bold={true} />
                <TextInput
                    value={postContent}
                    onChangeText={setPostContent}
                    multiline={true}
                    numberOfLines={8}
                    style={{
                        backgroundColor: "rgba(0,0,0,0)",
                        textAlignVertical: "center",
                        textAlign: "center",
                        fontSize: 20,
                        minHeight: 100
                    }}
                    autoFocus={true}
                />
                <Divider bold={true} />
                <View style={{ flexDirection: "row", marginTop: 10, justifyContent: "space-around" }}>
                    <Button icon="add-a-photo" mode="outlined" onPress={pickImage}>
                        Add Photos
                    </Button>
                </View>
                {photo && (
                    <View>
                        <Text>Uploading...</Text>
                        <Image
                            source={{ uri: photo.uri }}
                            style={{ width: 100, height: 100 }}
                        />
                    </View>
                )}
                {
                    extraContent.length > 0 && (
                        <Media content={extraContent.join(" ")} />
                    )
                }
            </View>
    )
}

export default NewPostView;