Merge pull request #4731 from weseek/feat/77545-81845-filtering-search-result

wip: Feat/77545 81845 filtering search result

packages/app/src/components/SearchPage.jsx

@@ -119,6 +119,8 @@ class SearchPage extends React.Component {
     this.setState({ activePage: 1 }, () => this.search(data));
   }
 
+  // todo: refactoring
+  // refs: https://redmine.weseek.co.jp/issues/82139
   async search(data) {
     const keyword = data.keyword;
     if (keyword === '') {
@@ -226,6 +228,8 @@ class SearchPage extends React.Component {
         onSearchInvoked={this.searchHandler}
         onExcludeUserPagesSwitched={this.switchExcludeUserPagesHandler}
         onExcludeTrashPagesSwitched={this.switchExcludeTrashPagesHandler}
+        excludeUserPages={this.state.excludeUserPages}
+        excludeTrashPages={this.state.excludeTrashPages}
       >
       </SearchControl>
     );

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

@@ -9,7 +9,9 @@ import { CheckboxType } from '../../interfaces/search';
 type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
-  onSearchInvoked: (data : any[]) => boolean,
+  excludeUserPages: boolean,
+  excludeTrashPages: boolean,
+  onSearchInvoked: (data: {keyword: string}) => boolean,
   onExcludeUserPagesSwitched?: () => void,
   onExcludeTrashPagesSwitched?: () => void,
 }
@@ -57,13 +59,22 @@ const SearchControl: FC <Props> = (props: Props) => {
     setIsFileterOptionModalShown(false);
   };
 
+  const onRetrySearchInvoked = () => {
+    if (props.onSearchInvoked != null) {
+      props.onSearchInvoked({ keyword: props.searchingKeyword });
+    }
+  };
+
   const rednerSearchOptionModal = () => {
     return (
       <SearchOptionModal
         isOpen={isFileterOptionModalShown || false}
+        onClickFilteringSearchResult={onRetrySearchInvoked}
         onClose={closeSearchOptionModalHandler}
         onExcludeUserPagesSwitched={switchExcludeUserPagesHandler}
         onExcludeTrashPagesSwitched={switchExcludeTrashPagesHandler}
+        excludeUserPages={props.excludeUserPages}
+        excludeTrashPages={props.excludeTrashPages}
       />
     );
   };

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

@@ -8,53 +8,60 @@ import {
 
 type Props = {
   isOpen: boolean,
+  excludeUserPages: boolean,
+  excludeTrashPages: boolean,
   onClose?: () => void,
   onExcludeUserPagesSwitched?: () => void,
   onExcludeTrashPagesSwitched?: () => void,
-  // todo: implement this method
-  // refs: https://redmine.weseek.co.jp/issues/81845
-  onClickFilteringSearchResultButton?: () => void,
+  onClickFilteringSearchResult?: () => void,
 }
 
-// todo: implement filtering search result
-// refs: https://redmine.weseek.co.jp/issues/81845
 const SearchOptionModal: FC<Props> = (props: Props) => {
 
   const { t } = useTranslation('');
 
-  const onClose = () => {
-    if (props.onClose != null) {
-      props.onClose();
+  const {
+    isOpen, onClose, excludeUserPages, excludeTrashPages,
+  } = props;
+
+  const onCloseModal = () => {
+    if (onClose != null) {
+      onClose();
+    }
+  };
+
+  const onClickFilteringSearchResult = () => {
+    if (props.onClickFilteringSearchResult != null) {
+      props.onClickFilteringSearchResult();
+      onCloseModal();
     }
   };
 
   return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={onClose} autoFocus={false}>
-      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light">
+    <Modal size="lg" isOpen={isOpen} toggle={onCloseModal} autoFocus={false}>
+      <ModalHeader tag="h4" toggle={onCloseModal} className="bg-primary text-light">
         Search Option
       </ModalHeader>
       <ModalBody>
         <div className="d-flex p-3">
           <div className="border border-gray mr-3">
             <label className="px-3 py-2 mb-0 d-flex align-items-center">
-              {/** todo: get checked state from parent component */}
-              {/** // refs: https://redmine.weseek.co.jp/issues/81845 */}
               <input
                 className="mr-2"
                 type="checkbox"
                 onClick={props.onExcludeUserPagesSwitched}
+                checked={!excludeUserPages}
               />
               {t('Include Subordinated Target Page', { target: '/user' })}
             </label>
           </div>
           <div className="border border-gray">
             <label className="px-3 py-2 mb-0 d-flex align-items-center">
-              {/** todo: get checked state from parent component */}
-              {/** // refs: https://redmine.weseek.co.jp/issues/81845 */}
               <input
                 className="mr-2"
                 type="checkbox"
                 onClick={props.onExcludeTrashPagesSwitched}
+                checked={!excludeTrashPages}
               />
               {t('Include Subordinated Target Page', { target: '/trash' })}
             </label>
@@ -65,9 +72,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
         <button
           type="button"
           className="btn btn-secondary"
-          // todo: implement this method
-          // refs: https://redmine.weseek.co.jp/issues/81845
-          onClick={props.onClickFilteringSearchResultButton}
+          onClick={onClickFilteringSearchResult}
         >{t('search_result.search_again')}
         </button>
       </ModalFooter>