PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

fix message sending block

Browse Source
This commit is contained in:
nflnkr 2023-05-23 15:49:51 +03:00
parent a70ae04dae
commit 0610368d7b
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/FloatingSupportChat/Chat.tsx
View File

@ -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={
<InputAdornment position="end">
<IconButton
disabled={isMessageSending}
onClick={handleSendMessage}
sx={{
height: "53px",
width: "53px",
mr: "13px",
p: 0,
opacity: isMessageSending ? 0.3 : 1,
}}
>
<SendIcon style={{

3
src/stores/unauthTicket.ts
View File

@ -8,6 +8,7 @@ interface UnauthTicketStore {
ticketId: string;
sessionId: string;
} | null;
isMessageSending: boolean;
messages: TicketMessage[];
fetchState: "idle" | "fetching" | "all fetched";
apiPage: number;
@ -21,6 +22,7 @@ export const useUnauthTicketStore = create<UnauthTicketStore>()(
devtools(
(set, get) => ({
sessionData: null,
isMessageSending: false,
messages: [],
fetchState: "idle",
apiPage: 0,
@ -44,6 +46,7 @@ export const useUnauthTicketStore = create<UnauthTicketStore>()(
);
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();