Merge pull request #196 from aodn/bug/5969-fix-show-more-button

Bug/5969 fix show more button
aodn · Oct 15, 2024 · 0ed1fc0 · 0ed1fc0
2 parents eb77374 + 20251a5
commit 0ed1fc0
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 66 deletions.
diff --git a/src/components/common/buttons/DetailSubtabBtn.tsx b/src/components/common/buttons/DetailSubtabBtn.tsx
@@ -5,14 +5,14 @@ import { color } from "../../../styles/constants";
 interface DetailSubtabProps {
   id?: string;
   title: string;
-  navigate: () => void;
+  onClick: () => void;
   isBordered: boolean;
 }
 
 const DetailSubtabBtn: React.FC<DetailSubtabProps> = ({
   id,
   title,
-  navigate,
+  onClick,
   isBordered,
 }) => {
   const theme = useTheme();
@@ -42,7 +42,7 @@ const DetailSubtabBtn: React.FC<DetailSubtabProps> = ({
           textAlign: "center",
           backgroundColor: "#fff",
         }}
-        onClick={navigate}
+        onClick={onClick}
       >
         {title}
       </Button>

diff --git a/src/components/result/ListResultCard.tsx b/src/components/result/ListResultCard.tsx
@@ -20,10 +20,12 @@ import {
 import { FC, useState } from "react";
 import OrganizationLogo from "../logo/OrganizationLogo";
 import ResultCardButtonGroup from "./ResultCardButtonGroup";
-import { ResultCard } from "./ResultCards";
 import useTabNavigation from "../../hooks/useTabNavigation";
+import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
 
-interface ListResultCardProps extends ResultCard {
+interface ListResultCardProps {
+  content?: OGCCollection;
+  onClickCard?: (uuid: string) => void;
   isSelectedDataset?: boolean;
 }
 

diff --git a/src/components/result/ResultCards.tsx b/src/components/result/ResultCards.tsx
@@ -1,5 +1,10 @@
 import { useCallback, useRef } from "react";
-import { CollectionsQueryType } from "../common/store/searchReducer";
+import {
+  CollectionsQueryType,
+  createSearchParamFrom,
+  DEFAULT_SEARCH_PAGE,
+  fetchResultAppendStore,
+} from "../common/store/searchReducer";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
 import { Box, Grid, ListItem, SxProps, Theme } from "@mui/material";
 import GridResultCard from "./GridResultCard";
@@ -12,26 +17,15 @@ import { GRID_CARD_HEIGHT, LIST_CARD_HEIGHT } from "./constants";
 import { padding } from "../../styles/constants";
 import SelectedListCard from "./SelectedListCard";
 import SelectedGridCard from "./SelectedGridCard";
-
-export interface ResultCard {
-  content?: OGCCollection;
-  onClickCard?: (uuid: string) => void;
-}
-
-export interface ResultCardsList extends ResultCard {
-  contents: CollectionsQueryType;
-  layout?: SearchResultLayoutEnum;
-  onFetchMore?: (() => void) | undefined;
-  sx?: SxProps<Theme>;
-  datasetsSelected?: OGCCollection[];
-}
+import { ParameterState } from "../common/store/componentParamReducer";
+import store, { getComponentState } from "../common/store/store";
+import { useAppDispatch } from "../common/store/hooks";
 
 interface ResultCardsProps {
   content?: OGCCollection;
   onClickCard?: (uuid: string) => void;
   contents: CollectionsQueryType;
   layout?: SearchResultLayoutEnum;
-  onFetchMore?: (() => void) | undefined;
   sx?: SxProps<Theme>;
   datasetsSelected?: OGCCollection[];
 }
@@ -42,10 +36,25 @@ const ResultCards = ({
   sx,
   datasetsSelected,
   onClickCard = () => {},
-  onFetchMore,
 }: ResultCardsProps) => {
   const componentRef = useRef<HTMLDivElement | null>(null);
 
+  // Get contents from redux
+  const dispatch = useAppDispatch();
+  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,
+    // set page so that it return fewer records and append the search_after
+    // to go the next batch of record.
+    const paramPaged = createSearchParamFrom(componentParam, {
+      pagesize: DEFAULT_SEARCH_PAGE,
+      searchafter: contents.result.search_after,
+    });
+    // Must use await so that record updated before you exit this call
+    await dispatch(fetchResultAppendStore(paramPaged));
+  }, [dispatch, contents.result.search_after]);
+
   const hasSelectedDatasets = datasetsSelected && datasetsSelected.length > 0;
 
   const count = contents.result.collections.length;
@@ -57,12 +66,10 @@ const ResultCards = ({
         id="result-card-load-more-btn"
         title="Show more results"
         isBordered={false}
-        navigate={() => {
-          onFetchMore && onFetchMore();
-        }}
+        onClick={fetchMore}
       />
     );
-  }, [onFetchMore]);
+  }, [fetchMore]);
 
   const renderCells = useCallback(
     (
@@ -87,7 +94,7 @@ const ResultCards = ({
             }}
             style={style}
           >
-            {renderLoadMoreButton()}
+            {count !== total ? renderLoadMoreButton() : null}
           </ListItem>
         );
       } else {

diff --git a/src/pages/detail-page/subpages/tab-panels/NavigatablePanel.tsx b/src/pages/detail-page/subpages/tab-panels/NavigatablePanel.tsx
@@ -193,7 +193,7 @@ const NavigatablePanel: React.FC<NavigatablePanelProps> = ({
                 key={index}
                 title={child.title}
                 isBordered={isPositionInsideBlock(position, index)}
-                navigate={onNavigate(index)}
+                onClick={onNavigate(index)}
               />
             );
           })}

