80785 use setState and rename

packages/app/src/components/SearchPage.jsx

@@ -183,12 +183,15 @@ class SearchPage extends React.Component {
   }
 
   toggleCheckBox = (pageId) => {
-    if (this.state.selectedPagesIdList.has(pageId)) {
-      this.state.selectedPagesIdList.delete(pageId);
+    const { selectedPagesIdList } = this.state;
+
+    if (selectedPagesIdList.has(pageId)) {
+      selectedPagesIdList.delete(pageId);
     }
     else {
-      this.state.selectedPagesIdList.add(pageId);
+      selectedPagesIdList.add(pageId);
     }
+    this.setState({ selectedPagesIdList });
   }
 
   toggleAllCheckBox = () => {
@@ -225,7 +228,7 @@ class SearchPage extends React.Component {
         activePage={this.state.activePage}
         pagingLimit={this.state.pagingLimit}
         onClickInvoked={this.selectPage}
-        onChangedInvoked={this.toggleCheckBox}
+        onClickCheckboxInvoked={this.toggleCheckBox}
         onPagingNumberChanged={this.onPagingNumberChanged}
       />
     );

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

@@ -15,8 +15,8 @@ export type ISearchedPage = IPageHasId & {
 type Props = {
   pages: ISearchedPage[],
   selectedPagesIdList: Set<string>
-  onClickInvoked?: (pageId: string) => void,
-  onChangedInvoked?: (page: string) => void,
+  onClickSearchResultItem?: (pageId: string) => void,
+  onClickCheckboxInvoked?: (page: string) => void,
   searchResultCount?: number,
   activePage?: number,
   pagingLimit?: number,
@@ -36,8 +36,8 @@ const SearchResultList: FC<Props> = (props:Props) => {
           <SearchResultListItem
             key={page._id}
             page={page}
-            onClickInvoked={props.onClickInvoked}
-            onClickCheckboxInvoked={props.onChangedInvoked}
+            onClickSearchResultItem={props.onClickSearchResultItem}
+            onClickCheckboxInvoked={props.onClickCheckboxInvoked}
             isSelected={page._id === focusedPageId || false}
             isChecked={isChecked}
           />

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

@@ -71,13 +71,13 @@ type Props = {
   isSelected: boolean,
   isChecked: boolean,
   onClickCheckboxInvoked?: (page: string) => void,
-  onClickInvoked?: (pageId: string) => void,
+  onClickSearchResultItem?: (pageId: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
   const {
     // todo: refactoring variable name to clear what changed
-    page, isSelected, onClickInvoked, onClickCheckboxInvoked, isChecked,
+    page, isSelected, onClickSearchResultItem, onClickCheckboxInvoked, isChecked,
   } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
@@ -92,8 +92,8 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
         className="d-block pt-3"
         href={pageId}
         onClick={() => {
-          if (onClickInvoked != null) {
-            onClickInvoked(page._id);
+          if (onClickSearchResultItem != null) {
+            onClickSearchResultItem(page._id);
           }
         }}
       >