Merge pull request #4691 from weseek/feat/77525-81100-check-if-selected-pages-has-page

Feat/77525 81100 check if selected pages has page

packages/app/src/components/SearchPage.jsx

@@ -33,7 +33,7 @@ class SearchPage extends React.Component {
       searchedPages: [],
       searchResultMeta: {},
       focusedPage: {},
-      selectedPages: new Set(),
+      selectedPagesIdList: new Set(),
       searchResultCount: 0,
       activePage: 1,
       pagingLimit: 10, // change to an appropriate limit number
@@ -185,14 +185,16 @@ class SearchPage extends React.Component {
     });
   }
 
-  toggleCheckBox = (page) => {
-    if (this.state.selectedPages.has(page)) {
-      this.state.selectedPages.delete(page);
+  toggleCheckBox = (pageId) => {
+    const { selectedPagesIdList } = this.state;
+
+    if (selectedPagesIdList.has(pageId)) {
+      selectedPagesIdList.delete(pageId);
     }
     else {
-      this.state.selectedPages.add(page);
+      selectedPagesIdList.add(pageId);
     }
-    switch (this.state.selectedPages.size) {
+    switch (selectedPagesIdList.size) {
       case 0:
         return this.setState({ selectAllCheckboxType: CheckboxType.NONE_CHECKED });
       case this.state.searchedPages.length:
@@ -203,15 +205,19 @@ class SearchPage extends React.Component {
   }
 
   toggleAllCheckBox = (nextSelectAllCheckboxType) => {
+    const { selectedPagesIdList, searchedPages } = this.state;
     if (nextSelectAllCheckboxType === CheckboxType.NONE_CHECKED) {
-      this.state.selectedPages.clear();
+      selectedPagesIdList.clear();
     }
     else {
-      this.state.searchedPages.forEach((page) => {
-        this.state.selectedPages.add(page);
+      searchedPages.forEach((page) => {
+        selectedPagesIdList.add(page._id);
       });
     }
-    this.setState({ selectAllCheckboxType: nextSelectAllCheckboxType });
+    this.setState({
+      selectedPagesIdList,
+      selectAllCheckboxType: nextSelectAllCheckboxType,
+    });
   };
 
   renderSearchResultContent = () => {
@@ -230,12 +236,12 @@ class SearchPage extends React.Component {
       <SearchResultList
         pages={this.state.searchedPages || []}
         focusedPage={this.state.focusedPage}
-        selectedPages={this.state.selectedPages || []}
+        selectedPagesIdList={this.state.selectedPagesIdList || []}
         searchResultCount={this.state.searchResultCount}
         activePage={this.state.activePage}
         pagingLimit={this.state.pagingLimit}
-        onClickInvoked={this.selectPage}
-        onChangedInvoked={this.toggleCheckBox}
+        onClickSearchResultItem={this.selectPage}
+        onClickCheckbox={this.toggleCheckBox}
         onPagingNumberChanged={this.onPagingNumberChanged}
       />
     );

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

@@ -14,9 +14,9 @@ export type ISearchedPage = IPageHasId & {
 
 type Props = {
   pages: ISearchedPage[],
-  selectedPages: ISearchedPage[],
-  onClickInvoked?: (pageId: string) => void,
-  onChangedInvoked?: (page: ISearchedPage) => void,
+  selectedPagesIdList: Set<string>
+  onClickSearchResultItem?: (pageId: string) => void,
+  onClickCheckbox?: (pageId: string) => void,
   searchResultCount?: number,
   activePage?: number,
   pagingLimit?: number,
@@ -25,18 +25,21 @@ type Props = {
 }
 
 const SearchResultList: FC<Props> = (props:Props) => {
-  const { focusedPage } = props;
+  const { focusedPage, selectedPagesIdList } = props;
   const focusedPageId = focusedPage != null && focusedPage._id != null ? focusedPage._id : '';
+
   return (
     <>
       {Array.isArray(props.pages) && props.pages.map((page) => {
+        const isChecked = selectedPagesIdList.has(page._id);
         return (
           <SearchResultListItem
             key={page._id}
             page={page}
-            onClickInvoked={props.onClickInvoked}
-            onClickCheckboxInvoked={props.onChangedInvoked}
+            onClickSearchResultItem={props.onClickSearchResultItem}
+            onClickCheckbox={props.onClickCheckbox}
             isSelected={page._id === focusedPageId || false}
+            isChecked={isChecked}
           />
         );
       })}

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

@@ -69,15 +69,15 @@ const PageItemControl: FC<PageItemControlProps> = (props: {page: ISearchedPage})
 type Props = {
   page: ISearchedPage,
   isSelected: boolean,
-  onClickCheckboxInvoked?: (page: ISearchedPage) => void,
-  // todo: fix name
-  // refs: https://redmine.weseek.co.jp/issues/81100
-  onClickInvoked?: (pageId: string) => void,
+  isChecked: boolean,
+  onClickCheckbox?: (pageId: string) => void,
+  onClickSearchResultItem?: (pageId: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
   const {
-    page, isSelected, onClickInvoked, onClickCheckboxInvoked,
+    // todo: refactoring variable name to clear what changed
+    page, isSelected, onClickSearchResultItem, onClickCheckbox, 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);
           }
         }}
       >
@@ -105,10 +105,11 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               type="checkbox"
               id="flexCheckDefault"
               onClick={() => {
-                if (onClickCheckboxInvoked != null) {
-                  onClickCheckboxInvoked(page);
+                if (onClickCheckbox != null) {
+                  onClickCheckbox(page._id);
                 }
               }}
+              checked={isChecked}
             />
           </div>
           <div className="w-100">