From 503c4244ae9006865aba6d8161716c0935f51587 Mon Sep 17 00:00:00 2001 From: utas-raymondng Date: Fri, 13 Sep 2024 13:11:50 +1000 Subject: [PATCH 1/4] Fix case where load more not work --- .../search-page/subpages/ResultSection.tsx | 37 ++++++++++++++----- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx index 706f9051..8d1e1f3c 100644 --- a/src/pages/search-page/subpages/ResultSection.tsx +++ b/src/pages/search-page/subpages/ResultSection.tsx @@ -6,9 +6,12 @@ import { DEFAULT_SEARCH_PAGE, fetchResultAppendStore, } from "../../../components/common/store/searchReducer"; -import React, { useCallback, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import ResultCards from "../../../components/result/ResultCards"; -import { OGCCollection } from "../../../components/common/store/OGCCollectionDefinitions"; +import { + OGCCollection, + OGCCollections, +} from "../../../components/common/store/OGCCollectionDefinitions"; import { useSelector } from "react-redux"; import store, { getComponentState, @@ -45,6 +48,12 @@ const ResultSection: React.FC = ({ const reduxContents = useSelector( searchQueryResult ); + const [content, setContent] = useState(reduxContents); + + useEffect(() => { + setContent(reduxContents); + }, [reduxContents]); + // Use to remember last layout, it is either LIST or GRID at the moment const [currentLayout, setCurrentLayout] = useState< SearchResultLayoutEnum.LIST | SearchResultLayoutEnum.GRID @@ -58,11 +67,21 @@ const ResultSection: React.FC = ({ // to go the next batch of record. const paramPaged = createSearchParamFrom(componentParam, { pagesize: DEFAULT_SEARCH_PAGE, - searchafter: reduxContents.result.search_after, + searchafter: content.result.search_after, }); - dispatch(fetchResultAppendStore(paramPaged)); - }, [dispatch, reduxContents]); + dispatch(fetchResultAppendStore(paramPaged)) + .unwrap() + .then((collections: OGCCollections) => { + // Make a new object so useState trigger + const c: CollectionsQueryType = { + result: content.result.clone(), + query: content.query, + }; + c.result.merge(collections); + setContent(c); + }); + }, [dispatch, content]); const onChangeLayout = useCallback( (layout: SearchResultLayoutEnum) => { @@ -83,7 +102,7 @@ const ResultSection: React.FC = ({ ); return ( - reduxContents && ( + content && ( = ({ @@ -106,7 +125,7 @@ const ResultSection: React.FC = ({ Date: Fri, 13 Sep 2024 13:45:36 +1000 Subject: [PATCH 2/4] Fix case on change sort load more not work --- .../search-page/subpages/ResultSection.tsx | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx index 8d1e1f3c..bd068cf1 100644 --- a/src/pages/search-page/subpages/ResultSection.tsx +++ b/src/pages/search-page/subpages/ResultSection.tsx @@ -48,11 +48,14 @@ const ResultSection: React.FC = ({ const reduxContents = useSelector( searchQueryResult ); - const [content, setContent] = useState(reduxContents); - useEffect(() => { - setContent(reduxContents); - }, [reduxContents]); + const onChangeSortingInterceptor = useCallback( + (v: SortResultEnum) => { + // If we changed the sorting, then we need to refresh content + onChangeSorting(v); + }, + [onChangeSorting] + ); // Use to remember last layout, it is either LIST or GRID at the moment const [currentLayout, setCurrentLayout] = useState< @@ -67,21 +70,11 @@ const ResultSection: React.FC = ({ // to go the next batch of record. const paramPaged = createSearchParamFrom(componentParam, { pagesize: DEFAULT_SEARCH_PAGE, - searchafter: content.result.search_after, + searchafter: reduxContents.result.search_after, }); - dispatch(fetchResultAppendStore(paramPaged)) - .unwrap() - .then((collections: OGCCollections) => { - // Make a new object so useState trigger - const c: CollectionsQueryType = { - result: content.result.clone(), - query: content.query, - }; - c.result.merge(collections); - setContent(c); - }); - }, [dispatch, content]); + dispatch(fetchResultAppendStore(paramPaged)); + }, [dispatch, reduxContents.result.search_after]); const onChangeLayout = useCallback( (layout: SearchResultLayoutEnum) => { @@ -102,7 +95,7 @@ const ResultSection: React.FC = ({ ); return ( - content && ( + reduxContents && ( = ({ Date: Fri, 13 Sep 2024 13:47:09 +1000 Subject: [PATCH 3/4] Fix case on change sort load more not work --- src/pages/search-page/subpages/ResultSection.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx index bd068cf1..80a0fdad 100644 --- a/src/pages/search-page/subpages/ResultSection.tsx +++ b/src/pages/search-page/subpages/ResultSection.tsx @@ -49,14 +49,6 @@ const ResultSection: React.FC = ({ searchQueryResult ); - const onChangeSortingInterceptor = useCallback( - (v: SortResultEnum) => { - // If we changed the sorting, then we need to refresh content - onChangeSorting(v); - }, - [onChangeSorting] - ); - // Use to remember last layout, it is either LIST or GRID at the moment const [currentLayout, setCurrentLayout] = useState< SearchResultLayoutEnum.LIST | SearchResultLayoutEnum.GRID @@ -112,7 +104,7 @@ const ResultSection: React.FC = ({ count={reduxContents.result.collections.length} total={reduxContents.result.total} onChangeLayout={onChangeLayout} - onChangeSorting={onChangeSortingInterceptor} + onChangeSorting={onChangeSorting} /> From 350de498c45670271eb57a57efa9a9b6047d259e Mon Sep 17 00:00:00 2001 From: utas-raymondng Date: Fri, 13 Sep 2024 14:15:03 +1000 Subject: [PATCH 4/4] Add aync to make update correct --- src/pages/search-page/subpages/ResultSection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx index 80a0fdad..9aa84e07 100644 --- a/src/pages/search-page/subpages/ResultSection.tsx +++ b/src/pages/search-page/subpages/ResultSection.tsx @@ -54,7 +54,7 @@ const ResultSection: React.FC = ({ SearchResultLayoutEnum.LIST | SearchResultLayoutEnum.GRID >(SearchResultLayoutEnum.LIST); - const fetchMore = useCallback(() => { + const fetchMore = useCallback(async () => { // This is very specific to how elastic works and then how to construct the query const componentParam: ParameterState = getComponentState(store.getState()); // Use standard param to get fields you need, record is stored in redux, @@ -64,8 +64,8 @@ const ResultSection: React.FC = ({ pagesize: DEFAULT_SEARCH_PAGE, searchafter: reduxContents.result.search_after, }); - - dispatch(fetchResultAppendStore(paramPaged)); + // Must use await so that record updated before you exit this call + await dispatch(fetchResultAppendStore(paramPaged)); }, [dispatch, reduxContents.result.search_after]); const onChangeLayout = useCallback(