add group author verification

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}

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

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>

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>
             )}
           />

react-native/ChatApp/components/UserIcon.js

+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