EMI-ExpoAPP/components/NewPost.js

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


let NewPost = ({ profileid, newPostCB }) => {
    let [postContent, setPostContent] = useState('');
    let [extraContent, setExtraContent] = useState([]);
    const navigation = useNavigation();
    const [photo, setPhoto] = React.useState(null);


    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.2,
            allowsMultipleSelection: true,
        });
        if (!result.canceled) {
            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 uploading the photo.");
            }
        });
        uploadedFiles = Promise.all(allUploads);
        return uploadedFiles;
    };

    const handleNewPostButton = async () => {
        //setPostContent('');
        API.newPost(postContent + " " + extraContent.join(" ")).then((newPost) => {
            setPostContent('');
            setExtraContent([]);
            if (newPostCB) newPostCB(newPost);
        });
    }


    return (
        <View style={styles.newPost}>
            <TextInput
                label={i18n.t("message.statusUpdate")}
                value={postContent}
                onChangeText={setPostContent}
                mode="outlined"
                multiline={true}
                numberOfLines={3}
            />
            {
                postContent ? (
                    <>
                        <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
                            <Button icon="add-a-photo" mode="outlined" onPress={pickImage} ></Button>
                            <Button icon="send" mode="outlined" onPress={handleNewPostButton}>{i18n.t("message.post")}</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(" ")} />
                            )
                        }
                    </>
                ) : undefined
            }

        </View>
    );
}

export default NewPost;

const styles = StyleSheet.create({
    newPost: {
        margin: 10,
        padding: 10,
    }
});