Add interface for composing a new direct message

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, },

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,
     },
 }
 

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>

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>
+        <ConversationContainerJsx
-            <View style = { { flex: 1 } }>
+              renderBackBar = { renderBackBar }
-                <BackBarJsx navigation = { navigation }>
+              navigation = { navigation }
-                    { renderBackBar() }
+              state = { state }
-                </BackBarJsx>
+              setState = { setState }>
-                <ScrollView>
+            { state.loaded
-                    { state.loaded
+                ? <FlatList
-                        ? <FlatList
+                    data = { state.messages }
-                            data = { state.messages }
+                    renderItem = { renderMessage }
-                            renderItem = { renderMessage }
+                    keyExtractor = { item => item.id }/>
-                            keyExtractor = { item => item.id }/>
+                : <></>
-                        : <></>
+            }
-                    }
+        </ConversationContainerJsx>
-                </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>
     );
 };
 
@@ -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, };