Use urlencode for search queries (fixes #10)

[lemmy-ui.git] / src / shared / components / search.tsx

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index e086a92184ee647016b9fab8674cd169d14d35c8..af6a6b6ed84c0e68c90f8a12509154c06be04457 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -1,5 +1,4 @@
 import { Component, linkEvent } from 'inferno';
-import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import {
   UserOperation,
@@ -32,6 +31,7 @@ import {
   setAuth,
 } from '../utils';
 import { PostListing } from './post-listing';
+import { HtmlTags } from './html-tags';
 import { UserListing } from './user-listing';
 import { CommunityLink } from './community-link';
 import { SortSelect } from './sort-select';
@@ -84,7 +84,7 @@ export class Search extends Component<any, SearchState> {
   };
 
   static getSearchQueryFromProps(q: string): string {
-    return q || '';
+    return decodeURIComponent(q) || '';
   }
 
   static getSearchTypeFromProps(type_: string): SearchType {
@@ -165,23 +165,20 @@ export class Search extends Component<any, SearchState> {
   }
 
   get documentTitle(): string {
-    if (this.state.site.name) {
-      if (this.state.q) {
-        return `${i18n.t('search')} - ${this.state.q} - ${
-          this.state.site.name
-        }`;
-      } else {
-        return `${i18n.t('search')} - ${this.state.site.name}`;
-      }
+    if (this.state.q) {
+      return `${i18n.t('search')} - ${this.state.q} - ${this.state.site.name}`;
     } else {
-      return 'Lemmy';
+      return `${i18n.t('search')} - ${this.state.site.name}`;
     }
   }
 
   render() {
     return (
       <div class="container">
-        <Helmet title={this.documentTitle} />
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
         <h5>{i18n.t('search')}</h5>
         {this.selects()}
         {this.searchForm()}
@@ -297,7 +294,6 @@ export class Search extends Component<any, SearchState> {
             <div class="col-12">
               {i.type_ == 'posts' && (
                 <PostListing
-                  communities={[]}
                   key={(i.data as Post).id}
                   post={i.data as Post}
                   showCommunity
@@ -360,7 +356,6 @@ export class Search extends Component<any, SearchState> {
           <div class="row">
             <div class="col-12">
               <PostListing
-                communities={[]}
                 post={post}
                 showCommunity
                 enableDownvotes={this.state.site.enable_downvotes}
@@ -509,11 +504,12 @@ export class Search extends Component<any, SearchState> {
 
   updateUrl(paramUpdates: UrlParams) {
     const qStr = paramUpdates.q || this.state.q;
+    const qStrEncoded = encodeURIComponent(qStr);
     const typeStr = paramUpdates.type_ || this.state.type_;
     const sortStr = paramUpdates.sort || this.state.sort;
     const page = paramUpdates.page || this.state.page;
     this.props.history.push(
-      `/search/q/${qStr}/type/${typeStr}/sort/${sortStr}/page/${page}`
+      `/search/q/${qStrEncoded}/type/${typeStr}/sort/${sortStr}/page/${page}`
     );
   }