80785 refactor

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}

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

@@ -71,7 +71,7 @@ type Props = {
   isSelected: boolean,
   onClickCheckboxInvoked?: (page: ISearchedPage) => void,
   // todo: fix name
-  // refs: https://estoc.weseek.co.jp/redmine/issues/81100
+  // refs: https://redmine.weseek.co.jp/issues/81100
   onClickInvoked?: (pageId: string) => void,
 }