From 13178491d0d2f3a7a02c5af35b70c6c57c91f13a Mon Sep 17 00:00:00 2001 From: Mgrdich Date: Sat, 25 May 2024 21:33:38 +0400 Subject: [PATCH 1/5] Fix the refresh pagination issue on topic messages --- frontend/src/lib/hooks/api/topicMessages.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index f9da9a436..f4c685aa4 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -62,6 +62,7 @@ export const useTopicMessages = ({ const requestParams = new URLSearchParams({ limit: searchParams.get(MessagesFilterKeys.limit) || MESSAGES_PER_PAGE, mode: searchParams.get(MessagesFilterKeys.mode) || '', + r: searchParams.get(MessagesFilterKeys.r) || '', }); [ From e2f08083db101c1ad9e5ffc880408cff23a1110f Mon Sep 17 00:00:00 2001 From: Mgrdich Date: Sat, 25 May 2024 22:27:50 +0400 Subject: [PATCH 2/5] Fix the topics pagination and the refresh page --- .../Topics/Topic/Messages/MessagesTable.tsx | 6 +++--- .../Messages/__test__/MessagesTable.spec.tsx | 2 +- frontend/src/lib/hooks/api/topicMessages.tsx | 16 +++++++++++++--- frontend/src/lib/hooks/useMessagesFilters.ts | 19 +++++++++++++++++++ 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx index 4da134c85..813cabcfa 100644 --- a/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx +++ b/frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx @@ -5,7 +5,7 @@ import { TopicMessage } from 'generated-sources'; import React, { useState } from 'react'; import { Button } from 'components/common/Button/Button'; import * as S from 'components/common/NewTable/Table.styled'; -import { useIsLiveMode, useRefreshData } from 'lib/hooks/useMessagesFilters'; +import { usePaginateTopics, useIsLiveMode } from 'lib/hooks/useMessagesFilters'; import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore'; import PreviewModal from './PreviewModal'; @@ -20,7 +20,7 @@ const MessagesTable: React.FC = ({ messages, isFetching, }) => { - const refreshData = useRefreshData(); + const paginate = usePaginateTopics(); const [previewFor, setPreviewFor] = useState(null); const [keyFilters, setKeyFilters] = useState([]); @@ -101,7 +101,7 @@ const MessagesTable: React.FC = ({ disabled={isLive || isFetching || !nextCursor} buttonType="secondary" buttonSize="L" - onClick={refreshData} + onClick={paginate} > Next → diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx index d179a2100..808dde9e4 100644 --- a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx +++ b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx @@ -30,7 +30,7 @@ jest.mock('react-router-dom', () => ({ jest.mock('lib/hooks/useMessagesFilters', () => ({ useIsLiveMode: jest.fn(), - useRefreshData: jest.fn(), + usePaginateTopics: jest.fn(), })); describe('MessagesTable', () => { diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index f4c685aa4..abbcd6dfe 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -13,7 +13,10 @@ import { showServerError } from 'lib/errorHandling'; import { useMutation, useQuery } from '@tanstack/react-query'; import { messagesApiClient } from 'lib/api'; import { useSearchParams } from 'react-router-dom'; -import { MessagesFilterKeys } from 'lib/hooks/useMessagesFilters'; +import { + getCursorValue, + MessagesFilterKeys, +} from 'lib/hooks/useMessagesFilters'; import { convertStrToPollingMode } from 'lib/hooks/filterUtils'; import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore'; import { TopicName } from 'lib/interfaces/topic'; @@ -36,6 +39,7 @@ export const useTopicMessages = ({ const [isFetching, setIsFetching] = React.useState(false); const abortController = useRef(new AbortController()); const prevReqUrl = useRef(''); + const prevCursor = useRef(0); // get initial properties @@ -62,7 +66,6 @@ export const useTopicMessages = ({ const requestParams = new URLSearchParams({ limit: searchParams.get(MessagesFilterKeys.limit) || MESSAGES_PER_PAGE, mode: searchParams.get(MessagesFilterKeys.mode) || '', - r: searchParams.get(MessagesFilterKeys.r) || '', }); [ @@ -106,12 +109,19 @@ export const useTopicMessages = ({ const tempToString = tempCompareUrl.toString(); + const currentCursor = getCursorValue(searchParams); + // filters stay the say and we have cursor set cursor - if (nextCursor && tempToString === prevReqUrl.current) { + if ( + nextCursor && + tempToString === prevReqUrl.current && + prevCursor.current < currentCursor + ) { requestParams.set(MessagesFilterKeys.cursor, nextCursor); } prevReqUrl.current = tempToString; + prevCursor.current = currentCursor; await fetchEventSource(`${url}?${requestParams.toString()}`, { method: 'GET', signal: abortController.current.signal, diff --git a/frontend/src/lib/hooks/useMessagesFilters.ts b/frontend/src/lib/hooks/useMessagesFilters.ts index 613347433..874255f5a 100644 --- a/frontend/src/lib/hooks/useMessagesFilters.ts +++ b/frontend/src/lib/hooks/useMessagesFilters.ts @@ -52,6 +52,25 @@ export function useRefreshData(initSearchParams?: URLSearchParams) { }; } +export function getCursorValue(urlSearchParam: URLSearchParams) { + return parseInt(urlSearchParam.get(MessagesFilterKeys.cursor) || '0', 10); +} + +export function usePaginateTopics(initSearchParams?: URLSearchParams) { + const [, setSearchParams] = useSearchParams(initSearchParams); + return () => { + setSearchParams((params) => { + const cursor = getCursorValue(params) + 1; + + if (cursor) { + params.set(MessagesFilterKeys.cursor, cursor.toString()); + } + + return params; + }); + }; +} + export function useMessagesFilters() { const [searchParams, setSearchParams] = useSearchParams(); const refreshData = useRefreshData(searchParams); From cd61493595189a90c84d094f6a2a7ce50de4b008 Mon Sep 17 00:00:00 2001 From: Mgrdich Date: Sat, 25 May 2024 23:11:19 +0400 Subject: [PATCH 3/5] Fix the comment --- frontend/src/lib/hooks/api/topicMessages.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index abbcd6dfe..d245685f1 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -111,7 +111,7 @@ export const useTopicMessages = ({ const currentCursor = getCursorValue(searchParams); - // filters stay the say and we have cursor set cursor + // filters stay the same and we have cursor set cursor if ( nextCursor && tempToString === prevReqUrl.current && From 7448f709b8032254bfcbb832d6b2c256773ec256 Mon Sep 17 00:00:00 2001 From: Mgrdich Date: Sun, 26 May 2024 17:14:43 +0400 Subject: [PATCH 4/5] Fix the cursor fetching problem --- frontend/src/lib/hooks/api/topicMessages.tsx | 10 +--------- frontend/src/lib/hooks/useMessagesFilters.ts | 13 ++++++++++++- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/src/lib/hooks/api/topicMessages.tsx b/frontend/src/lib/hooks/api/topicMessages.tsx index d245685f1..ec407c901 100644 --- a/frontend/src/lib/hooks/api/topicMessages.tsx +++ b/frontend/src/lib/hooks/api/topicMessages.tsx @@ -38,7 +38,6 @@ export const useTopicMessages = ({ React.useState(); const [isFetching, setIsFetching] = React.useState(false); const abortController = useRef(new AbortController()); - const prevReqUrl = useRef(''); const prevCursor = useRef(0); // get initial properties @@ -107,20 +106,13 @@ export const useTopicMessages = ({ const tempCompareUrl = new URLSearchParams(requestParams); tempCompareUrl.delete(MessagesFilterKeys.cursor); - const tempToString = tempCompareUrl.toString(); - const currentCursor = getCursorValue(searchParams); // filters stay the same and we have cursor set cursor - if ( - nextCursor && - tempToString === prevReqUrl.current && - prevCursor.current < currentCursor - ) { + if (nextCursor && prevCursor.current < currentCursor) { requestParams.set(MessagesFilterKeys.cursor, nextCursor); } - prevReqUrl.current = tempToString; prevCursor.current = currentCursor; await fetchEventSource(`${url}?${requestParams.toString()}`, { method: 'GET', diff --git a/frontend/src/lib/hooks/useMessagesFilters.ts b/frontend/src/lib/hooks/useMessagesFilters.ts index 874255f5a..fb0710021 100644 --- a/frontend/src/lib/hooks/useMessagesFilters.ts +++ b/frontend/src/lib/hooks/useMessagesFilters.ts @@ -53,7 +53,16 @@ export function useRefreshData(initSearchParams?: URLSearchParams) { } export function getCursorValue(urlSearchParam: URLSearchParams) { - return parseInt(urlSearchParam.get(MessagesFilterKeys.cursor) || '0', 10); + const cursor = parseInt( + urlSearchParam.get(MessagesFilterKeys.cursor) || '0', + 10 + ); + + if (Number.isNaN(cursor)) { + return 0; + } + + return cursor; } export function usePaginateTopics(initSearchParams?: URLSearchParams) { @@ -87,6 +96,8 @@ export function useMessagesFilters() { params.delete(MessagesFilterKeys.activeFilterNPId); params.delete(MessagesFilterKeys.smartFilterId); } + + params.delete(MessagesFilterKeys.cursor); return params; }); }, []); From 561694936bac9322d33786dfb4f905226812827f Mon Sep 17 00:00:00 2001 From: Mgrdich Date: Sun, 26 May 2024 17:16:30 +0400 Subject: [PATCH 5/5] Fix prettier issue --- frontend/src/lib/hooks/useMessagesFilters.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/lib/hooks/useMessagesFilters.ts b/frontend/src/lib/hooks/useMessagesFilters.ts index fb0710021..c72a91b49 100644 --- a/frontend/src/lib/hooks/useMessagesFilters.ts +++ b/frontend/src/lib/hooks/useMessagesFilters.ts @@ -98,6 +98,7 @@ export function useMessagesFilters() { } params.delete(MessagesFilterKeys.cursor); + return params; }); }, []);