React native - how to refresh screen when message has been sent? - react-native

Question

so currently I have 2 simulators open. Each simulator is logged in as a different user. When I enter the chat between these 2 users, messages are getting sent live in the socket which is perfect.
My problem:
Example: if user 1 is on the all messages screen and user 2 is inside the chat. And user 2 sends user 1 a message, user 1's screen does not automatically update with the new message, I need to either scroll to refresh or navigate from one page to the other.
How should I implement the when a new message is sent it gets shown to user 1?
Here is my code:
AllMessagesScreen.js
const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const[page,setPage]=useState(0);
const [refreshing, setRefreshing] = useState(false);
const loadPosts = async () => {
setLoading(true);
const response = await messagesApi.getMessages();
setLoading(false);
if(refreshing) setRefreshing(false);
if (!response.ok) return setError(true);
setError(false);
setPosts(response.data)
};
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
loadPosts();
});
return unsubscribe;
}, [navigation]);
return(
<FlatList
data={posts}
keyExtractor={(listing) => listing.id.toString()}
renderItem={({ item,index }) => (
<MessagesList
title={item.Post.title}
subTitle={item.Messages[0].message}
onPress={() => navigation.navigate(routes.CHAT,{message:item,index})}
/>
)}
ItemSeparatorComponent={
ListItemSeparator
}
refreshing={refreshing}
onRefresh={() => {
loadPosts()
}}
/>
In other words, when a message is sent in the chat screen I want my allmessages screen to re-render, currently it is only getting render when I scroll to refresh or navigate to allmessages screen.
If you require any additional information please tell me, I will provide it immediately. Thank you
chat screen.js
function ChatScreen({route,navigation}) {
const message = route.params.message;
const [messages, setMessages] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [text, setText] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [socket, setSocket] = useState(null);
const { user } = useAuth();
const index = route.params.index;
const updateView = route.params.updateView;
useEffect(() => {
const newsocket =io.connect("IPADDRESS")
setMessages(message.Messages)
newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
});
newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => [msg, ...messages]);
});
return(()=>newsocket.close());
}, []);

Answer 1

Let's say you have the groups schema like this:
{
id: string;
name: string;
}
and messages schema like this:
{
id: string;
groupId: string;
text: string;
}
Now to recognise that a new message has been sent in a group you can add lastMessage in group schema, like this:
{
id: string;
name: string;
lastMessage: Message;
}
This way your whenever a new message is sent, respective group will change, which will make the web-socket emit an event and you will get updated data.
In you db in lastMessage field you can have foreign key to message collection, but when sending the json to frontend send the whole message object.
Also you will have to update your function for message creation to update the group too with lastMessage.
If you have creation time in messages schema, having lastMessage in group will help with sorting them too, like showing group with latest message on top.