Merge branch 'feat/77525-80785-implement-select-all-checkbox' into feat/77525-81100-check-if-selected-pages-has-page

# Conflicts:
#	packages/app/src/components/SearchPage.jsx
#	packages/app/src/components/SearchPage/SearchResultListItem.tsx

packages/app/src/components/SearchPage.jsx

@@ -13,6 +13,8 @@ import SearchResultContent from './SearchPage/SearchResultContent';
 import SearchResultList from './SearchPage/SearchResultList';
 import SearchControl from './SearchPage/SearchControl';
 
+import { CheckboxType } from '../interfaces/search';
+
 export const specificPathNames = {
   user: '/user',
   trash: '/trash',
@@ -37,6 +39,7 @@ class SearchPage extends React.Component {
       pagingLimit: 10, // change to an appropriate limit number
       excludeUsersHome: true,
       excludeTrash: true,
+      selectAllCheckboxType: CheckboxType.NONE_CHECKED,
     };
 
     this.changeURL = this.changeURL.bind(this);
@@ -191,13 +194,26 @@ class SearchPage extends React.Component {
     else {
       selectedPagesIdList.add(pageId);
     }
-    this.setState({ selectedPagesIdList });
+    const getNextSelectAllCheckboxType = () => {
+      switch (this.state.selectedPages.size) {
+        case 0:
+          return CheckboxType.NONE_CHECKED;
+        case this.state.searchedPages.length:
+          return CheckboxType.ALL_CHECKED;
+        default:
+          return CheckboxType.INDETERMINATE;
+      }
+    };
+    this.setState({
+      selectedPagesIdList,
+      selectAllCheckboxType: getNextSelectAllCheckboxType(),
+    });
   }
 
-  toggleAllCheckBox = () => {
+  toggleAllCheckBox = (nextSelectAllCheckboxType) => {
     const { selectedPagesIdList, searchedPages } = this.state;
-    if (selectedPagesIdList.size === searchedPages.length) {
-      selectedPagesIdList.clear();
+    if (nextSelectAllCheckboxType === CheckboxType.NONE_CHECKED) {
+      this.state.selectedPages.clear();
     }
     else {
       searchedPages.forEach((page) => {
@@ -205,6 +221,7 @@ class SearchPage extends React.Component {
       });
     }
     this.setState({ selectedPagesIdList });
+    this.setState({ selectAllCheckboxType: nextSelectAllCheckboxType });
   };
 
   renderSearchResultContent = () => {
@@ -245,6 +262,7 @@ class SearchPage extends React.Component {
         onClickSelectAllCheckbox={this.toggleAllCheckBox}
         selectedPagesCount={this.state.selectedPagesIdList.size}
         displayPageCount={this.state.searchedPages.length}
+        selectAllCheckboxType={this.state.selectAllCheckboxType}
       >
       </SearchControl>
     );

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

@@ -1,30 +1,28 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CheckboxType } from '../../interfaces/search';
 
 type Props = {
   selectedPagesCount: number,
   displayPageCount: number,
+  selectAllCheckboxType: CheckboxType,
   onClickDeleteButton?: () => void,
-  onClickSelectAllCheckbox?: () => void,
+  onClickSelectAllCheckbox?: (nextSelectAllCheckboxType: CheckboxType) => void,
 }
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   const { t } = useTranslation();
   const {
-    onClickDeleteButton, onClickSelectAllCheckbox, selectedPagesCount, displayPageCount,
+    onClickDeleteButton, onClickSelectAllCheckbox, selectAllCheckboxType,
   } = props;
 
-  const checkboxType = useMemo(() => {
-    switch (selectedPagesCount) {
-      case 0:
-        return CheckboxType.NONE_CHECKED;
-      case displayPageCount:
-        return CheckboxType.ALL_CHECKED;
-      default:
-        return CheckboxType.INDETERMINATE;
+  const onClickCheckbox = () => {
+    if (onClickSelectAllCheckbox != null) {
+      const next = selectAllCheckboxType === CheckboxType.ALL_CHECKED ? CheckboxType.NONE_CHECKED : CheckboxType.ALL_CHECKED;
+      onClickSelectAllCheckbox(next);
     }
-  }, [selectedPagesCount, displayPageCount]);
+
+  };
 
   return (
     <>
@@ -35,12 +33,8 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         type="checkbox"
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1 align-self-center"
-        onClick={() => {
-          if (onClickSelectAllCheckbox != null) {
-            onClickSelectAllCheckbox();
-          }
-        }}
-        checked={checkboxType !== CheckboxType.NONE_CHECKED}
+        onClick={onClickCheckbox}
+        checked={selectAllCheckboxType !== CheckboxType.NONE_CHECKED}
       />
       <button
         type="button"

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

@@ -3,16 +3,18 @@ import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
+import { CheckboxType } from '../../interfaces/search';
 
 type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
   selectedPagesCount: number,
   displayPageCount: number,
+  selectAllCheckboxType: CheckboxType,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
-  onClickSelectAllCheckbox?: () => void,
+  onClickSelectAllCheckbox?: (nextSelectAllCheckboxType: CheckboxType) => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
@@ -52,6 +54,7 @@ const SearchControl: FC <Props> = (props: Props) => {
       <div className="d-flex my-4">
         {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
         <DeleteSelectedPageGroup
+          selectAllCheckboxType={props.selectAllCheckboxType}
           onClickDeleteButton={onDeleteSelectedPageHandler}
           onClickSelectAllCheckbox={props.onClickSelectAllCheckbox}
           selectedPagesCount={props.selectedPagesCount}