diff --git a/src/pages/search-page/SearchPage.tsx b/src/pages/search-page/SearchPage.tsx
@@ -47,7 +47,6 @@ import {
 import { useAppDispatch } from "../../components/common/store/hooks";
 
 const SEARCH_BAR_HEIGHT = 56;
-const RESULT_SECTION_WIDTH = 500;
 
 const isLoading = (count: number): boolean => {
   if (count > 0) {
@@ -331,10 +330,6 @@ const SearchPage = () => {
               {visibility === SearchResultLayoutEnum.VISIBLE && (
                 <Box>
                   <ResultSection
-                    sx={{
-                      height: "80vh",
-                      width: RESULT_SECTION_WIDTH,
-                    }}
                     onVisibilityChanged={onVisibilityChanged}
                     onClickCard={handleClickCard}
                     onChangeSorting={onChangeSorting}

diff --git a/src/pages/search-page/subpages/ResultSection.tsx b/src/pages/search-page/subpages/ResultSection.tsx
@@ -1,66 +1,43 @@
 import ResultPanelSimpleFilter from "../../../components/common/filters/ResultPanelSimpleFilter";
 import { Box } from "@mui/material";
-import {
-  CollectionsQueryType,
-  createSearchParamFrom,
-  DEFAULT_SEARCH_PAGE,
-  fetchResultAppendStore,
-} from "../../../components/common/store/searchReducer";
+import { CollectionsQueryType } from "../../../components/common/store/searchReducer";
 import { FC, useCallback, useState } from "react";
-import ResultCards, {
-  ResultCardsList,
-} from "../../../components/result/ResultCards";
+import ResultCards from "../../../components/result/ResultCards";
 import { useSelector } from "react-redux";
-import store, {
-  getComponentState,
+import {
   RootState,
   searchQueryResult,
 } from "../../../components/common/store/store";
-import { ParameterState } from "../../../components/common/store/componentParamReducer";
 import { SortResultEnum } from "../../../components/common/buttons/ResultListSortButton";
 import { SearchResultLayoutEnum } from "../../../components/common/buttons/MapViewButton";
 import CircleLoader from "../../../components/loading/CircleLoader";
-import { useAppDispatch } from "../../../components/common/store/hooks";
+import { OGCCollection } from "../../../components/common/store/OGCCollectionDefinitions";
 
-interface ResultSectionProps extends Partial<ResultCardsList> {
+interface ResultSectionProps {
   onVisibilityChanged?: (v: SearchResultLayoutEnum) => void;
   onChangeSorting: (v: SortResultEnum) => void;
   isLoading: boolean;
+  onClickCard?: (uuid: string) => void;
+  datasetsSelected?: OGCCollection[];
 }
 
+const RESULT_SECTION_WIDTH = 500;
+
 const ResultSection: FC<ResultSectionProps> = ({
   datasetsSelected,
-  sx,
   onVisibilityChanged,
   onChangeSorting,
   onClickCard,
   isLoading,
 }) => {
-  // Get contents from redux
-  const dispatch = useAppDispatch();
   const reduxContents = useSelector<RootState, CollectionsQueryType>(
     searchQueryResult
   );
-
   // Use to remember last layout, it is either LIST or GRID at the moment
   const [currentLayout, setCurrentLayout] = useState<
     SearchResultLayoutEnum.LIST | SearchResultLayoutEnum.GRID
   >(SearchResultLayoutEnum.LIST);
 
-  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,
-    // set page so that it return fewer records and append the search_after
-    // to go the next batch of record.
-    const paramPaged = createSearchParamFrom(componentParam, {
-      pagesize: DEFAULT_SEARCH_PAGE,
-      searchafter: reduxContents.result.search_after,
-    });
-    // Must use await so that record updated before you exit this call
-    await dispatch(fetchResultAppendStore(paramPaged));
-  }, [dispatch, reduxContents.result.search_after]);
-
   const onChangeLayout = useCallback(
     (layout: SearchResultLayoutEnum) => {
       if (
@@ -83,7 +60,8 @@ const ResultSection: FC<ResultSectionProps> = ({
     reduxContents && (
       <Box
         sx={{
-          ...sx,
+          width: RESULT_SECTION_WIDTH,
+          height: "80vh",
           display: "flex",
           flexDirection: "column",
           position: "relative",
@@ -105,7 +83,6 @@ const ResultSection: FC<ResultSectionProps> = ({
             layout={currentLayout}
             contents={reduxContents}
             onClickCard={onClickCard}
-            onFetchMore={fetchMore}
             datasetsSelected={datasetsSelected}
           />
         </Box>