nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add interface for composing a new direct message

This commit is contained in:
Nat 2021-04-15 15:18:39 -03:00
parent 314de081de
commit 1fd925d753
4 changed files with 95 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.js
View File

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

6
src/components/navigation/back-bar.js
View File

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

3
src/components/pages/direct.js
View File

@ -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>

130
src/components/pages/direct/conversation.js
View File

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