New Comment

components/NewComment.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Icon } from 'react-native';
+import { TextInput, Button } from 'react-native-paper';
+import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
+
+
+let NewComment = ({ postid, newComentAdded }) => {
+    let [commentContent, setCommentContent] = useState('');
+    const navigation = useNavigation();
+
+    return (
+        <View style={styles.NewComment}>
+            <TextInput
+                label="New Comment"
+                value={commentContent}
+                onChangeText={setCommentContent}
+                mode="outlined"
+                multiline={true}
+                dense={true}
+                style={{
+                    flex: 8,
+                    fontSize: 12,
+                }}
+            />
+            <View style={{
+                flex: 2,
+                fontSize: 12,
+                flexDirection: "column",
+                alignItems: "center", // ignore this - we'll come back to it
+                justifyContent: "center",
+            }}>
+                <Button mode="outlined" onPress={() => {
+                    if (commentContent.trim() === "") return 0;
+                    setCommentContent('');
+                    API.newPostComment(postid, commentContent).then((newPost) => {
+                        setCommentContent('');
+                        if(newComentAdded) newComentAdded(newPost);
+                    });
+                }}>
+                    <AwesomeIcon name="send" />
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+export default NewComment;
+
+const styles = StyleSheet.create({
+    NewComment: {
+        margin: 10,
+        flexDirection: "row",
+        flex: 6
+    }
+});