Skip to content
Snippets Groups Projects
Commit 8d05aed1 authored by COURTES Guillaume's avatar COURTES Guillaume
Browse files

update discussions screen with fetching datas from API

parent 1beaa964
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
react-native/ChatApp/components/DiscussionsScreen.js
+ 17
− 7
View file @ 8d05aed1
...@@ -18,14 +18,24 @@ class DiscussionsScreen extends React.Component { ...@@ -18,14 +18,24 @@ class DiscussionsScreen extends React.Component {
render() { render() {
return ( return (
<Stack.Navigator initialRouteName="List"> <Stack.Navigator initialRouteName="List">
<Stack.Screen name="List" component={ListScreen} options={{ title: "Discussions", headerRight: () => ( <Stack.Screen
<Button name="List"
icon={<Icon solid name='plus' type='font-awesome-5'/>} children={(props) => <ListScreen {...props} updateAuthentication={this.props.updateAuthentication}/>}
onPress={() => alert('Nouvelle discussion')} options={{
type="clear" title: "Discussions", headerRight: () => (
<Button
icon={<Icon solid name='plus' type='font-awesome-5' />}
onPress={() => alert('Nouvelle discussion')}
type="clear"
/>
),
}}
/>
<Stack.Screen
name="Messages"
children={(props) => <MessagesScreen {...props} updateAuthentication={this.props.updateAuthentication}/>}
options={({ route }) => ({ title: route.params.title })}
/> />
), }}/>
<Stack.Screen name="Messages" component={MessagesScreen} options={({ route }) => ({ title: route.params.title })}/>
</Stack.Navigator> </Stack.Navigator>
) )
} }
......
react-native/ChatApp/components/ListScreen.js
+ 63
− 87
View file @ 8d05aed1
...@@ -4,89 +4,7 @@ import { ...@@ -4,89 +4,7 @@ import {
FlatList FlatList
} from 'react-native'; } from 'react-native';
import { ListItem, Icon } from 'react-native-elements'; import { ListItem, Icon } from 'react-native-elements';
import { AsyncStorage } from 'react-native';
const currentUser = {
name: "Guillaume",
id: 1
}
const list = [
{
id: 1,
title: 'Conversation 1',
messages: [
{
author: {
name: "Brian",
id: 2
},
id: 7,
date: "2021-01-24T20:25:37.705Z",
message: "Yo !"
},
{
author: {
name: "Guillaume",
id: 1
},
id: 1,
date: "2021-01-25T20:25:38.705Z",
message: "Yo !"
},
{
author: {
name: "Brian",
id: 2
},
id: 2,
date: "2021-01-25T20:25:38.705Z",
message: "Salut !"
},
{
author: {
name: "Julien",
id: 3
},
id: 3,
date: "2021-01-25T20:25:38.705Z",
message: "Bonsoir !"
},
{
author: {
name: "Elise",
id: 4
},
id: 4,
date: "2021-01-25T20:25:38.705Z",
message: "Bonjour !"
}
]
},
{
id: 2,
title: 'Conversation 2',
messages: [
{
author: {
name: "Guillaume",
id: 1
},
id: 5,
date: "2021-01-25T20:25:38.705Z",
message: "Salut toi !"
},
{
author: {
name: "Brian",
id: 2
},
id: 6,
date: "2021-01-25T20:25:38.705Z",
message: "Salutations monsieur"
}
]
}
]
class ListScreen extends React.Component { class ListScreen extends React.Component {
...@@ -94,6 +12,64 @@ class ListScreen extends React.Component { ...@@ -94,6 +12,64 @@ class ListScreen extends React.Component {
super(props); super(props);
this.state = {
list: []
}
}
async componentDidMount() {
let status = null;
//get rooms from API
try {
const token = await AsyncStorage.getItem('@token');
//if token is stored, user is logged in
if (token !== null) {
fetch("http://localhost:3000/rooms", {
method: 'GET',
headers: {
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
});
}
//token is not stored, user is not logged in
else {
this.props.updateAuthentication();
}
} catch (error) {
//Error fetching data
}
} }
keyExtractor = (item, index) => index.toString(); keyExtractor = (item, index) => index.toString();
...@@ -103,13 +79,13 @@ class ListScreen extends React.Component { ...@@ -103,13 +79,13 @@ class ListScreen extends React.Component {
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<FlatList <FlatList
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
data={list} data={this.state.list}
renderItem={({ item }) => ( renderItem={({ item }) => (
<ListItem bottomDivider onPress={() => this.props.navigation.navigate('Messages', { title: item.title, messages: item.messages, currentUser: currentUser })}> <ListItem bottomDivider onPress={() => this.props.navigation.navigate('Messages', { title: item.name, id: item._id })}>
<Icon solid name='comment' type='font-awesome-5' /> <Icon solid name='comment' type='font-awesome-5' />
<ListItem.Content> <ListItem.Content>
<ListItem.Title>{item.title}</ListItem.Title> <ListItem.Title>{item.name}</ListItem.Title>
<ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle> <ListItem.Subtitle>{item.description}</ListItem.Subtitle>
</ListItem.Content> </ListItem.Content>
<ListItem.Chevron /> <ListItem.Chevron />
</ListItem> </ListItem>
......
react-native/ChatApp/components/MessagesScreen.js
+ 172
− 38
View file @ 8d05aed1
import React, { useState, useCallback, useEffect } from 'react'; import React from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { GiftedChat, utils, Bubble } from 'react-native-gifted-chat'; import { GiftedChat, utils, Bubble } from 'react-native-gifted-chat';
import { AsyncStorage } from 'react-native';
const { isSameUser, isSameDay } = utils const { isSameUser, isSameDay } = utils
...@@ -13,37 +14,163 @@ class MessagesScreen extends React.Component { ...@@ -13,37 +14,163 @@ class MessagesScreen extends React.Component {
super(props); super(props);
this.state = { this.state = {
messages: [] messages: [],
user: null,
isLoading: true
} }
this.onSend = this.onSend.bind(this); this.onSend = this.onSend.bind(this);
} }
componentDidMount() { async componentDidMount() {
let messages = [];
this.props.route.params.messages.forEach(message => { let status = null;
messages.push(
{ //get user from asyncStorage
_id: message.id, try {
text: message.message, const user = await AsyncStorage.getItem('@user');
createdAt: message.date, if (user !== null) {
user: { await this.setState({ user: JSON.parse(user) });
_id: message.author.id, }
name: message.author.name, else {
avatar: 'https://placeimg.com/140/140/any', this.props.updateAuthentication();
}, }
}, } catch (error) {
); console.warn(error);
}); }
this.setState({ messages: messages });
//get messages from API
try {
const token = await AsyncStorage.getItem('@token');
//if token is stored, user is logged in
if (token !== null) {
fetch("http://localhost:3000/rooms/" + this.props.route.params.id + "/messages", {
method: 'GET',
headers: {
Authorization: "Bearer " + token
}
})
.then(response => {
status = response.status;
return response.json();
})
.then(async (json) => {
//OK Status : we update message state with room messages from API
if (status == 200) {
let messages = [];
json.forEach(message => {
messages.push(
{
_id: message._id,
text: message.body,
createdAt: message.date,
user: {
_id: message.author,
name: message.author,
avatar: 'https://placeimg.com/140/140/any',
},
},
);
});
this.setState({ messages: messages });
}
//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 {
this.props.updateAuthentication();
}
} catch (error) {
//Error fetching data
}
this.setState({ isLoading: false })
} }
onSend(messages = []) { async onSend(messages = []) {
this.setState((previousState) => { let status = null;
return {
messages: GiftedChat.append(previousState.messages, messages), //post message in room with API
}; try {
}); const token = await AsyncStorage.getItem('@token');
//if token is stored, user is logged in
if (token !== null) {
fetch('http://localhost:3000/messages', {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: "Bearer " + token,
'Content-Type': 'application/json'
},
body: JSON.stringify({
body: messages[0].text,
roomId: this.props.route.params.id,
})
})
.then(response => {
status = response.status;
return response.json();
})
.then(async (json) => {
//OK Status : we update messages state with the message we post
if (status == 200) {
this.setState((previousState) => {
return {
messages: GiftedChat.append(previousState.messages, messages),
};
});
}
//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 {
this.props.updateAuthentication();
}
} catch (error) {
//Error fetching data
}
} }
renderBubble(props) { renderBubble(props) {
...@@ -77,17 +204,24 @@ class MessagesScreen extends React.Component { ...@@ -77,17 +204,24 @@ class MessagesScreen extends React.Component {
} }
render() { render() {
return ( if (this.state.isLoading)
<GiftedChat return (
renderBubble={this.renderBubble} <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
messages={this.state.messages} <ActivityIndicator size="large" />
onSend={this.onSend} </View>
user={{ )
_id: this.props.route.params.currentUser.id, else
}} return (
locale={'fr'} <GiftedChat
/> renderBubble={this.renderBubble}
) messages={this.state.messages}
onSend={this.onSend}
user={{
_id: this.state.user.id,
}}
locale={'fr'}
/>
)
} }
}; };
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment