upgrade kitui

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",

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<TicketMessage>({

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<Ticket>({
@@ -50,11 +51,11 @@ export default function Support() {
         >
             {!upMd && (
                 <Collapse headerText="Тикеты">
-                    <TicketList ticketsFetchState={ticketsFetchState} />
+                    <TicketList />
                 </Collapse>
             )}
             <Chat />
-            {upMd && <TicketList ticketsFetchState={ticketsFetchState} />}
+            {upMd && <TicketList />}
         </Box>
     );
 }

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<typeof useTickets>;
-}
-
-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<HTMLDivElement>(null);
 
     useEffect(function updateCurrentPageOnScroll() {

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<MessageStore>()(
@@ -21,6 +23,7 @@ export const useMessageStore = create<MessageStore>()(
             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();

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<TicketStore>()(
@@ -15,6 +17,7 @@ export const useTicketStore = create<TicketStore>()(
             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 });

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"