diff --git a/react-native/ChatApp/components/AuthenticateNavigation.js b/react-native/ChatApp/components/AuthenticateNavigation.js index a00468b74ad464b3cade200e2baa8d62938aaa2c..21e53c61cef83b0742afff1b917206dacf805406 100644 --- a/react-native/ChatApp/components/AuthenticateNavigation.js +++ b/react-native/ChatApp/components/AuthenticateNavigation.js @@ -184,7 +184,17 @@ class AuthenticateNavigation extends React.Component { > <Tab.Screen name="Home" - component={HomeScreen} + children={(props) => + <Stack.Navigator initialRouteName="Accueil"> + <Stack.Screen + name="Accueil" + children={(props) => <HomeScreen/>} + options={{ + title: "Accueil", + }} + /> + </Stack.Navigator> + } options={{ tabBarLabel: 'Accueil', tabBarIcon: ({ color }) => ( @@ -204,7 +214,17 @@ class AuthenticateNavigation extends React.Component { /> <Tab.Screen name="Profile" - children={(props) => <ProfileScreen logoutAuthentication={this.logoutAuthentication.bind(this)} />} + children={(props) => + <Stack.Navigator initialRouteName="Profil"> + <Stack.Screen + name="Profil" + children={(props) => <ProfileScreen logoutAuthentication={this.logoutAuthentication.bind(this)} />} + options={{ + title: "Profil", + }} + /> + </Stack.Navigator> + } options={{ tabBarLabel: 'Profil', tabBarIcon: ({ color }) => ( diff --git a/react-native/ChatApp/components/HomeScreen.js b/react-native/ChatApp/components/HomeScreen.js index 0ab5f7401c737814e4dbeae056598b5ea79135fc..3cc6cf8a9f14f43187449a0b48e9746cc202bb95 100644 --- a/react-native/ChatApp/components/HomeScreen.js +++ b/react-native/ChatApp/components/HomeScreen.js @@ -3,7 +3,7 @@ import { View, } from 'react-native'; import { Text } from 'react-native-elements'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; class HomeScreen extends React.Component { @@ -20,27 +20,15 @@ class HomeScreen extends React.Component { <Text h1>Bienvenue !</Text> </View> <View style={{flex: 4, alignItems: 'center', justifyContent: 'center', paddingBottom: 25}}> - <Icon - name="comments" - size={75} - color="dodgerblue" - /> + <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. </Text> - <Icon - name="graduation-cap" - size={75} - color="dodgerblue" - /> + <FontAwesome5 name={'graduation-cap'} solid color={'lightgrey'} size={65} /> <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}> Travail réalisé en groupe dans le cadre d'un projet tutoré sur une veille technologique en développement mobile. </Text> - <Icon - name="mobile" - size={90} - color="dodgerblue" - /> + <FontAwesome5 name={'mobile-alt'} solid color={'lightgrey'} size={65} /> <Text style={{ flex: 1, textAlign: 'center', color: 'dimgrey'}}> Le but était de comparer et de développer 3 versions d'une même application sous Flutter, Ionic et React Native, l'ensemble communiquant grâce à une même API. </Text> diff --git a/react-native/ChatApp/components/ListScreen.js b/react-native/ChatApp/components/ListScreen.js index bbafb27dc889cd14ed0561525c36e02aadc99dce..a596f4b15c29f0733e8483a57d1b3c2edd895a2a 100644 --- a/react-native/ChatApp/components/ListScreen.js +++ b/react-native/ChatApp/components/ListScreen.js @@ -3,7 +3,7 @@ import { View, FlatList } from 'react-native'; -import { ListItem, Icon } from 'react-native-elements'; +import { ListItem, Icon, Text } from 'react-native-elements'; import AsyncStorage from '@react-native-async-storage/async-storage'; class ListScreen extends React.Component { @@ -33,36 +33,36 @@ class ListScreen extends React.Component { Authorization: "Bearer " + token } }) - .then(response => { - status = response.status; - return response.json(); - }) - .then(async (json) => { - - //OK Status : we store the rooms list in list state - if (status == 200) { - this.setState({ list: json }); - } - - //Unauthorized status : token has expired, we force user to login to continue - else if (status == 401) { - this.props.updateAuthentication(); - } - - //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 - }); + .then(response => { + status = response.status; + return response.json(); + }) + .then(async (json) => { + + //OK Status : we store the rooms list in list state + if (status == 200) { + this.setState({ list: json }); + } + + //Unauthorized status : token has expired, we force user to login to continue + else if (status == 401) { + this.props.updateAuthentication(); + } + + //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 { @@ -89,24 +89,34 @@ class ListScreen extends React.Component { keyExtractor = (item, index) => index.toString(); render() { - return ( - <View style={{ flex: 1 }}> - <FlatList - keyExtractor={this.keyExtractor} - data={this.state.list} - renderItem={({ item }) => ( - <ListItem bottomDivider onPress={() => this.props.navigation.navigate('Messages', { title: item.name, id: item._id })}> - <Icon solid name='comment' type='font-awesome-5' /> - <ListItem.Content> - <ListItem.Title>{item.name}</ListItem.Title> - <ListItem.Subtitle>{item.description}</ListItem.Subtitle> - </ListItem.Content> - <ListItem.Chevron /> - </ListItem> - )} - /> - </View> - ) + if (this.state.list.length > 0) + return ( + <View style={{ flex: 1 }}> + <FlatList + keyExtractor={this.keyExtractor} + data={this.state.list} + renderItem={({ item }) => ( + <ListItem bottomDivider onPress={() => this.props.navigation.navigate('Messages', { title: item.name, id: item._id })}> + <Icon solid name='comment' type='font-awesome-5' /> + <ListItem.Content> + <ListItem.Title>{item.name}</ListItem.Title> + <ListItem.Subtitle>{item.description}</ListItem.Subtitle> + </ListItem.Content> + <ListItem.Chevron /> + </ListItem> + )} + /> + </View> + ) + else { + return ( + <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> + <Text> + Vous n'avez aucune discussion en cours + </Text> + </View> + ) + } } }; diff --git a/react-native/ChatApp/components/LoginScreen.js b/react-native/ChatApp/components/LoginScreen.js index 8e6a6c6493ea9d0bf93c6668cb9659bbf522e240..9572b2f24afc4c9e3c8819332fa0bb914a666989 100644 --- a/react-native/ChatApp/components/LoginScreen.js +++ b/react-native/ChatApp/components/LoginScreen.js @@ -6,7 +6,7 @@ import { Dimensions } from 'react-native'; import { Input, Button, Text } from 'react-native-elements'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; const windowHeight = Dimensions.get('window').height; @@ -39,14 +39,14 @@ class LoginScreen extends React.Component { <Input placeholder="Pseudonyme" style={{ fontSize: 16, borderBottomColor: "grey" }} - leftIcon={{ type: 'font-awesome', name: 'user', color: "black" }} + leftIcon={{ type: 'font-awesome-5', name: 'user-alt', color: "black" }} onChangeText={value => this.setState({ username: value })} placeholderTextColor={"black"} /> <Input placeholder="Mot de passe" style={{ fontSize: 16, borderBottomColor: "grey" }} - leftIcon={{ type: 'font-awesome', name: 'lock', color: "black" }} + leftIcon={{ type: 'font-awesome-5', name: 'lock', color: "black" }} onChangeText={value => this.setState({ password: value })} secureTextEntry={true} placeholderTextColor={"black"} @@ -58,11 +58,7 @@ class LoginScreen extends React.Component { buttonStyle={{backgroundColor: 'dodgerblue'}} titleStyle={{ marginLeft: 5 }} icon={ - <Icon - name="sign-in" - size={20} - color="white" - /> + <FontAwesome5 name={'sign-in-alt'} solid color={'white'} size={20} /> } /> </View> diff --git a/react-native/ChatApp/components/ProfileScreen.js b/react-native/ChatApp/components/ProfileScreen.js index d926c66bff3332ff082549ef22f27042e4f96c84..01eb1dd14af32d24bc128f4ab213c9b4377fffa4 100644 --- a/react-native/ChatApp/components/ProfileScreen.js +++ b/react-native/ChatApp/components/ProfileScreen.js @@ -2,9 +2,11 @@ import React from 'react'; import { View, StyleSheet, + ActivityIndicator } from 'react-native'; import { Button, Text } from 'react-native-elements'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; +import AsyncStorage from '@react-native-async-storage/async-storage'; class ProfileScreen extends React.Component { @@ -12,27 +14,57 @@ class ProfileScreen extends React.Component { super(props); + this.state = { + 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.updateAuthentication(); + } + } catch (error) { + console.warn(error); + } + this.setState({ isLoading: false }); } render() { - return ( - <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> - <Button - containerStyle={styles.customButton} - title="Se déconnecter" - onPress={this.props.logoutAuthentication} - buttonStyle={{backgroundColor: 'red'}} - titleStyle={{ marginLeft: 5 }} - icon={ - <Icon - name="sign-out" - size={20} - color="white" + if (this.state.isLoading) + return ( + <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> + <ActivityIndicator size="large" /> + </View> + ) + else + return ( + <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> + <View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}> + <FontAwesome5 name={'user-circle'} solid color={'lightgrey'} size={150} /> + <Text h4>{this.state.user.username}</Text> + </View> + <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> + <Button + containerStyle={styles.customButton} + title="Se déconnecter" + onPress={this.props.logoutAuthentication} + buttonStyle={{backgroundColor: 'lightgrey'}} + titleStyle={{ marginLeft: 5, color: 'red' }} + icon={ + <FontAwesome5 name={'sign-out-alt'} solid color={'red'} size={20} /> + } /> - } - /> - </View> - ) + </View> + </View> + ) } }; diff --git a/react-native/ChatApp/components/SignupScreen.js b/react-native/ChatApp/components/SignupScreen.js index 5d8e74b0fe4e40bd47d3c5fb8d931dde10182779..5d1711f96dd6909e0203293fa83c4463e4cfd20a 100644 --- a/react-native/ChatApp/components/SignupScreen.js +++ b/react-native/ChatApp/components/SignupScreen.js @@ -6,7 +6,7 @@ import { Dimensions } from 'react-native'; import { Input, Button, Text } from 'react-native-elements'; -import Icon from 'react-native-vector-icons/FontAwesome'; +import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; const windowHeight = Dimensions.get('window').height; @@ -40,14 +40,14 @@ class SignupScreen extends React.Component { <Input placeholder="Pseudonyme" style={{ fontSize: 16, borderBottomColor: "grey" }} - leftIcon={{ type: 'font-awesome', name: 'user', color: "black" }} + leftIcon={{ type: 'font-awesome-5', name: 'user-alt', color: "black" }} onChangeText={value => this.setState({ username: value })} placeholderTextColor={"black"} /> <Input placeholder="Mot de passe" style={{ fontSize: 16, borderBottomColor: "grey" }} - leftIcon={{ type: 'font-awesome', name: 'lock', color: "black" }} + leftIcon={{ type: 'font-awesome-5', name: 'lock', color: "black" }} onChangeText={value => this.setState({ password: value })} secureTextEntry={true} placeholderTextColor={"black"} @@ -55,7 +55,7 @@ class SignupScreen extends React.Component { <Input placeholder="Confirmer le mot de passe" style={{ fontSize: 16, borderBottomColor: "grey" }} - leftIcon={{ type: 'font-awesome', name: 'lock', color: "black" }} + leftIcon={{ type: 'font-awesome-5', name: 'lock', color: "black" }} onChangeText={value => this.setState({ confirm: value })} secureTextEntry={true} placeholderTextColor={"black"} @@ -67,11 +67,7 @@ class SignupScreen extends React.Component { buttonStyle={{backgroundColor: 'dodgerblue'}} titleStyle={{ marginLeft: 5 }} icon={ - <Icon - name="user-plus" - size={20} - color="white" - /> + <FontAwesome5 name={'user-plus'} solid color={'white'} size={20} /> } /> </View>