From f6ae84193c85d6571c4b25a373fc5a7888260158 Mon Sep 17 00:00:00 2001
From: hinashi <k.hinagawa@gmail.com>
Date: Fri, 13 Sep 2024 10:14:06 +0900
Subject: [PATCH] Fixed pagination in advanced search using join_attr

---
 .../entry/SearchResultsTableHead.tsx          | 19 ++++--
 .../src/pages/AdvancedSearchResultsPage.tsx   | 63 ++++++++++---------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/entry/SearchResultsTableHead.tsx b/frontend/src/components/entry/SearchResultsTableHead.tsx
index fef2567e7..286a9b3e9 100644
--- a/frontend/src/components/entry/SearchResultsTableHead.tsx
+++ b/frontend/src/components/entry/SearchResultsTableHead.tsx
@@ -14,7 +14,14 @@ import {
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import React, { ChangeEvent, FC, useMemo, useReducer, useState } from "react";
+import React, {
+  ChangeEvent,
+  FC,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { AdvancedSearchJoinModal } from "./AdvancedSearchJoinModal";
@@ -116,6 +123,10 @@ export const SearchResultsTableHead: FC<Props> = ({
     [defaultAttrsFilter]
   );
 
+  useEffect(() => {
+    setAttrsFilter(defaultAttrsFilter ?? {});
+  }, [defaultAttrsFilter]);
+
   const handleSelectFilterConditions =
     (attrName?: string) =>
     (
@@ -130,13 +141,13 @@ export const SearchResultsTableHead: FC<Props> = ({
 
       const newParams = formatAdvancedSearchParams({
         attrsFilter: Object.keys(_attrsFilter)
-          .filter((k) => _attrsFilter[k].joinedAttrname === undefined)
+          .filter((k) => _attrsFilter[k]?.joinedAttrname === undefined)
           .reduce((a, k) => ({ ...a, [k]: _attrsFilter[k] }), {}),
         entryName: overwriteEntryName ?? entryFilter,
         referralName: overwriteReferral ?? referralFilter,
         baseParams: new URLSearchParams(location.search),
         joinAttrs: Object.keys(_attrsFilter)
-          .filter((k) => _attrsFilter[k].joinedAttrname !== undefined)
+          .filter((k) => _attrsFilter[k]?.joinedAttrname !== undefined)
           .map((k) => ({
             name: _attrsFilter[k]?.baseAttrname ?? "",
             attrinfo: Object.keys(_attrsFilter)
@@ -203,7 +214,7 @@ export const SearchResultsTableHead: FC<Props> = ({
               <Typography>{attrName}</Typography>
 
               {(attrTypes[attrName] & EntryAttributeTypeTypeEnum.OBJECT) > 0 &&
-                attrsFilter[attrName].joinedAttrname === undefined && (
+                attrsFilter[attrName]?.joinedAttrname === undefined && (
                   <StyledIconButton onClick={() => setJoinAttrname(attrName)}>
                     <AddIcon />
                   </StyledIconButton>
diff --git a/frontend/src/pages/AdvancedSearchResultsPage.tsx b/frontend/src/pages/AdvancedSearchResultsPage.tsx
index e69210daf..5d3dac569 100644
--- a/frontend/src/pages/AdvancedSearchResultsPage.tsx
+++ b/frontend/src/pages/AdvancedSearchResultsPage.tsx
@@ -6,8 +6,7 @@ import {
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { IconButton, Box, Button, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import { useSnackbar } from "notistack";
 import React, { FC, useEffect, useMemo, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
@@ -17,6 +16,7 @@ import { useAsyncWithThrow } from "../hooks/useAsyncWithThrow";
 import { advancedSearchPath, topPath } from "Routes";
 import { AironeBreadcrumbs } from "components/common/AironeBreadcrumbs";
 import { Confirmable } from "components/common/Confirmable";
+import { CenterAlignedBox } from "components/common/FlexBox";
 import { Loading } from "components/common/Loading";
 import { PageHeader } from "components/common/PageHeader";
 import { RateLimitedClickable } from "components/common/RateLimitedClickable";
@@ -42,10 +42,6 @@ export const getIsFiltered = (filterKey?: number, keyword?: string) => {
   return false;
 };
 
-const FullWidthIconBox = styled(IconButton)(({}) => ({
-  width: "100%",
-}));
-
 export interface AirOneAdvancedSearchResult extends AdvancedSearchResult {
   page: number;
   isInProcessing: boolean;
@@ -94,7 +90,7 @@ export const AdvancedSearchResultsPage: FC = () => {
       values: [],
       page: page,
       isInProcessing: true,
-      totalCount: searchResults.totalCount,
+      totalCount: 0,
     });
     setToggle(!toggle);
   };
@@ -110,36 +106,37 @@ export const AdvancedSearchResultsPage: FC = () => {
         referralName,
         searchAllEntities,
         page,
-        AdvancedSerarchResultList.MAX_ROW_COUNT,
-        (page - 1) * AdvancedSerarchResultList.MAX_ROW_COUNT
+        AdvancedSerarchResultList.MAX_ROW_COUNT
       );
     };
 
     // show loading indicator
     setSearchResults({ ...searchResults, isInProcessing: true });
 
-    // pagination processing is prioritize than others
-    if (page !== searchResults.page) {
-      sendSearchRequest().then((results) => {
-        setSearchResults({
-          count: results.count,
-          values: results.values,
-          page: page,
-          isInProcessing: false,
-          totalCount: results.totalCount,
-        });
-      });
-    } else {
-      sendSearchRequest().then((results) => {
+    sendSearchRequest().then((results) => {
+      if (joinAttrs.length > 0) {
+        if (results.count === 0) {
+          changePage(page + 1);
+          return;
+        }
         setSearchResults({
           ...searchResults,
           count: searchResults.count + results.count,
           values: searchResults.values.concat(results.values),
+          page: page,
+          totalCount: results.totalCount,
           isInProcessing: false,
+        });
+      } else {
+        setSearchResults({
+          count: results.count,
+          values: results.values,
+          page: page,
           totalCount: results.totalCount,
+          isInProcessing: false,
         });
-      });
-    }
+      }
+    });
   }, [page, toggle, location.search]);
 
   const handleExport = async (exportStyle: "yaml" | "csv") => {
@@ -333,12 +330,18 @@ export const AdvancedSearchResultsPage: FC = () => {
               {searchResults.isInProcessing ? (
                 <Loading />
               ) : (
-                <FullWidthIconBox
-                  disabled={searchResults.count >= searchResults.totalCount}
-                  onClick={() => setToggle(!toggle)}
-                >
-                  <ArrowDropDownIcon />
-                </FullWidthIconBox>
+                <CenterAlignedBox alignItems="center">
+                  <IconButton
+                    disabled={searchResults.count >= searchResults.totalCount}
+                    onClick={() => changePage(searchResults.page + 1)}
+                  >
+                    <ArrowDropDownIcon />
+                  </IconButton>
+                  <Typography>
+                    {page * AdvancedSerarchResultList.MAX_ROW_COUNT} /{" "}
+                    {searchResults.totalCount} 件
+                  </Typography>
+                </CenterAlignedBox>
               )}
             </>
           )}