Commit 012d0369 authored by Balasuriya D.A.M.'s avatar Balasuriya D.A.M.

Fecth All Messages

parent ef8698b3
import { Box, FormControl, IconButton, Input, Spinner, Text, useToast } from "@chakra-ui/react"; import { Box, FormControl, IconButton, Input, Spinner, Text, useToast } from "@chakra-ui/react";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { ChatState } from "../Context/ChatProvider"; import { ChatState } from "../Context/ChatProvider";
import { ArrowBackIcon } from "@chakra-ui/icons"; import { ArrowBackIcon } from "@chakra-ui/icons";
import { getSender, getSenderFull } from "../config/ChatLogics"; import { getSender, getSenderFull } from "../config/ChatLogics";
import ProfileModal from "./miscellaneous/ProfileModal"; import ProfileModal from "./miscellaneous/ProfileModal";
import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal"; import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal";
import axios from "axios"; import axios from "axios";
import "./styles.css";
const SingleChat = ({ fetchAgain, setFetchAgain }) => { const SingleChat = ({ fetchAgain, setFetchAgain }) => {
...@@ -17,6 +18,43 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => { ...@@ -17,6 +18,43 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
const toast = useToast(); const toast = useToast();
const { user, selectedChat, setSelectedChat } = ChatState(); const { user, selectedChat, setSelectedChat } = ChatState();
const fetchMessages = async () => {
if (!selectedChat) return;
try {
const config = {
headers: {
Authorization: `Bearer ${user.token}`,
},
};
setLoading(true);
const { data } = await axios.get(
`/api/message/${selectedChat._id}`,
config
);
console.log(messages);
setMessages(data);
setLoading(false);
} catch (error) {
toast({
title: "Error Occured!",
description: "Failed to Load the Messages",
status: "error",
duration: 5000,
isClosable: true,
position: "bottom",
});
}
};
useEffect(() => {
fetchMessages();
}, [selectedChat]);
const sendMessage = async(event) => { const sendMessage = async(event) => {
if (event.key === "Enter" && newMessage) { if (event.key === "Enter" && newMessage) {
try { try {
...@@ -91,6 +129,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => { ...@@ -91,6 +129,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
<UpdateGroupChatModal <UpdateGroupChatModal
fetchAgain={fetchAgain} fetchAgain={fetchAgain}
setFetchAgain={setFetchAgain} setFetchAgain={setFetchAgain}
fetchMessages={fetchMessages}
/> />
</> </>
)} )}
...@@ -115,7 +154,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => { ...@@ -115,7 +154,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
margin="auto" margin="auto"
/> />
) : ( ) : (
<div>{/* Messages */ }</div> <div className="messages">{/* Messages */ }</div>
)} )}
<FormControl onKeyDown={sendMessage} isRequired mt={3}> <FormControl onKeyDown={sendMessage} isRequired mt={3}>
......
...@@ -6,7 +6,7 @@ import UserBadgeItem from "../UserAvatar/UserBadgeItem"; ...@@ -6,7 +6,7 @@ import UserBadgeItem from "../UserAvatar/UserBadgeItem";
import axios from "axios"; import axios from "axios";
import UserListItem from "../UserAvatar/UserListItem"; import UserListItem from "../UserAvatar/UserListItem";
const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => { const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain, fetchMessages }) => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const [groupChatName, setGroupChatName] = useState(); const [groupChatName, setGroupChatName] = useState();
...@@ -113,6 +113,7 @@ const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => { ...@@ -113,6 +113,7 @@ const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
user1._id === user._id ? setSelectedChat() : setSelectedChat(data); user1._id === user._id ? setSelectedChat() : setSelectedChat(data);
setFetchAgain(!fetchAgain); setFetchAgain(!fetchAgain);
fetchMessages();
setLoading(false); setLoading(false);
} catch (error) { } catch (error) {
......
.messages{
display: flex;
flex-direction: column;
overflow-y: scroll;
scrollbar-width: none;
}
\ No newline at end of file
...@@ -10,15 +10,17 @@ import ChatProvider from "./Context/ChatProvider"; ...@@ -10,15 +10,17 @@ import ChatProvider from "./Context/ChatProvider";
ReactDOM.render( ReactDOM.render(
<ChatProvider>
<BrowserRouter> <BrowserRouter>
<ChatProvider>
<ChakraProvider> <ChakraProvider>
<App /> <App />
</ChakraProvider> </ChakraProvider>
</BrowserRouter>
</ChatProvider>, </ChatProvider>
</BrowserRouter>,
document.getElementById("root") document.getElementById("root")
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment