sanitize search input

client/src/routes/Home.tsx

@@ -54,7 +54,9 @@ class Home extends Component<HomeProps, HomeState> {
 
     private searchAssets = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        this.props.history.push(`/search?text=${this.state.search}`)
+        this.props.history.push(
+            `/search?text=${JSON.stringify(this.state.search)}`
+        )
     }
 }
 

client/src/routes/Search.tsx

@@ -20,6 +20,7 @@ interface SearchState {
     totalPages: number
     currentPage: number
     isLoading: boolean
+    searchTerm: string
 }
 
 export default class Search extends PureComponent<SearchProps, SearchState> {
@@ -29,18 +30,22 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         offset: 25,
         totalPages: 1,
         currentPage: 1,
-        isLoading: true
+        isLoading: true,
+        searchTerm: ''
     }
 
-    private readonly searchTerm = queryString.parse(this.props.location.search)
-        .text
-    private readonly searchPage = queryString.parse(this.props.location.search)
-        .page
-
     public async componentDidMount() {
+        const searchTerm = await queryString.parse(this.props.location.search)
+            .text
+        const searchPage = queryString.parse(this.props.location.search).page
+
+        await this.setState({
+            searchTerm: JSON.stringify(searchTerm)
+        })
+
         // switch to respective page if query string is present
-        if (this.searchPage) {
-            const currentPage = Number(this.searchPage)
+        if (searchPage) {
+            const currentPage = Number(searchPage)
             await this.setState({ currentPage })
         }
 
@@ -52,7 +57,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
             offset: this.state.offset,
             page: this.state.currentPage,
             query: {
-                text: [this.searchTerm],
+                text: [this.state.searchTerm],
                 price: [-1, 1]
             },
             sort: {
@@ -78,7 +83,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
 
         this.props.history.push({
             pathname: this.props.location.pathname,
-            search: `?text=${this.searchTerm}&page=${toPage}`
+            search: `?text=${this.state.searchTerm}&page=${toPage}`
         })
 
         await this.setState({ currentPage: toPage, isLoading: true })
@@ -108,7 +113,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                         className={styles.resultsTitle}
                         dangerouslySetInnerHTML={{
                             __html: `${totalResults} results for <span>${
-                                this.searchTerm
+                                this.state.searchTerm
                             }</span>`
                         }}
                     />