Upload images for posts

components/NewPost.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Image } from 'react-native';
+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';
 
 
 let NewPost = ({ profileid, newPostCB }) => {
     let [postContent, setPostContent] = useState('');
+    let [extraContent, setExtraContent] = useState([]);
     const navigation = useNavigation();
     const [photo, setPhoto] = React.useState(null);
 
@@ -23,7 +25,11 @@ let NewPost = ({ profileid, newPostCB }) => {
         });
         if (!result.cancelled) {
             setPhoto(result);
-            await handleUploadPhoto(result);
+            let newPhotoURL = await handleUploadPhoto(result);
+            let newExtraContent = ["@image:" + newPhotoURL].concat(extraContent);
+            setExtraContent(newExtraContent);
+            console.log(newExtraContent.join(" "));
+            setPhoto(null);
         }
     };
 
@@ -44,23 +50,33 @@ let NewPost = ({ profileid, newPostCB }) => {
             type,
         });
         try {
-            fetch("https://social.emmint.com/upload.php", {
+            let 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;
-            })
-            .catch((err) => console.error(err));
+                .then((res) => res.json())
+                .then((data) => {
+                    console.log(data);
+                    return data.fileName;
+                })
+                .catch((err) => console.error(err));
+            return uploadedFile;
         } catch (err) {
             console.log(err);
             alert("Something went wrong");
         }
+
     };
 
+    const handleNewPostButton = async () => {
+        //setPostContent('');
+        API.newPost(postContent + " " + extraContent.join(" ")).then((newPost) => {
+            setPostContent('');
+            setExtraContent([]);
+            if (newPostCB) newPostCB(newPost);
+        });
+    }
 
 
     return (
@@ -77,25 +93,22 @@ let NewPost = ({ profileid, newPostCB }) => {
                     <>
                         <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
                             <Button icon="add-a-photo" mode="outlined" onPress={pickImage} ></Button>
-                            <Button icon="send" mode="outlined" onPress={() => {
-                                setPostContent('');
-                                API.newPost(postContent).then((newPost) => {
-                                    setPostContent('');
-                                    if (newPostCB) newPostCB(newPost);
-                                });
-                            }}>Post</Button>
+                            <Button icon="send" mode="outlined" onPress={handleNewPostButton}>Post</Button>
                         </View>
                         {photo && (
-
                             <View>
+                                <Text>Uploading...</Text>
                                 <Image
                                     source={{ uri: photo.uri }}
-                                    style={{ width: 300, height: 300 }}
+                                    style={{ width: 100, height: 100 }}
                                 />
-                                <Button title="Upload Photo" onPress={handleUploadPhoto} />
                             </View>
-
                         )}
+                        {
+                            extraContent.length > 0 && (
+                                <Media content={extraContent.join(" ")} />
+                            )
+                        }
                     </>
                 ) : undefined
             }