80785 pass selectedPagesCount and searchedPagesCount

packages/app/src/components/SearchPage.jsx

@@ -39,7 +39,6 @@ class SearchPage extends React.Component {
       pagingLimit: 10, // change to an appropriate limit number
       excludeUsersHome: true,
       excludeTrash: true,
-      checkboxState: CheckboxType.NONE_CHECKED,
     };
 
     this.changeURL = this.changeURL.bind(this);
@@ -185,22 +184,6 @@ class SearchPage extends React.Component {
     });
   }
 
-  updateCheckboxState = () => {
-    function getCheckboxType(selectedPagesCount, searchedPagesCount) {
-      switch (selectedPagesCount) {
-        case 0:
-          return CheckboxType.NONE_CHECKED;
-        case searchedPagesCount:
-          return CheckboxType.ALL_CHECKED;
-        default:
-          return CheckboxType.INDETERMINATE;
-      }
-    }
-    this.setState({
-      checkboxState: getCheckboxType(this.state.selectedPages.size, this.state.searchedPages.length),
-    });
-  }
-
   toggleCheckBox = (page) => {
     if (this.state.selectedPages.has(page)) {
       this.state.selectedPages.delete(page);
@@ -208,7 +191,6 @@ class SearchPage extends React.Component {
     else {
       this.state.selectedPages.add(page);
     }
-    this.updateCheckboxState();
   }
 
   toggleAllCheckBox = () => {
@@ -220,7 +202,6 @@ class SearchPage extends React.Component {
         this.state.selectedPages.add(page);
       });
     }
-    this.updateCheckboxState();
   };
 
   renderSearchResultContent = () => {
@@ -258,8 +239,9 @@ class SearchPage extends React.Component {
         onSearchInvoked={this.searchHandler}
         onExcludeUsersHome={this.onExcludeUsersHome}
         onExcludeTrash={this.onExcludeTrash}
-        onClickInvoked={this.toggleAllCheckBox}
-        checkboxState={this.state.checkboxState}
+        onClickAllPageCheckbox={this.toggleAllCheckBox}
+        selectedPagesCount={this.state.selectedPages.size}
+        searchedPagesCount={this.state.searchedPages.length}
       >
       </SearchControl>
     );

packages/app/src/components/SearchPage/DeleteSelectedPageGroup.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import loggerFactory from '~/utils/logger';
 import { CheckboxType } from '../../interfaces/search';
@@ -7,20 +7,29 @@ const logger = loggerFactory('growi:searchResultList');
 
 type Props = {
   checkboxState: CheckboxType,
+  selectedPagesCount: number,
+  searchedPagesCount: number,
   onClickInvoked?: () => void,
-  onCheckInvoked?: () => void,
+  onClickAllPageCheckbox?: () => void,
 }
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   const { t } = useTranslation();
   const {
-    checkboxState, onClickInvoked, onCheckInvoked,
+    onClickInvoked, onClickAllPageCheckbox, selectedPagesCount, searchedPagesCount,
   } = props;
 
-  const onCheckAllPages = () => {
-    if (onCheckInvoked == null) { logger.error('onCheckInvoked is null') }
-    else { onCheckInvoked() }
-  };
+  const checkboxType = useMemo(() => {
+    switch (selectedPagesCount) {
+      case 0:
+        return CheckboxType.NONE_CHECKED;
+      case searchedPagesCount:
+        return CheckboxType.ALL_CHECKED;
+      default:
+        return CheckboxType.INDETERMINATE;
+    }
+  }, [selectedPagesCount, searchedPagesCount]);
+
 
   return (
     <>
@@ -31,8 +40,12 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         type="checkbox"
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1 align-self-center"
-        onClick={onCheckAllPages}
-        checked={checkboxState !== CheckboxType.NONE_CHECKED}
+        onClick={() => {
+          if (onClickAllPageCheckbox != null) {
+            onClickAllPageCheckbox();
+          }
+        }}
+        checked={checkboxType !== CheckboxType.NONE_CHECKED}
       />
       <button
         type="button"

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -9,10 +9,12 @@ type Props = {
   searchingKeyword: string,
   checkboxState: CheckboxType,
   appContainer: AppContainer,
+  selectedPagesCount: number,
+  searchedPagesCount: number,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
-  onClickInvoked?: () => void,
+  onClickAllPageCheckbox?: () => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
@@ -54,7 +56,9 @@ const SearchControl: FC <Props> = (props: Props) => {
         <DeleteSelectedPageGroup
           checkboxState={props.checkboxState}
           onClickInvoked={onDeleteSelectedPageHandler}
-          onCheckInvoked={props.onClickInvoked}
+          onClickAllPageCheckbox={props.onClickAllPageCheckbox}
+          selectedPagesCount={props.selectedPagesCount}
+          searchedPagesCount={props.searchedPagesCount}
         />
         <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
           <label className="my-0 mr-2" htmlFor="flexCheckDefault">