diff --git a/package.json b/package.json index a0de3af..4a5947e 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "@date-io/dayjs": "^2.15.0", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", - "@frontend/kitui": "^1.0.27", + "@frontend/kitui": "^1.0.44", "@material-ui/pickers": "^3.3.10", "@mui/icons-material": "^5.10.3", "@mui/material": "^5.10.5", diff --git a/src/pages/dashboard/Content/Support/Chat/Chat.tsx b/src/pages/dashboard/Content/Support/Chat/Chat.tsx index 57e0ad1..2347a48 100644 --- a/src/pages/dashboard/Content/Support/Chat/Chat.tsx +++ b/src/pages/dashboard/Content/Support/Chat/Chat.tsx @@ -1,5 +1,5 @@ import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material"; -import { addOrUpdateMessages, clearMessageState, incrementMessageApiPage, setIsPreventAutoscroll, useMessageStore } from "@root/stores/messages"; +import { addOrUpdateMessages, clearMessageState, incrementMessageApiPage, setIsPreventAutoscroll, setTicketMessagesFetchState, useMessageStore } from "@root/stores/messages"; import Message from "./Message"; import SendIcon from "@mui/icons-material/Send"; import AttachFileIcon from "@mui/icons-material/AttachFile"; @@ -25,16 +25,17 @@ export default function Chat() { const messageApiPage = useMessageStore(state => state.apiPage); const messagesPerPage = useMessageStore(state => state.messagesPerPage); const isPreventAutoscroll = useMessageStore(state => state.isPreventAutoscroll); + const fetchState = useMessageStore(state => state.ticketMessagesFetchState); const lastMessageId = useMessageStore(state => state.lastMessageId); const ticket = tickets.find(ticket => ticket.id === ticketId); - const fetchState = useTicketMessages({ + useTicketMessages({ url: "https://admin.pena.digital/heruvym/getMessages", ticketId, messagesPerPage, messageApiPage, - onNewMessages: messages => { + onSuccess: messages => { if (chatBoxRef.current && chatBoxRef.current.scrollTop < 1) chatBoxRef.current.scrollTop = 1; addOrUpdateMessages(messages); }, @@ -42,6 +43,7 @@ export default function Chat() { const message = getMessageFromFetchError(error); if (message) enqueueSnackbar(message); }, + onFetchStateChange: setTicketMessagesFetchState, }); useSSESubscription({ diff --git a/src/pages/dashboard/Content/Support/Support.tsx b/src/pages/dashboard/Content/Support/Support.tsx index e4b6efa..2bed321 100644 --- a/src/pages/dashboard/Content/Support/Support.tsx +++ b/src/pages/dashboard/Content/Support/Support.tsx @@ -3,10 +3,10 @@ import Chat from "./Chat/Chat"; import Collapse from "./Collapse"; import TicketList from "./TicketList/TicketList"; import { Ticket } from "@root/model/ticket"; -import { clearTickets, updateTickets, useTicketStore } from "@root/stores/tickets"; +import { clearTickets, setTicketsFetchState, updateTickets, useTicketStore } from "@root/stores/tickets"; import { enqueueSnackbar } from "notistack"; import { clearMessageState } from "@root/stores/messages"; -import { getMessageFromFetchError, useSSESubscription, useTickets, useToken } from "@frontend/kitui"; +import { getMessageFromFetchError, useSSESubscription, useTicketsFetcher, useToken } from "@frontend/kitui"; export default function Support() { const theme = useTheme(); @@ -15,17 +15,18 @@ export default function Support() { const ticketApiPage = useTicketStore((state) => state.apiPage); const token = useToken(); - const ticketsFetchState = useTickets({ + useTicketsFetcher({ url: "https://admin.pena.digital/heruvym/getTickets", ticketsPerPage, ticketApiPage, - onNewTickets: result => { + onSuccess: result => { if (result.data) updateTickets(result.data); }, onError: (error: Error) => { const message = getMessageFromFetchError(error); if (message) enqueueSnackbar(message); }, + onFetchStateChange: setTicketsFetchState, }); useSSESubscription({ @@ -50,11 +51,11 @@ export default function Support() { > {!upMd && ( - + )} - {upMd && } + {upMd && } ); } diff --git a/src/pages/dashboard/Content/Support/TicketList/TicketList.tsx b/src/pages/dashboard/Content/Support/TicketList/TicketList.tsx index ec04b1a..b871701 100644 --- a/src/pages/dashboard/Content/Support/TicketList/TicketList.tsx +++ b/src/pages/dashboard/Content/Support/TicketList/TicketList.tsx @@ -6,17 +6,13 @@ import { incrementTicketsApiPage, useTicketStore } from "@root/stores/tickets"; import { throttle } from '@root/utils/throttle'; import { useEffect, useRef } from "react"; import TicketItem from "./TicketItem"; -import { useTickets } from '@frontend/kitui'; -interface Props { - ticketsFetchState: ReturnType; -} - -export default function TicketList({ ticketsFetchState }: Props) { +export default function TicketList() { const theme = useTheme(); const upMd = useMediaQuery(theme.breakpoints.up("md")); const tickets = useTicketStore(state => state.tickets); + const ticketsFetchState = useTicketStore(state => state.ticketsFetchState); const ticketsBoxRef = useRef(null); useEffect(function updateCurrentPageOnScroll() { diff --git a/src/stores/messages.ts b/src/stores/messages.ts index 374837a..5a00be7 100644 --- a/src/stores/messages.ts +++ b/src/stores/messages.ts @@ -1,3 +1,4 @@ +import { FetchState } from "@frontend/kitui"; import { TicketMessage } from "@root/model/ticket"; import { create } from "zustand"; import { devtools } from "zustand/middleware"; @@ -10,6 +11,7 @@ interface MessageStore { messagesPerPage: number; lastMessageId: string | undefined; isPreventAutoscroll: boolean; + ticketMessagesFetchState: FetchState; } export const useMessageStore = create()( @@ -21,6 +23,7 @@ export const useMessageStore = create()( apiPage: 0, lastMessageId: undefined, isPreventAutoscroll: false, + ticketMessagesFetchState: "idle", }), { name: "Messages", @@ -60,6 +63,8 @@ export const incrementMessageApiPage = () => { export const setIsPreventAutoscroll = (isPreventAutoscroll: boolean) => useMessageStore.setState({ isPreventAutoscroll }); +export const setTicketMessagesFetchState = (ticketMessagesFetchState: FetchState) => useMessageStore.setState({ ticketMessagesFetchState }); + function sortMessagesByTime(ticket1: TicketMessage, ticket2: TicketMessage) { const date1 = new Date(ticket1.created_at).getTime(); const date2 = new Date(ticket2.created_at).getTime(); diff --git a/src/stores/tickets.ts b/src/stores/tickets.ts index a05ada4..8861dac 100644 --- a/src/stores/tickets.ts +++ b/src/stores/tickets.ts @@ -1,3 +1,4 @@ +import { FetchState } from "@frontend/kitui"; import { Ticket } from "@root/model/ticket"; import { create } from "zustand"; import { devtools } from "zustand/middleware"; @@ -7,6 +8,7 @@ interface TicketStore { tickets: Ticket[]; apiPage: number; ticketsPerPage: number; + ticketsFetchState: FetchState; } export const useTicketStore = create()( @@ -15,6 +17,7 @@ export const useTicketStore = create()( tickets: [], apiPage: 0, ticketsPerPage: 20, + ticketsFetchState: "idle", }), { name: "Tickets", @@ -39,3 +42,5 @@ export const updateTickets = (receivedTickets: Ticket[]) => { }; export const clearTickets = () => useTicketStore.setState({ tickets: [] }); + +export const setTicketsFetchState = (ticketsFetchState: FetchState) => useTicketStore.setState({ ticketsFetchState }); diff --git a/yarn.lock b/yarn.lock index 397ff8e..6de11dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1433,10 +1433,10 @@ lodash.isundefined "^3.0.1" lodash.uniq "^4.5.0" -"@frontend/kitui@^1.0.27": - version "1.0.27" - resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.27.tgz#abb14c6d79289b03c01253835a5e01e7528080e0" - integrity sha1-q7FMbXkomwPAElODWl4B51KAgOA= +"@frontend/kitui@^1.0.44": + version "1.0.44" + resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.44.tgz#7a6e48e37294b6cc283e22fa0fe6ee4903a843aa" + integrity sha1-em5I43KUtswoPiL6D+buSQOoQ6o= dependencies: immer "^10.0.2" reconnecting-eventsource "^1.6.2"