implement search function with prefix

packages/app/src/client/util/search/specificPath.ts

@@ -0,0 +1,4 @@
+export const specificPath = {
+  user: 'user',
+  trash: 'trash',
+};

packages/app/src/components/SearchPage.jsx

@@ -12,6 +12,7 @@ import SearchPageLayout from './SearchPage/SearchPageLayout';
 import SearchResultContent from './SearchPage/SearchResultContent';
 import SearchResultList from './SearchPage/SearchResultList';
 import SearchControl from './SearchPage/SearchControl';
+import { specificPath } from '../client/util/search/specificPath';
 
 class SearchPage extends React.Component {
 
@@ -27,12 +28,15 @@ class SearchPage extends React.Component {
       searchResultMeta: {},
       selectedPage: {},
       selectedPages: new Set(),
+      isNotIncludeUserPath: true,
+      isNotIncludeTrashPath: true,
     };
 
     this.changeURL = this.changeURL.bind(this);
     this.search = this.search.bind(this);
     this.selectPage = this.selectPage.bind(this);
     this.toggleCheckBox = this.toggleCheckBox.bind(this);
+    this.toggleIncludedSpecificPath = this.toggleIncludedSpecificPath.bind(this);
   }
 
   componentDidMount() {
@@ -54,6 +58,17 @@ class SearchPage extends React.Component {
     return query;
   }
 
+  toggleIncludedSpecificPath(pathType) {
+    switch (pathType) {
+      case specificPath.user:
+        this.setState({ isNotIncludeUserPath: !this.state.isNotIncludeUserPath });
+        break;
+      case specificPath.trash:
+        this.setState({ isNotIncludeTrashPath: !this.state.isNotIncludeTrashPath });
+        break;
+    }
+  }
+
   changeURL(keyword, refreshHash) {
     let hash = window.location.hash || '';
     // TODO 整理する
@@ -65,6 +80,19 @@ class SearchPage extends React.Component {
     }
   }
 
+  createSearchQuery(keyword) {
+    let query = keyword;
+
+    // pages included in specific path are not retrived when prefix is added
+    if (this.state.isNotIncludeTrashPath) {
+      query = `${query} -prefix:/${specificPath.trash}`;
+    }
+    if (this.state.isNotIncludeUserPath) {
+      query = `${query} -prefix:/${specificPath.user}`;
+    }
+
+    return query;
+  }
 
   search(data) {
     const keyword = data.keyword;
@@ -81,7 +109,7 @@ class SearchPage extends React.Component {
     this.setState({
       searchingKeyword: keyword,
     });
-    this.props.appContainer.apiGet('/search', { q: keyword })
+    this.props.appContainer.apiGet('/search', { q: this.createSearchQuery(keyword) })
       .then((res) => {
         this.changeURL(keyword);
         if (res.data.length > 0) {
@@ -97,6 +125,14 @@ class SearchPage extends React.Component {
             selectedPage: res.data[0],
           });
         }
+        else {
+          this.setState({
+            searchedKeyword: keyword,
+            searchedPages: [],
+            searchResultMeta: {},
+            selectedPage: {},
+          });
+        }
       })
       .catch((err) => {
         toastError(err);
@@ -152,6 +188,7 @@ class SearchPage extends React.Component {
         searchingKeyword={this.state.searchingKeyword}
         appContainer={this.props.appContainer}
         onSearchInvoked={this.search}
+        toggleIncludedSpecificPath={this.toggleIncludedSpecificPath}
       >
       </SearchControl>
     );

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

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import SearchPageForm from './SearchPageForm';
+import { specificPath } from '../../client/util/search/specificPath';
 import AppContainer from '../../client/services/AppContainer';
 
 
@@ -7,6 +8,7 @@ type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
   onSearchInvoked: (data : any[]) => boolean,
+  toggleIncludedSpecificPath: (pathType: string) => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
@@ -22,7 +24,33 @@ const SearchControl: FC <Props> = (props: Props) => {
           onSearchFormChanged={props.onSearchInvoked}
         />
       </div>
-      {/* TODO: place deleteAll button , relevance button , include specificPath button */}
+      {/* TODO: place the following elements deleteAll button , relevance button and include specificPath button component */}
+      <div className="d-flex my-4">
+        <div className="form-check border-gray">
+          <input
+            className="form-check-input"
+            type="checkbox"
+            value=""
+            id="flexCheckDefault"
+            onClick={() => props.toggleIncludedSpecificPath(specificPath.user)}
+          />
+          <label className="form-check-label" htmlFor="flexCheckDefault">
+            /user下を含む
+          </label>
+        </div>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            type="checkbox"
+            value=""
+            id="flexCheckChecked"
+            onClick={() => props.toggleIncludedSpecificPath(specificPath.trash)}
+          />
+          <label className="form-check-label" htmlFor="flexCheckChecked">
+            /trash下を含む
+          </label>
+        </div>
+      </div>
     </div>
   );
 };

packages/app/src/components/SearchPage/SearchPageForm.jsx

@@ -40,7 +40,8 @@ class SearchPageForm extends React.Component {
 
   render() {
     return (
-      <div className="grw-search-form-in-search-result-page">
+      // TODO: modify design
+      <div className="grw-search-form-in-search-result-page d-flex">
         <div className="input-group flex-nowrap">
           <SearchForm
             onSubmit={this.search}