feat: add deeplinked search

src/components/form/SearchInput.js

@@ -1,8 +1,9 @@
 import _ from 'lodash';
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
+import { useQueryParamState } from '../hooks/useQueryParamState';
 
 import { MagnifyGlassIcon, MagnifyGlassIconWhite } from '../icons';
 
@@ -89,7 +90,10 @@ const ButtonSearchText = styled('p')`
   align-items: center;
   font-size: 1rem;
   width: 3.125rem;
-  color: ${props => (props.usePrimaryButton ? props.theme.colors.default.onButton : props.theme.colors.default.onSurface)};
+  color: ${props =>
+    props.usePrimaryButton
+      ? props.theme.colors.default.onButton
+      : props.theme.colors.default.onSurface};
   box-sizing: border-box;
 `;
 
@@ -104,11 +108,23 @@ const SearchInput = withTheme(
     disabled = false,
   }) => {
     const intl = useIntl();
+    const ref = useRef();
     const appStore = useSelector(state => state.app);
+    const [searchQuery] = useQueryParamState('search');
+
+    useEffect(() => {
+      onChange({
+        target: {
+          value: searchQuery,
+        },
+      });
+      ref.current.value = searchQuery;
+    }, [searchQuery]);
 
     return (
       <SearchContainer usePrimaryButton={usePrimaryButton} size={size}>
         <Input
+          ref={ref}
           type="text"
           selectedTheme={appStore.theme}
           placeholder={intl.formatMessage({ id: 'search' })}
@@ -124,7 +140,8 @@ const SearchInput = withTheme(
           selectedTheme={appStore.theme}
           usePrimaryButton={usePrimaryButton}
           buttonText={buttonText}
-          disabled={disabled}>
+          disabled={disabled}
+        >
           {(buttonText && (
             <ButtonSearchText usePrimaryButton={usePrimaryButton}>
               {buttonText}

src/components/hooks/useQueryParamState.js

@@ -0,0 +1,37 @@
+import _ from 'lodash';
+import { useState, useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useQueryParamState = (name, defaultValue) => {
+  const [param, setParam] = useState();
+  const location = useLocation();
+
+  const setQueryStringParameter = useCallback(
+    value => {
+      const [base, hashFragment] = window.location.hash.split('?');
+      let params = new URLSearchParams(hashFragment);
+
+      if (_.isNil(value) || value === '') {
+        params.delete(name);
+      } else {
+        params.set(name, value);
+      }
+
+      const newHash = params.toString() ? `${base}?${params}` : base;
+
+      window.location.hash = decodeURIComponent(newHash);
+      setParam(value);
+    },
+    [name],
+  );
+
+  const value = useMemo(() => {
+    const [, hashFragment] = window.location.hash.split('?');
+    const params = new URLSearchParams(hashFragment);
+    return params.get(name) || defaultValue || '';
+  }, [location, param, name]);
+
+  return [value, setQueryStringParameter];
+};
+
+export { useQueryParamState };