Skip to content
Snippets Groups Projects
DiscussionsScreen.js 4.34 KiB
import React from 'react';
import {
  View,
  FlatList
} from 'react-native';
import { Icon, Button, Text } from 'react-native-elements';
import { createStackNavigator } from '@react-navigation/stack';

import ListScreen from './ListScreen'
import MessagesScreen from './MessagesScreen'
import CreateDiscussionScreen from './CreateDiscussionScreen'
import UpdateDiscussionScreen from './UpdateDiscussionScreen'
import AddUsersDiscussionScreen from './AddUsersDiscussionScreen'
import UserIcon from './UserIcon'
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger
} from 'react-native-popup-menu';

const Stack = createStackNavigator();

class DiscussionsScreen extends React.Component {

  constructor(props) {

    super(props);

  }

  openMenu = (id) => {
    this["user-list" + id].open();
  };

  render() {
    return (
      <Stack.Navigator initialRouteName="List">
        <Stack.Screen
          name="List"
          children={(props) =>
            <ListScreen
              {...props}
              deleteDiscussion={this.props.deleteDiscussion}
              updateDiscussion={this.props.updateDiscussion}
              logoutAuthentication={this.props.logoutAuthentication}
            />
          }
          options={{
            title: "Discussions", headerRight: () => (
              <Button
                icon={<Icon solid name='plus' type='font-awesome-5' size={20} />}
                onPress={() => this.props.navigation.navigate('CreateDiscussion')}
                type="clear"
                containerStyle={{margin: 5}}
              />
            ),
          }}
        />
        <Stack.Screen
          name="CreateDiscussion"
          children={(props) =>
            <CreateDiscussionScreen
              {...props}
              addDiscussion={this.props.addDiscussion}
              logoutAuthentication={this.props.logoutAuthentication}
            />
          }
          options={{
            title: "Nouvelle discussion"
          }}
        />
        <Stack.Screen
          name="UpdateDiscussion"
          children={(props) =>
            <UpdateDiscussionScreen
              {...props}
              updateDiscussion={this.props.updateDiscussion}
              logoutAuthentication={this.props.logoutAuthentication}
            />
          }
          options={({ route }) => ({ title: 'Modifier ' + route.params.item.name })}
        />
        <Stack.Screen
          name="AddUsersDiscussion"
          children={(props) =>
            <AddUsersDiscussionScreen
              {...props}
              updateDiscussion={this.props.updateDiscussion}
              logoutAuthentication={this.props.logoutAuthentication}
            />
          }
          options={({ route }) => ({ title: 'Gérer les utilisateurs' })}
        />
        <Stack.Screen
          name="Messages"
          children={(props) =>
            <MessagesScreen
              {...props}
              logoutAuthentication={this.props.logoutAuthentication}
            />
          }
          options={
            ({ route }) => ({
              title: route.params.item.name, headerRight: () => (
                <View>
                  <Button
                    icon={<Icon solid name='user-friends' type='font-awesome-5' size={20} />}
                    onPress={() => this.openMenu(route.params.item._id)}
                    type="clear"
                    containerStyle={{margin: 5}}
                  />
                  <Menu ref={c => (this["user-list" + route.params.item._id] = c)}>
                    <MenuTrigger />
                    <MenuOptions customStyles={{optionWrapper: { padding: 10 }}}>
                      <MenuOption>
                      <FlatList
                        data={route.params.item.users}
                        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>
                    </MenuOptions>
                  </Menu>
                </View>
              ),
            })
          }
        />
      </Stack.Navigator>
    )
  }
};

export default DiscussionsScreen;