From 1fd925d753145a674a4b4416e09607a0cc079b23 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Thu, 15 Apr 2021 15:18:39 -0300
Subject: [PATCH] Add interface for composing a new direct message

---
 src/App.js                                  |   3 +-
 src/components/navigation/back-bar.js       |   6 +-
 src/components/pages/direct.js              |   3 +-
 src/components/pages/direct/conversation.js | 130 +++++++++++++-------
 4 files changed, 95 insertions(+), 47 deletions(-)

diff --git a/src/App.js b/src/App.js
index 80ccf0e..95c7949 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,7 @@ import DiscoverJsx from 'src/components/pages/discover';
 import SearchJsx from 'src/components/pages/discover/search';
 import ViewHashtagJsx from 'src/components/pages/discover/view-hashtag';
 import DirectJsx from "src/components/pages/direct";
-import ConversationJsx from "src/components/pages/direct/conversation";
+import ConversationJsx, { ComposeJsx } from "src/components/pages/direct/conversation";
 import NotificationsJsx from 'src/components/pages/profile/notifications';
 import UserListJsx from "src/components/pages/user-list.js";
 import SettingsJsx from "src/components/pages/profile/settings.js";
@@ -26,6 +26,7 @@ const Stack = createStackNavigator({
     Feed: { screen: FeedJsx, },
     Discover: { screen: DiscoverJsx },
     Direct: { screen: DirectJsx },
+    Compose: { screen: ComposeJsx },
     Conversation: { screen: ConversationJsx },
     Notifications: { screen: NotificationsJsx },
     Profile: { screen: ProfileJsx, },
diff --git a/src/components/navigation/back-bar.js b/src/components/navigation/back-bar.js
index 556ebd6..9faa4b6 100644
--- a/src/components/navigation/back-bar.js
+++ b/src/components/navigation/back-bar.js
@@ -28,6 +28,8 @@ const styles = {
 
         flexDirection: "row",
         alignItems: "center",
+        paddingLeft: 10,
+        paddingRight: 10,
     },
     rest: {
         flexGrow: 1,
@@ -37,7 +39,9 @@ const styles = {
         height: 30,
     },
     button: {
-        padding: 10,
+        paddingRight: 10,
+        paddingTop: 10,
+        paddingBottom: 10,
     },
 }
 
diff --git a/src/components/pages/direct.js b/src/components/pages/direct.js
index 60a5488..e50e1ed 100644
--- a/src/components/pages/direct.js
+++ b/src/components/pages/direct.js
@@ -123,7 +123,8 @@ const DirectJsx = ({ navigation }) => {
                         }
                     }/>
                 <TouchableOpacity
-                      style = { styles.form.compose }>
+                      style = { styles.form.compose }
+                      onPress = { () => { navigation.navigate("Compose") } }>
                     <Ionicons name = "md-create" size = { 24 } color = "black"/>
                 </TouchableOpacity>
             </View>
diff --git a/src/components/pages/direct/conversation.js b/src/components/pages/direct/conversation.js
index 909931e..d97c0ec 100644
--- a/src/components/pages/direct/conversation.js
+++ b/src/components/pages/direct/conversation.js
@@ -48,6 +48,71 @@ const TEST_MESSAGES = [
     { ...TEST_STATUS, id: 5 },
 ];
 
+const ConversationContainerJsx = (props) => (
+    <ContextJsx>
+        <View style = { { flex: 1 } }>
+            <BackBarJsx navigation = { props.navigation }>
+                { props.renderBackBar() }
+            </BackBarJsx>
+            <ScrollView>
+                { props.children }
+            </ScrollView>
+            <View style = { [ styles.row, styles.send.container ] }>
+                <TextInput
+                    placeholder = "Say something..."
+                    multiline
+                    value = { props.state.newMessage }
+                    style = { styles.input }
+                    onChangeText = {
+                        value => {
+                            props.setState({...props.state,
+                                newMessage: value,
+                            });
+                        }
+                    }/>
+                <TouchableOpacity
+                      style = { styles.send.button }
+                      onPress = { props.onSubmit }>
+                    <Ionicons
+                        name = "ios-send"
+                        size = { 24 }
+                        color = "black" />
+                </TouchableOpacity>
+            </View>
+        </View>
+    </ContextJsx>
+);
+
+const ComposeJsx = ({ navigation }) => {
+    const [state, setState] = useState({
+        accts: [],
+        newMessage: "",
+    });
+    const renderBackBar = () => (
+        <TextInput
+            style = { styles.input }
+            placeholder = "someone@example.tld, someone_else..."
+            onChangeText = {
+                (value) => {
+                    setState({...state,
+                        accts: value.split(",").map(acct => acct.trim())
+                    });
+                }
+            }/>
+    );
+
+    return <ConversationContainerJsx
+        renderBackBar = { renderBackBar }
+        navigation = { navigation }
+        state = { state }
+        setState = { setState }
+        onSubmit = {
+            () => {
+                // Create the conversation, navigate to conversation.js
+            }
+        }/>;
+};
+
 const ConversationJsx = ({ navigation }) => {
     const conversation = navigation.getParam("conversation", {});
     const [state, setState] = useState({
@@ -165,42 +230,19 @@ const ConversationJsx = ({ navigation }) => {
     };
 
     return (
-        <ContextJsx>
-            <View style = { { flex: 1 } }>
-                <BackBarJsx navigation = { navigation }>
-                    { renderBackBar() }
-                </BackBarJsx>
-                <ScrollView>
-                    { state.loaded
-                        ? <FlatList
-                            data = { state.messages }
-                            renderItem = { renderMessage }
-                            keyExtractor = { item => item.id }/>
-                        : <></>
-                    }
-                </ScrollView>
-                <View style = { [ styles.row, styles.send.container ] }>
-                    <TextInput
-                        placeholder = "Say something..."
-                        multiline
-                        value = { state.newMessage }
-                        style = { styles.send.input }
-                        onChangeText = {
-                            value => {
-                                setState({...state,
-                                    newMessage: value,
-                                });
-                            }
-                        }/>
-                    <TouchableOpacity style = { styles.send.button }>
-                        <Ionicons
-                            name = "ios-send"
-                            size = { 24 }
-                            color = "black" />
-                    </TouchableOpacity>
-                </View>
-            </View>
-        </ContextJsx>
+        <ConversationContainerJsx
+              renderBackBar = { renderBackBar }
+              navigation = { navigation }
+              state = { state }
+              setState = { setState }>
+            { state.loaded
+                ? <FlatList
+                    data = { state.messages }
+                    renderItem = { renderMessage }
+                    keyExtractor = { item => item.id }/>
+                : <></>
+            }
+        </ConversationContainerJsx>
     );
 };
 
@@ -276,19 +318,19 @@ const styles = {
             marginBottom: 10,
             marginLeft: 10,
         },
-        input: {
-            padding: 10,
-            borderWidth: 1,
-            borderColor: "#888",
-            borderRadius: 5,
-            flexGrow: 1,
-        },
         button: {
             marginLeft: 10,
             marginRight: 10,
         }
     },
     bold: { fontWeight: "bold", },
+    input: {
+        padding: 10,
+        borderWidth: 1,
+        borderColor: "#888",
+        borderRadius: 5,
+        flexGrow: 1,
+    },
 };
 
-export { ConversationJsx as default };
+export { ConversationJsx as default, ComposeJsx, };