From 60751884f15f0241b3d17a40dcaaa353a4c6ac37 Mon Sep 17 00:00:00 2001 From: COURTES Guillaume <guillaumecourtes88@gmail.com> Date: Sat, 19 Jun 2021 10:58:02 +0200 Subject: [PATCH] fix token expire action; add createDiscussionScreen --- .../components/AuthenticateNavigation.js | 63 ++++++++++- .../components/CreateDiscussionScreen.js | 104 ++++++++++++++++++ .../ChatApp/components/DiscussionsScreen.js | 14 ++- react-native/ChatApp/components/HomeScreen.js | 2 +- react-native/ChatApp/components/ListScreen.js | 4 +- .../ChatApp/components/MessagesScreen.js | 10 +- .../ChatApp/components/ProfileScreen.js | 2 +- 7 files changed, 184 insertions(+), 15 deletions(-) create mode 100644 react-native/ChatApp/components/CreateDiscussionScreen.js diff --git a/react-native/ChatApp/components/AuthenticateNavigation.js b/react-native/ChatApp/components/AuthenticateNavigation.js index 21e53c61c..1f902a413 100644 --- a/react-native/ChatApp/components/AuthenticateNavigation.js +++ b/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> diff --git a/react-native/ChatApp/components/CreateDiscussionScreen.js b/react-native/ChatApp/components/CreateDiscussionScreen.js new file mode 100644 index 000000000..176b262a9 --- /dev/null +++ b/react-native/ChatApp/components/CreateDiscussionScreen.js @@ -0,0 +1,104 @@ +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 diff --git a/react-native/ChatApp/components/DiscussionsScreen.js b/react-native/ChatApp/components/DiscussionsScreen.js index cc7bf81dd..f60dab8d5 100644 --- a/react-native/ChatApp/components/DiscussionsScreen.js +++ b/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> diff --git a/react-native/ChatApp/components/HomeScreen.js b/react-native/ChatApp/components/HomeScreen.js index 3cc6cf8a9..b640f22eb 100644 --- a/react-native/ChatApp/components/HomeScreen.js +++ b/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'}}> diff --git a/react-native/ChatApp/components/ListScreen.js b/react-native/ChatApp/components/ListScreen.js index a596f4b15..9415a6088 100644 --- a/react-native/ChatApp/components/ListScreen.js +++ b/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 diff --git a/react-native/ChatApp/components/MessagesScreen.js b/react-native/ChatApp/components/MessagesScreen.js index aaf7756c9..ccba3d04e 100644 --- a/react-native/ChatApp/components/MessagesScreen.js +++ b/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 diff --git a/react-native/ChatApp/components/ProfileScreen.js b/react-native/ChatApp/components/ProfileScreen.js index 01eb1dd14..a5c168a4d 100644 --- a/react-native/ChatApp/components/ProfileScreen.js +++ b/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); -- GitLab