From 04bad84351b6f7cb1f56d51d168ac1dc42f0b22f Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 17 Dec 2021 11:16:33 +0800
Subject: [PATCH] [search] keep the query keyword when entering the independent
 search page via clicking the link icon in the top-right 'search'

---
 frontend/src/components/search/search.js      | 20 +++++++++++++------
 .../templates/search_results_react.html       |  8 ++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 0eff4a0d6c..b56c35170a 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -18,6 +18,7 @@ class Search extends Component {
 
   constructor(props) {
     super(props);
+    this.baseSearchPageURL = `${siteRoot}search/`;
     this.state = {
       width: 'default',
       value: '',
@@ -28,6 +29,7 @@ class Search extends Component {
       isResultGetted: false,
       isCloseShow: false,
       isSearchInputShow: false, // for mobile
+      searchPageUrl: this.baseSearchPageURL
     };
     this.inputValue = '';
     this.source = null; // used to cancel request;
@@ -120,6 +122,7 @@ class Search extends Component {
         toaster.danger(errMessage);
       });
     } else {
+      this.updateSearchPageURL(queryData);
       seafileAPI.searchFiles(queryData,cancelToken).then(res => {
         if (!res.data.total) {
           _this.setState({
@@ -148,6 +151,14 @@ class Search extends Component {
     this.source.cancel('prev request is cancelled');
   }
 
+  updateSearchPageURL(queryData) {
+    let params = '';
+    for (let key in queryData) {
+      params += key + '=' + encodeURIComponent(queryData[key]) + '&';
+    }
+    this.setState({searchPageUrl: `${this.baseSearchPageURL}?${params.substring(0, params.length - 1)}`});
+  }
+
   getValueLength(str) {
     var i = 0, code, len = 0;
     for (; i < str.length; i++) {
@@ -253,13 +264,10 @@ class Search extends Component {
     });
   }
 
-  onSearchPage = () => {
-    window.location.href = siteRoot + 'search/';
-  }
-
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
+    const { searchPageUrl } = this.state;
     return (
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
@@ -280,7 +288,7 @@ class Search extends Component {
                   autoComplete="off"
                 />
                 {(this.state.isCloseShow && username) &&
-                  <a href={`${siteRoot}search/`} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
+                  <a href={searchPageUrl} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
                 }
                 {this.state.isCloseShow &&
                   <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
@@ -314,7 +322,7 @@ class Search extends Component {
                     autoComplete="off"
                   />
                   {(this.state.isCloseShow && username) &&
-                    <a href={`${siteRoot}search/`} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
+                    <a href={searchPageUrl} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
                   }
                   {this.state.isCloseShow &&
                     <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
diff --git a/seahub/search/templates/search_results_react.html b/seahub/search/templates/search_results_react.html
index 695883426d..17f4da2aec 100644
--- a/seahub/search/templates/search_results_react.html
+++ b/seahub/search/templates/search_results_react.html
@@ -9,10 +9,10 @@
     <script type="text/javascript">
       window.search = {
         pageOptions: {
-          q: '{{ keyword }}',
-          search_repo: '{{ search_repo }}',
-          search_ftypes: '{{ search_ftypes }}',
-          repo_name:'{{ repo.name }}',
+          q: '{{ keyword|escapejs }}',
+          search_repo: '{{ search_repo|escapejs }}',
+          search_ftypes: '{{ search_ftypes|escapejs }}',
+          repo_name:'{{ repo.name|escapejs }}',
         }
       }
     </script>