Merge pull request #582 from kitspace/ke/search-input

Put search input on front page, make it persist query

e2e/cypress/e2e/multiProject.spec.js

@@ -84,8 +84,7 @@ describe('Render project cards', () => {
     cy.visit('/')
 
     // Search for the project
-    cy.get('nav [data-cy=search-field] > input').type(user.username)
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(user.username)
 
     // Click on a subproject project card
     cy.get('[data-cy=project-card]')
@@ -188,8 +187,7 @@ describe('Multi project page', () => {
     const multiProjectName = multiProjectsNames[0]
     cy.visit('/')
     // Search for the project
-    cy.get('nav [data-cy=search-field] > input').type(user.username)
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(user.username)
 
     // Click on a multiproject project card
     cy.get('[data-cy=project-card]')

e2e/cypress/e2e/search.spec.js

@@ -1,19 +1,15 @@
 import { getFakeUser } from '../support/getFakeUser'
 
-describe('Navbar search', () => {
-  it('should redirect to /search when search is submitted', () => {
+describe('Search', () => {
+  it('should rewrite url to /search', () => {
     const queryTerm = 'awesome project'
 
     // Visit homepage
     cy.visit('/')
     // Write query term in the search field
-    cy.get('nav [data-cy=search-field] > input').type(queryTerm)
-    // The URL shouldn't change before clicking on `Search`
-    cy.url().should('equal', `${Cypress.config().baseUrl}/`)
-    // Press enter
-    cy.get('nav [data-cy=search-form]').submit()
-    // Should redirect to the search page
-    cy.url().should('include', `/search?q=${encodeURI(queryTerm)}`)
+    cy.get('[data-cy=search-field] > input').type(queryTerm)
+    // Should rewrite url to the search page
+    cy.url().should('include', `/search?q=${encodeURIComponent(queryTerm)}`)
   })
 
   it('should display project card on submitting search form', () => {
@@ -34,9 +30,7 @@ describe('Navbar search', () => {
 
     cy.visit('/')
     // Write query term in the search field
-    cy.get('nav [data-cy=search-field] > input').type(repoName)
-    // Press enter
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(repoName)
     // Should redirect to the search page
     cy.url().should('include', `/search?q=${encodeURI(repoName)}`)
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
@@ -65,10 +59,8 @@ describe('Homepage search on mobile', () => {
     cy.viewport('iphone-6')
     // Write query term in the search field
     cy.get('main [data-cy=search-field] > input').type(repoName)
-    // Press enter
-    cy.get('main [data-cy=search-form]').submit()
     // Should redirect to the search page
-    cy.url().should('include', `/search?q=${encodeURI(repoName)}`)
+    cy.url().should('include', `/search?q=${encodeURIComponent(repoName)}`)
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
   })
 })
@@ -102,11 +94,10 @@ describe('/search route', () => {
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
   })
 
-  it('should redirect to /search when search box is cleared', () => {
+  it('should redirect to / when search box is cleared', () => {
     cy.visit('search?q=query')
     // Clear the search form and press enter
-    cy.get('nav [data-cy=search-field] > input').clear()
-    cy.get('nav [data-cy=search-form]').submit()
-    cy.url().should('equal', `${Cypress.config().baseUrl}/search?q=`)
+    cy.get('[data-cy=search-field] > input').clear()
+    cy.url().should('equal', `${Cypress.config().baseUrl}/`)
   })
 })

e2e/cypress/support/commands.js

@@ -75,7 +75,7 @@ Cypress.Commands.add('importRepo', (remoteUrl, repoName, user) => {
           method: 'GET',
           failOnStatusCode: false,
         })
-        .then(response => response.body.empty === false),
+        .then(response => !response.body.empty),
     { timeout: 60_000, interval: 1000 },
   )
 })

frontend/next.config.js

@@ -82,5 +82,13 @@ module.exports = async phase => {
         },
       ]
     },
+    async rewrites() {
+      return [
+        {
+          source: '/',
+          destination: '/search?q=',
+        },
+      ]
+    },
   }
 }

frontend/package.json

@@ -14,8 +14,8 @@
     "express": "^4.19.2",
     "file-loader": "^6.0.0",
     "highlight.js": "^11.6.0",
-    "joi": "^17.2.1",
     "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "meilisearch": "^0.25.1",
     "morgan": "^1.10.0",
     "next": "^12.1.6",
@@ -26,7 +26,8 @@
     "react-intersection-observer": "^9.4.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.3",
-    "swr": "^1.3.0",
+    "swr": "^2.2.5",
+    "usehooks-ts": "^3.1.0",
     "webpack": "^5.76.0"
   },
   "devDependencies": {

frontend/src/components/NavBar/NavSearchInput.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import { Form, Icon, Input } from 'semantic-ui-react'
+
+import { useSearchQuery } from '@contexts/SearchContext'
+
+const NavSearchInput = () => {
+  const { push } = useRouter()
+  const { query: contextQuery, updateQuery: updateContextQuery } = useSearchQuery()
+  const [query, setQuery] = useState(contextQuery)
+
+  const handleSubmit = () => {
+    updateContextQuery(query)
+    const path = `/search?q=${encodeURIComponent(query)}`
+    push(path)
+  }
+
+  return (
+    <Form data-cy="search-form" onSubmit={handleSubmit}>
+      <Form.Field
+        fluid
+        autoComplete="off"
+        control={Input}
+        data-cy="search-field"
+        icon={
+          <Icon
+            circular
+            disabled={!query}
+            link={!!query}
+            name="search"
+            onClick={handleSubmit}
+          />
+        }
+        id="search-field"
+        name="query"
+        placeholder="Search for projects"
+        value={query ?? ''}
+        onChange={e => setQuery(e.target.value)}
+      />
+    </Form>
+  )
+}
+
+export default NavSearchInput

frontend/src/components/NavBar/index.jsx → frontend/src/components/NavBar/index.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Button, Icon, Menu, Popup } from 'semantic-ui-react'
 
-import SearchBar from './SearchBar'
+import NavSearchInput from './NavSearchInput'
 import styles from './index.module.scss'
 import logoSvg from './logo.svg'
+import { useSearchQuery } from '@contexts/SearchContext'
 
 const NavBar = () => {
   return (
@@ -88,21 +89,14 @@ const AddProjectButton = () => {
 
 const SiteMenuItems = () => {
   const { pathname } = useRouter()
-  const isProjectRoute =
-    pathname === '/' ||
-    pathname === '/search' ||
-    RegExp('^/projects/').test(pathname)
+  const isSearchRoute = pathname === '/' || pathname === '/search'
+  const isProjectRoute = isSearchRoute
 
+  const { query } = useSearchQuery()
   return (
     <>
-      <Link passHref href="/">
-        <Menu.Item
-          active={isProjectRoute}
-          as="a"
-          // Add a separation line after user specific actions.
-          className={styles.projects}
-          href="/"
-        >
+      <Link passHref href={query ? `/search?q=${encodeURIComponent(query)}` : '/'}>
+        <Menu.Item active={isProjectRoute} as="a" className={styles.projects}>
           Projects
         </Menu.Item>
       </Link>
@@ -111,9 +105,11 @@ const SiteMenuItems = () => {
           1-click BOM
         </Menu.Item>
       </Link>
-      <Menu.Item className={styles.SearchBarContainer}>
-        <SearchBar />
-      </Menu.Item>
+      {isSearchRoute ? null : (
+        <Menu.Item className={styles.SearchBarContainer}>
+          <NavSearchInput />
+        </Menu.Item>
+      )}
     </>
   )
 }

frontend/src/components/Page/index.jsx

@@ -3,7 +3,6 @@ import { string, bool, node } from 'prop-types'
 
 import Head from '@components/Head'
 import NavBar from '@components/NavBar'
-import SearchProvider from '@contexts/SearchContext'
 import styles from './index.module.scss'
 
 const Content = ({ contentFullSize, children }) => {
@@ -19,13 +18,13 @@ const Container = ({ contentFullSize, children }) => (
   </main>
 )
 
-const Page = ({ title, initialQuery, contentFullSize, children }) => {
+const Page = ({ title, contentFullSize, children }) => {
   return (
-    <SearchProvider initialQuery={initialQuery}>
+    <>
       <Head title={title} />
       <NavBar />
       <Content contentFullSize={contentFullSize}>{children}</Content>
-    </SearchProvider>
+    </>
   )
 }
 

frontend/src/components/SearchInput.module.scss

@@ -0,0 +1,29 @@
+@import './colors.scss';
+
+.searchInput {
+  display: block;
+  max-width: min(600px, 90%);
+  height: 60px;
+  border: 1px solid $lightlightgray;
+  margin: 0 auto !important;
+  margin-bottom: 48px !important;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.searchIcon {
+  margin-right: 7px !important;
+}
+
+main #search-field::placeholder {
+  color: $silver-chalice !important;
+  font-size: 18px;
+}
+
+main #search-field {
+  height: 60px;
+}
+
+main #search-field:focus {
+  border: 1px solid $lightlightgray !important;
+}