Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add loading state for message sending and fix multiple message sends #183

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: add loading state for message sending and fix multiple message sends #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15af03e
Add loading state for message sending
Jawad-Ali2 Jul 5, 2024
a149df1
fix: prevent multiple messages being sent on spam
Jawad-Ali2 Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions examples/apps/chat-app/web/react-vite-tailwind/src/pages/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const ChatPage = () => {
const [selfTyping, setSelfTyping] = useState(false); // To track if the current user is typing

const [message, setMessage] = useState(""); // To store the currently typed message
const [messageBeingSent, setMessageBeingSent] = useState(false); // To show loading when sending a message
const [localSearchQuery, setLocalSearchQuery] = useState(""); // For local search functionality

const [attachedFiles, setAttachedFiles] = useState<File[]>([]); // To store files attached to messages
Expand Down Expand Up @@ -169,9 +170,11 @@ const ChatPage = () => {
const sendChatMessage = async () => {
// If no current chat ID exists or there's no socket connection, exit the function
if (!currentChat.current?._id || !socket) return;
if (messageBeingSent) return;

// Emit a STOP_TYPING_EVENT to inform other users/participants that typing has stopped
socket.emit(STOP_TYPING_EVENT, currentChat.current?._id);
setMessageBeingSent(true); // Set the message sent state to true

// Use the requestHandler to send the message and handle potential response or error
await requestHandler(
Expand All @@ -194,6 +197,7 @@ const ChatPage = () => {
// If there's an error during the message sending process, raise an alert
alert
);
setMessageBeingSent(false); // Reset the message sent state
};
const deleteChatMessage = async (message: ChatMessageInterface) => {
//ONClick delete the message and reload the chat when deleteMessage socket gives any response in chat.tsx
Expand Down Expand Up @@ -633,6 +637,7 @@ const ChatPage = () => {
placeholder="Message"
value={message}
onChange={handleOnMessageChange}
disabled={messageBeingSent}
onKeyDown={(e) => {
if (e.key === "Enter") {
sendChatMessage();
Expand All @@ -642,9 +647,17 @@ const ChatPage = () => {
<button
onClick={sendChatMessage}
disabled={!message && attachedFiles.length <= 0}
className="p-4 rounded-full bg-dark hover:bg-secondary disabled:opacity-50"
className="rounded-full bg-dark hover:bg-secondary disabled:opacity-50"
>
<PaperAirplaneIcon className="w-6 h-6" />
{messageBeingSent ? (
<div style={{ transform: "scale(0.7)" }}>
<Typing />
</div>
) : (
<div className="p-4">
<PaperAirplaneIcon className="w-6 h-6" />
</div>
)}
</button>
</div>
</>
Expand Down
Loading