diff --git a/src/components/FloatingSupportChat/Chat.tsx b/src/components/FloatingSupportChat/Chat.tsx index db3f2c6..114908c 100644 --- a/src/components/FloatingSupportChat/Chat.tsx +++ b/src/components/FloatingSupportChat/Chat.tsx @@ -1,13 +1,14 @@ import { Box, FormControl, IconButton, InputAdornment, InputBase, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; import { createTicket, getUnauthTicketMessages, sendTicketMessage, subscribeToUnauthTicketMessages } from "@root/api/tickets"; import { GetMessagesRequest, TicketMessage } from "@root/model/ticket"; -import { addOrUpdateUnauthMessages, setUnauthTicketFetchState, useUnauthTicketStore, incrementUnauthMessageApiPage, setUnauthIsPreventAutoscroll, setUnauthSessionData } from "@root/stores/unauthTicket"; +import { addOrUpdateUnauthMessages, setUnauthTicketFetchState, useUnauthTicketStore, incrementUnauthMessageApiPage, setUnauthIsPreventAutoscroll, setUnauthSessionData, setIsMessageSending } from "@root/stores/unauthTicket"; import { enqueueSnackbar } from "notistack"; import { useEffect, useRef, useState } from "react"; import ChatMessage from "../ChatMessage"; import SendIcon from "../icons/SendIcon"; import UserCircleIcon from "./UserCircleIcon"; import { throttle } from "@root/utils/decorators"; +import { getMessageFromFetchError } from "@root/utils/backendMessageHandler"; interface Props { @@ -22,6 +23,7 @@ export default function Chat({ sx }: Props) { const messages = useUnauthTicketStore(state => state.messages); const messageApiPage = useUnauthTicketStore(state => state.apiPage); const messagesPerPage = useUnauthTicketStore(state => state.messagesPerPage); + const isMessageSending = useUnauthTicketStore(state => state.isMessageSending); const messagesFetchStateRef = useRef(useUnauthTicketStore.getState().fetchState); const isPreventAutoscroll = useUnauthTicketStore(state => state.isPreventAutoscroll); const lastMessageId = useUnauthTicketStore(state => state.lastMessageId); @@ -124,31 +126,41 @@ export default function Chat({ sx }: Props) { useEffect(() => useUnauthTicketStore.subscribe(state => (messagesFetchStateRef.current = state.fetchState)), []); async function handleSendMessage() { - if (!messageField) return; + if (!messageField || isMessageSending) return; if (!sessionData) { - const response = await createTicket({ + setIsMessageSending(true); + createTicket({ Title: "Unauth title", Message: messageField, - }, false); - - setUnauthSessionData({ - ticketId: response.Ticket, - sessionId: response.sess, + }, false).then(response => { + setUnauthSessionData({ + ticketId: response.Ticket, + sessionId: response.sess, + }); + }).catch(error => { + const errorMessage = getMessageFromFetchError(error); + if (errorMessage) enqueueSnackbar(errorMessage); + }).finally(() => { + setMessageField(""); + setIsMessageSending(false); }); } else { + setIsMessageSending(true); sendTicketMessage({ ticket: sessionData.ticketId, message: messageField, lang: "ru", files: [], }, true).catch(error => { - console.log("Coudn't send message", error); - enqueueSnackbar(error.message); + const errorMessage = getMessageFromFetchError(error); + if (errorMessage) enqueueSnackbar(errorMessage); + }).finally(() => { + setMessageField(""); + setIsMessageSending(false); }); } - setMessageField(""); } function scrollToBottom(behavior?: ScrollBehavior) { @@ -259,12 +271,14 @@ export default function Chat({ sx }: Props) { endAdornment={ ()( devtools( (set, get) => ({ sessionData: null, + isMessageSending: false, messages: [], fetchState: "idle", apiPage: 0, @@ -44,6 +46,7 @@ export const useUnauthTicketStore = create()( ); export const setUnauthSessionData = (sessionData: UnauthTicketStore["sessionData"]) => useUnauthTicketStore.setState({ sessionData }); +export const setIsMessageSending = (isMessageSending: UnauthTicketStore["isMessageSending"]) => useUnauthTicketStore.setState({ isMessageSending }); export const addOrUpdateUnauthMessages = (receivedMessages: TicketMessage[]) => { const state = useUnauthTicketStore.getState();