diff --git a/react-native/ChatApp/components/AddUsersDiscussionScreen.js b/react-native/ChatApp/components/AddUsersDiscussionScreen.js index c079d6cec9da4b4995065c50d715e54c90e92e99..8f5d450fd8f1fabb6c361611463ea31be71724cc 100644 --- a/react-native/ChatApp/components/AddUsersDiscussionScreen.js +++ b/react-native/ChatApp/components/AddUsersDiscussionScreen.js @@ -58,6 +58,10 @@ class AddUsersDiscussionScreen extends React.Component { //OK Status : we store the rooms list in list state if (status == 200) { + json = json.map(user => { + user.disabled = this.props.route.params.item.createdBy == user._id; + return user; + }) this.setState({ users: json }); console.log(this.state.users); } @@ -132,6 +136,7 @@ class AddUsersDiscussionScreen extends React.Component { <View style={{flex: 3, alignItems: 'center', justifyContent: 'center'}}> <FontAwesome5 name={'users'} solid color={'lightgrey'} size={150} /> <SectionedMultiSelect + showChips={false} items={this.state.users} selectedItems={this.state.selectedUsers} IconRenderer={Icon} diff --git a/react-native/ChatApp/components/AuthenticateNavigation.js b/react-native/ChatApp/components/AuthenticateNavigation.js index fd7df274e9f7c07fb0e8772ed17367764cc08dbf..2e2d8c411b43d6859210f5bbe7f8844d6ca8437d 100644 --- a/react-native/ChatApp/components/AuthenticateNavigation.js +++ b/react-native/ChatApp/components/AuthenticateNavigation.js @@ -220,7 +220,7 @@ class AuthenticateNavigation extends React.Component { } } - async updateDiscussion(id, name, description, users, format = false) { + async updateDiscussion(id, name, description, users, format = false, message = "Discussion mise à jour") { let status = null; if (format) { @@ -254,7 +254,7 @@ class AuthenticateNavigation extends React.Component { .then(async (json) => { //OK Status : we store the token & the user in local storage if (status == 200) { - console.warn("Discussion mise à jour"); + console.warn(message); } //Unauthorized status : token has expired, we force user to login to continue diff --git a/react-native/ChatApp/components/DiscussionsScreen.js b/react-native/ChatApp/components/DiscussionsScreen.js index 1b871e44e9129c3341fc4320d30a71e4c60f4b93..68ad9c102346930b14f878adbdf9419bd01611e6 100644 --- a/react-native/ChatApp/components/DiscussionsScreen.js +++ b/react-native/ChatApp/components/DiscussionsScreen.js @@ -11,7 +11,7 @@ import MessagesScreen from './MessagesScreen' import CreateDiscussionScreen from './CreateDiscussionScreen' import UpdateDiscussionScreen from './UpdateDiscussionScreen' import AddUsersDiscussionScreen from './AddUsersDiscussionScreen' -import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; +import UserIcon from './UserIcon' import { Menu, MenuOptions, @@ -33,10 +33,6 @@ class DiscussionsScreen extends React.Component { this["user-list" + id].open(); }; - renderItem = ({ item }) => ( - <Text style={{fontSize: 15, margin: 5, marginLeft: 15}}><FontAwesome5 name={'user-alt'} solid color={'lightgrey'} size={15} /> {item.username}</Text> - ); - render() { return ( <Stack.Navigator initialRouteName="List"> @@ -46,6 +42,7 @@ class DiscussionsScreen extends React.Component { <ListScreen {...props} deleteDiscussion={this.props.deleteDiscussion} + updateDiscussion={this.props.updateDiscussion} logoutAuthentication={this.props.logoutAuthentication} /> } @@ -119,7 +116,11 @@ class DiscussionsScreen extends React.Component { <MenuOption> <FlatList data={route.params.item.users} - renderItem={this.renderItem} + renderItem={({ item }) => + <Text style={{fontSize: 15, margin: 5, marginLeft: 15}}> + <UserIcon userId={item._id} roomAuthorId={route.params.item.createdBy} showUserIcon={true} /> {item.username} + </Text> + } keyExtractor={item => item._id} /> </MenuOption> diff --git a/react-native/ChatApp/components/ListScreen.js b/react-native/ChatApp/components/ListScreen.js index ebbd4b66fc423194ff413bb81e49b67cd6769380..03671ba6c412a673f0dfe6a90dd5dee653acc3ba 100644 --- a/react-native/ChatApp/components/ListScreen.js +++ b/react-native/ChatApp/components/ListScreen.js @@ -12,6 +12,7 @@ import { MenuOption, MenuTrigger } from 'react-native-popup-menu'; +import UserIcon from './UserIcon'; class ListScreen extends React.Component { constructor(props) { @@ -19,7 +20,8 @@ class ListScreen extends React.Component { super(props); this.state = { - list: [] + list: [], + user: null } } @@ -28,6 +30,19 @@ class ListScreen extends React.Component { let status = null; + //get user from asyncStorage + try { + const user = await AsyncStorage.getItem('@user'); + if (user !== null) { + await this.setState({ user: JSON.parse(user) }); + } + else { + this.props.logoutAuthentication(); + } + } catch (error) { + console.warn(error); + } + //get rooms from API try { const token = await AsyncStorage.getItem('@token'); @@ -103,6 +118,64 @@ class ListScreen extends React.Component { this.getRooms(); } + updateDiscussion(item) { + let users = item.users.filter(user => user._id !== this.state.user.id); + this.props.updateDiscussion(item._id, item.name, item.description, users, this.state.user, true, "Groupe quitté"); + this.getRooms(); + } + + multipleMenu(item) { + if (item.createdBy == this.state.user.id) + return <Menu ref={c => (this["menu" + item._id] = c)}> + <MenuTrigger /> + <MenuOptions customStyles={{optionWrapper: { padding: 10 }}}> + <MenuOption onSelect={() => this.props.navigation.navigate('UpdateDiscussion', { item: item })}> + <Text style={{ fontSize: 15 }}><Icon solid name='edit' type='font-awesome-5' size={13} style={{marginRight: 5}}/>Modifier</Text> + </MenuOption> + <MenuOption onSelect={() => this.props.navigation.navigate('AddUsersDiscussion', { item: item })}> + <Text style={{ fontSize: 15 }}><Icon solid name='user-cog' type='font-awesome-5' size={13} style={{marginRight: 5}}/>Gérer les utilisateurs</Text> + </MenuOption> + <MenuOption onSelect={() => + Alert.alert( + "", + "Voulez vous vraiment supprimer cette discussion ?", + [ + { + text: "Annuler", + style: 'cancel' + }, + { text: "Supprimer", style: 'destructive', onPress: () => this.deleteDiscussion(item._id) } + ] + ) + }> + <Text style={{ color: 'red', fontSize: 15 }}><Icon solid name='trash-alt' type='font-awesome-5' color={'red'} size={13} style={{marginRight: 5}}/>Supprimer</Text> + </MenuOption> + </MenuOptions> + </Menu> + + else + return <Menu ref={c => (this["menu" + item._id] = c)}> + <MenuTrigger /> + <MenuOptions customStyles={{optionWrapper: { padding: 10 }}}> + <MenuOption onSelect={() => + Alert.alert( + "", + "Voulez vous vraiment quitter cette discussion ?", + [ + { + text: "Annuler", + style: 'cancel' + }, + { text: "Quitter", style: 'destructive', onPress: () => this.updateDiscussion(item) } + ] + ) + }> + <Text style={{ fontSize: 15 }}><Icon solid name='door-open' type='font-awesome-5' size={13} style={{marginRight: 5}}/>Quitter le groupe</Text> + </MenuOption> + </MenuOptions> + </Menu> + } + render() { if (this.state.list.length > 0) return ( @@ -114,36 +187,11 @@ class ListScreen extends React.Component { <ListItem bottomDivider onLongPress={() => this.openMenu(item._id)} onPress={() => this.props.navigation.navigate('Messages', { item: item })}> <Icon solid name='comment' type='font-awesome-5' /> <ListItem.Content> - <ListItem.Title>{item.name}</ListItem.Title> + <ListItem.Title>{item.name} <UserIcon userId={this.state.user.id} roomAuthorId={item.createdBy} showUserIcon={false} /></ListItem.Title> <ListItem.Subtitle>{item.description}</ListItem.Subtitle> </ListItem.Content> <ListItem.Chevron /> - <Menu ref={c => (this["menu" + item._id] = c)}> - <MenuTrigger /> - <MenuOptions customStyles={{optionWrapper: { padding: 10 }}}> - <MenuOption onSelect={() => this.props.navigation.navigate('UpdateDiscussion', { item: item })}> - <Text style={{ fontSize: 15 }}><Icon solid name='edit' type='font-awesome-5' size={13} style={{marginRight: 5}}/>Modifier</Text> - </MenuOption> - <MenuOption onSelect={() => this.props.navigation.navigate('AddUsersDiscussion', { item: item })}> - <Text style={{ fontSize: 15 }}><Icon solid name='user-cog' type='font-awesome-5' size={13} style={{marginRight: 5}}/>Gérer les utilisateurs</Text> - </MenuOption> - <MenuOption onSelect={() => - Alert.alert( - "", - "Voulez vous vraiment supprimer cette discussion ?", - [ - { - text: "Annuler", - style: 'cancel' - }, - { text: "Supprimer", style: 'destructive', onPress: () => this.deleteDiscussion(item._id) } - ] - ) - }> - <Text style={{ color: 'red', fontSize: 15 }}><Icon solid name='trash-alt' type='font-awesome-5' color={'red'} size={13} style={{marginRight: 5}}/>Supprimer</Text> - </MenuOption> - </MenuOptions> - </Menu> + {this.multipleMenu(item)} </ListItem> )} /> diff --git a/react-native/ChatApp/components/UserIcon.js b/react-native/ChatApp/components/UserIcon.js new file mode 100644 index 0000000000000000000000000000000000000000..86a601a927acce842797669e1b20455428ef8125 --- /dev/null +++ b/react-native/ChatApp/components/UserIcon.js @@ -0,0 +1,16 @@ +import React from "react"; +import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; + +const UserIcon = props => { + let { userId, roomAuthorId, showUserIcon } = props; + + if (userId == roomAuthorId) { + return <FontAwesome5 name={'crown'} solid color={'lightgrey'} size={12} /> + } + else if (showUserIcon) { + return <FontAwesome5 name={'user-alt'} solid color={'lightgrey'} size={14} /> + } + else return null; +}; + +export default UserIcon; \ No newline at end of file