fix token expire action; add createDiscussionScreen

react-native/ChatApp/components/AuthenticateNavigation.js

@@ -146,7 +146,6 @@ class AuthenticateNavigation extends React.Component {
       //OK Status : we store the token & the user in local storage
       if (status == 200) {
         console.warn("Inscription réussie");
-        this.props.navigation.navigate('Signup');
       }
       //Handled error status
       else if ("error" in json) {
@@ -163,6 +162,64 @@ class AuthenticateNavigation extends React.Component {
     });
   }
 
+  async addDiscussion(name, description) {
+    let status = null;
+
+    //post room from API
+    try {
+      const token = await AsyncStorage.getItem('@token');
+      //if token is stored, user is logged in
+      if (token !== null) {
+        fetch('http://163.172.178.146:3000/rooms', {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: "Bearer " + token
+          },
+          body: JSON.stringify({
+            name: name,
+            description: description,
+          })
+        })
+        .then(response => {
+          status = response.status;
+          return response.json();
+        })
+        .then(async (json) => {
+          //OK Status : we store the token & the user in local storage
+          if (status == 200) {
+            console.warn("Nouvelle discussion ajoutée");
+          }
+
+          //Unauthorized status : token has expired, we force user to login to continue
+          else if (status == 401) {
+            this.props.logoutAuthentication();
+          }
+
+          //Handled error status
+          else if ("error" in json) {
+            console.warn(json.error);
+          }
+
+          //Unhandled error status
+          else {
+            console.warn("Unhandled error");
+          }
+        })
+        .catch(async (error) => {
+          //Error fetching url
+        });
+      }
+      //token is not stored, user is not logged in
+      else {
+        this.props.logoutAuthentication();
+      }
+    } catch (error) {
+      //Error fetching data
+    }
+  }
+
   render() {
     if (this.state.isLoading) {
       return (
@@ -204,7 +261,7 @@ class AuthenticateNavigation extends React.Component {
             />
             <Tab.Screen
               name="Discussions"
-              children={(props) => <DiscussionsScreen {...props} updateAuthentication={this.updateAuthentication.bind(this)} />}
+              children={(props) => <DiscussionsScreen {...props} addDiscussion={this.addDiscussion.bind(this)} logoutAuthentication={this.logoutAuthentication.bind(this)} />}
               options={{
                 tabBarLabel: 'Discussions',
                 tabBarIcon: ({ color }) => (
@@ -249,7 +306,7 @@ class AuthenticateNavigation extends React.Component {
             />
             <Stack.Screen
               name="Signup"
-              children={(props) => <SignupScreen {...props} signup={this.signup} updateAuthentication={this.updateAuthentication.bind(this)}/>}
+              children={(props) => <SignupScreen {...props} signup={this.signup}/>}
             />
           </Stack.Navigator>
         </NavigationContainer>

react-native/ChatApp/components/CreateDiscussionScreen.js

+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  KeyboardAvoidingView,
+  ActivityIndicator,
+  Dimensions
+} from 'react-native';
+import { Input, Button } from 'react-native-elements';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const windowHeight = Dimensions.get('window').height;
+
+class CreateDiscussionScreen extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+
+    this.state = {
+      name: "",
+      description: "",
+      users: [],
+      user: null,
+      isLoading: true
+    }
+
+  }
+
+  async componentDidMount() {
+    //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);
+    }
+    this.setState({ isLoading: false });
+  }
+
+  addDiscussion() {
+    this.props.addDiscussion(this.state.name, this.state.description);
+  }
+
+  render() {
+    if (this.state.isLoading)
+      return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator size="large" />
+        </View>
+      )
+    else
+      return (
+        <KeyboardAvoidingView
+          behavior="height"
+          style={{flex:1, alignItems: 'center', justifyContent: 'center' }}
+        >
+          
+          <FontAwesome5 name={'users'} solid color={'lightgrey'} size={150} />
+          <View style={{alignItems: 'center', justifyContent: 'center', width: '100%' }}>
+            <Input
+              placeholder="Nom"
+              style={{ fontSize: 16, borderBottomColor: "grey" }}
+              onChangeText={value => this.setState({ name: value })}
+              placeholderTextColor={"black"}
+            />
+            <Input
+              placeholder="Description"
+              style={{ fontSize: 16, borderBottomColor: "grey" }}
+              onChangeText={value => this.setState({ description: value })}
+              placeholderTextColor={"black"}
+            />
+            <Button
+              containerStyle={styles.customButton}
+              title="Ajouter"
+              onPress={this.addDiscussion.bind(this)}
+              buttonStyle={{backgroundColor: 'dodgerblue'}}
+              titleStyle={{ marginLeft: 5 }}
+              icon={
+                <FontAwesome5 name={'plus'} solid color={'white'} size={20} />
+              }
+            />
+          </View>
+        </KeyboardAvoidingView>
+      )
+  }
+};
+
+const styles = StyleSheet.create({
+  customButton: {
+    borderRadius: 1000,
+    width: 200,
+    textAlign: 'center',
+    backgroundColor: 'red'
+  }
+})
+
+export default CreateDiscussionScreen;
\ No newline at end of file

react-native/ChatApp/components/DiscussionsScreen.js

@@ -4,6 +4,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 
 import ListScreen from './ListScreen'
 import MessagesScreen from './MessagesScreen'
+import CreateDiscussionScreen from './CreateDiscussionScreen'
 
 const Stack = createStackNavigator();
 
@@ -20,21 +21,28 @@ class DiscussionsScreen extends React.Component {
       <Stack.Navigator initialRouteName="List">
         <Stack.Screen
           name="List"
-          children={(props) => <ListScreen {...props} updateAuthentication={this.props.updateAuthentication}/>}
+          children={(props) => <ListScreen {...props} logoutAuthentication={this.props.logoutAuthentication}/>}
           options={{
             title: "Discussions", headerRight: () => (
               <Button
                 icon={<Icon solid name='plus' type='font-awesome-5' />}
-                onPress={() => alert('Nouvelle discussion')}
+                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="Messages"
-          children={(props) => <MessagesScreen {...props} updateAuthentication={this.props.updateAuthentication}/>}
+          children={(props) => <MessagesScreen {...props} logoutAuthentication={this.props.logoutAuthentication}/>}
           options={({ route }) => ({ title: route.params.title })}
         />
       </Stack.Navigator>

react-native/ChatApp/components/HomeScreen.js

@@ -22,7 +22,7 @@ class HomeScreen extends React.Component {
         <View style={{flex: 4, alignItems: 'center', justifyContent: 'center', paddingBottom: 25}}>
           <FontAwesome5 name={'comments'} solid color={'lightgrey'} size={65} />
           <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>
-            ChatApp est une application de discussions instantannées développée sous React Native.
+            ChatApp est une application de messagerie instantannée développée sous React Native.
           </Text>
           <FontAwesome5 name={'graduation-cap'} solid color={'lightgrey'} size={65} />
           <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}>

react-native/ChatApp/components/ListScreen.js

@@ -46,7 +46,7 @@ class ListScreen extends React.Component {
 
           //Unauthorized status : token has expired, we force user to login to continue
           else if (status == 401) {
-            this.props.updateAuthentication();
+            this.props.logoutAuthentication();
           }
 
           //Handled error status
@@ -66,7 +66,7 @@ class ListScreen extends React.Component {
       }
       //token is not stored, user is not logged in
       else {
-        this.props.updateAuthentication();
+        this.props.logoutAuthentication();
       }
     } catch (error) {
       //Error fetching data

react-native/ChatApp/components/MessagesScreen.js

@@ -32,7 +32,7 @@ class MessagesScreen extends React.Component {
         await this.setState({ user: JSON.parse(user) });
       }
       else {
-        this.props.updateAuthentication();
+        this.props.logoutAuthentication();
       }
     } catch (error) {
       console.warn(error);
@@ -79,7 +79,7 @@ class MessagesScreen extends React.Component {
 
             //Unauthorized status : token has expired, we force user to login to continue
             else if (status == 401) {
-              this.props.updateAuthentication();
+              this.props.logoutAuthentication();
             }
 
             //Handled error status
@@ -99,7 +99,7 @@ class MessagesScreen extends React.Component {
       }
       //token is not stored, user is not logged in
       else {
-        this.props.updateAuthentication();
+        this.props.logoutAuthentication();
       }
     } catch (error) {
       //Error fetching data
@@ -158,7 +158,7 @@ class MessagesScreen extends React.Component {
 
             //Unauthorized status : token has expired, we force user to login to continue
             else if (status == 401) {
-              this.props.updateAuthentication();
+              this.props.logoutAuthentication();
             }
 
             //Handled error status
@@ -178,7 +178,7 @@ class MessagesScreen extends React.Component {
       }
       //token is not stored, user is not logged in
       else {
-        this.props.updateAuthentication();
+        this.props.logoutAuthentication();
       }
     } catch (error) {
       //Error fetching data

react-native/ChatApp/components/ProfileScreen.js

@@ -29,7 +29,7 @@ class ProfileScreen extends React.Component {
         await this.setState({ user: JSON.parse(user) });
       }
       else {
-        this.props.updateAuthentication();
+        this.props.logoutAuthentication();
       }
     } catch (error) {
       console.warn(error);