Shareable Links for search results, and some refactors

package.json

@@ -15,6 +15,7 @@
     "eos-icons": "^4.0.3",
     "i18next": "^19.4.5",
     "node-sass": "^4.13.1",
+    "query-string": "^7.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.1",

src/components/Dropdown.js

@@ -1,9 +1,19 @@
 import React, { useState, useEffect } from 'react'
+import { navigate } from '@reach/router'
+import { stringify } from 'query-string'
 
 import Button from './Button'
 
 const Dropdown = (props) => {
-  const { title, reference, curr, setCurr, itemList } = props
+  const {
+    title,
+    reference,
+    curr,
+    setCurr,
+    itemList,
+    searchFilters,
+    objKey
+  } = props
 
   const [dropdownState, setDropdownState] = useState(false)
 
@@ -14,6 +24,18 @@ const Dropdown = (props) => {
   const handleSelection = (value) => {
     setCurr(value)
     setDropdownState(false)
+    if (searchFilters) {
+      searchFilters[objKey] = value
+      if (searchFilters[objKey] === 'All') {
+        delete searchFilters[objKey]
+      }
+      const queryString = stringify(searchFilters)
+      if (queryString.length > 0) {
+        navigate(`/?${queryString}`)
+      } else {
+        navigate('/')
+      }
+    }
   }
 
   useEffect(() => {

src/components/Pagination.js

@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react'
+import { stringify } from 'query-string'
 
 import { Link } from '@reach/router'
 
 const Pagination = (props) => {
-  const { getPage, storyCount, status, product } = props
+  const { getPage, storyCount, status, product, searchFilters } = props
+
+  const queryString = stringify(searchFilters)
+
+  const finalRoute = queryString.length > 0 ? `/?${queryString}` : '/'
 
   const [currNumber, setCurrNumber] = useState(1)
 
@@ -38,7 +43,7 @@ const Pagination = (props) => {
             getPage(currNumber - 1)
           }
         }}
-        to='/'
+        to={finalRoute}
       >
         <i className='eos-icons eos-18'>keyboard_arrow_left</i>
         {`Prev`}
@@ -53,7 +58,7 @@ const Pagination = (props) => {
                     setCurrNumber(ele)
                     getPage(ele)
                   }}
-                  to='/'
+                  to={finalRoute}
                   key={key}
                 >
                   {ele}
@@ -70,7 +75,7 @@ const Pagination = (props) => {
             getPage(currNumber + 1)
           }
         }}
-        to='/'
+        to={finalRoute}
       >
         {`Next`}
         <i className='eos-icons eos-18'>keyboard_arrow_right</i>

src/components/SearchInput.js

@@ -0,0 +1,114 @@
+import React, { useState, useRef } from 'react'
+
+import Button from './Button'
+import Dropdown from './Dropdown'
+import UsersSuggestionDropdown from './UsersSuggestionDropdown'
+
+const SearchInput = (props) => {
+  const {
+    searchTerm,
+    setSearchTerm,
+    userTerm,
+    setUserTerm,
+    setSearchQuery,
+    setUserQuery
+  } = props
+
+  const [fieldToSearch, setFieldToSearch] = useState('Title')
+
+  const fieldToSearchDropdownContainer = useRef()
+
+  const [usersSuggestionOpen, setUsersSuggestionOpen] = useState(false)
+
+  const handleSearchInputChange = (event) => {
+    if (fieldToSearch === 'Title') {
+      setSearchTerm(event.target.value)
+    } else {
+      setUserTerm(event.target.value)
+      setUsersSuggestionOpen(true)
+    }
+  }
+
+  const handleSearchKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      if (fieldToSearch === 'Title' && searchTerm.length > 0) {
+        setSearchQuery(`Title_contains: "${searchTerm}"`)
+      } else if (userTerm.length > 0) {
+        setUserQuery(userTerm)
+        setUsersSuggestionOpen(false)
+      }
+    }
+  }
+
+  return (
+    <div className='flex flex-row search-controls'>
+      <div className='flex flex-row search-input'>
+        <span>
+          <i className='eos-icons'>search</i>
+        </span>
+        {
+          <UsersSuggestionDropdown
+            isOpen={usersSuggestionOpen}
+            userTerm={userTerm}
+            setUserTerm={setUserTerm}
+            setUserQuery={setUserQuery}
+            setUsersSuggestionOpen={setUsersSuggestionOpen}
+          />
+        }
+        <input
+          type='text'
+          name='search'
+          placeholder='Search'
+          autoComplete='off'
+          value={fieldToSearch === 'Title' ? searchTerm : userTerm}
+          onChange={handleSearchInputChange}
+          onKeyDown={handleSearchKeyDown}
+          onFocus={() => {
+            if (fieldToSearch === 'Author' && userTerm.length > 0) {
+              setUsersSuggestionOpen(true)
+            }
+          }}
+        />
+        <div className='close-btn-div'>
+          <span
+            className='close-btn'
+            onClick={() => {
+              if (fieldToSearch === 'Title' && searchTerm.length > 0) {
+                setSearchTerm('')
+              } else if (userTerm.length > 0) {
+                setUserTerm('')
+              }
+            }}
+          >
+            {((fieldToSearch === 'Title' && searchTerm.length > 0) ||
+              (fieldToSearch === 'Author' && userTerm.length > 0)) && (
+              <i className='eos-icons'>close</i>
+            )}
+          </span>
+        </div>
+        <Dropdown
+          title=''
+          reference={fieldToSearchDropdownContainer}
+          curr={fieldToSearch}
+          setCurr={setFieldToSearch}
+          itemList={['Title', 'Author']}
+        />
+      </div>
+      <Button
+        type='submit'
+        className='btn btn-default'
+        onClick={() => {
+          if (fieldToSearch === 'Title' && searchTerm.length > 0) {
+            setSearchQuery(`Title_contains: "${searchTerm}"`)
+          } else if (userTerm.length > 0) {
+            setUserQuery(userTerm)
+          }
+        }}
+      >
+        Search
+      </Button>
+    </div>
+  )
+}
+
+export default SearchInput