Unified Searchbar (#417)

* Algolia autocomplete is kicking me in the shins, but this might work
* Stylesheet seperation proposal
* Polish for item rendering
* Fix mobile/tablet layout. Add CTA button. Unit tests.
* Account for shorter appbar. 
* Create a simple overlay.

__mocks__/@apollo/client/useQuery.js

@@ -0,0 +1 @@
+export const watchQuery = jest.fn()

package.json

@@ -114,9 +114,10 @@
     "eslint-plugin-jest": "^25.3.4",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
+    "postcss-import": "^14.1.0",
     "react-test-renderer": "^18.0.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.1.5",
     "ts-jest": "^28.0.2",
     "ts-standard": "^11.0.0",
     "typescript": "^4.6.4"

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    'postcss-import': {},
+    autoprefixer: {},
+    tailwindcss: {}
   }
 }

src/components/DesktopAppBar.tsx

@@ -3,14 +3,11 @@ import Link from 'next/link'
 import { useSession, signIn } from 'next-auth/react'
 
 import DesktopNavBar, { NavListItem } from './ui/DesktopNavBar'
-import ClimbSearch from './search/ClimbSearch'
 import XSearch from './search/XSearch'
 import DesktopFilterBar from './finder/filters/DesktopFilterBar'
 import NavMenuButton from './ui/NavMenuButton'
 
-import { useCanary } from '../js/hooks'
 import { ButtonVariant } from './ui/BaseButton'
-
 import ProfileNavButton from './ProfileNavButton'
 import NewPost from './NewPost'
 import LogoWithText from '../assets/brand/openbeta-logo-with-text.svg'
@@ -23,7 +20,6 @@ interface DesktopAppBarProps {
 }
 
 export default function DesktopAppBar ({ expanded, onExpandSearchBox, onClose, showFilterBar = true }: DesktopAppBarProps): JSX.Element {
-  const canary = useCanary()
   const { status } = useSession()
 
   let navList: JSX.Element | null | JSX.Element[]
@@ -50,13 +46,7 @@ export default function DesktopAppBar ({ expanded, onExpandSearchBox, onClose, s
           </Link>
       }
         search={
-          canary
-            ? <XSearch isMobile={false} />
-            : <ClimbSearch
-                expanded={expanded}
-                onClick={onExpandSearchBox}
-                onClickOutside={onClose}
-              />
+          <XSearch isMobile={false} />
       }
         navList={navList}
       />

src/components/Header.tsx

@@ -29,7 +29,7 @@ export default function Header (props: HeaderProps): JSX.Element {
   return (
     <div id={NAV_BAR_IDENTIFIER} className='relative z-40'>
       {isTablet || isMobile
-        ? <MobileTabletAppBar includeFilters={includeFilters} />
+        ? <MobileTabletAppBar isTablet={isTablet} includeFilters={includeFilters} />
         : <DesktopAppBar
             expanded={expanded}
             onExpandSearchBox={() => {

src/components/MobileAppBar.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link'
 import { Popover } from '@headlessui/react'
 import Image from 'next/image'
 
-import CragFinder from './search/CragFinder'
 import MobileNavBar from './ui/MobileNavBar'
 import { HomeIcon, MenuIcon } from '@heroicons/react/outline'
 import OpenBetaLogo from '../assets/brand/openbeta-logo.svg'
@@ -12,24 +11,26 @@ import { Button, ButtonVariant } from './ui/BaseButton'
 import { signIn, signOut, useSession } from 'next-auth/react'
 import ProfileNavButton from './ProfileNavButton'
 import NewPost from './NewPost'
+import XSearch from './search/XSearch'
 
 interface HeaderProps {
   includeFilters: boolean
+  isTablet: boolean
 }
 
-export default function MobileAppBar (props: HeaderProps): JSX.Element {
+export default function MobileAppBar ({ isTablet, includeFilters }: HeaderProps): JSX.Element {
   const { status } = useSession()
   const nav = status === 'authenticated' ? <AuthenticatedNav /> : <LoginButton />
   return (
     <>
       <MobileNavBar
         branding={<Branding />}
         home={<Home />}
-        search={<CragFinder />}
+        search={<XSearch isMobile={!isTablet} placeholder='Search' />}
         profile={nav}
         more={<More />}
       />
-      {props.includeFilters && <MobileFilterBar />}
+      {includeFilters && <MobileFilterBar />}
     </>
   )
 }
@@ -59,7 +60,7 @@ const Branding = (): JSX.Element => {
   return (
     <Link href='/'>
       <a>
-        <Image src={OpenBetaLogo} layout='responsive' />
+        <Image width={16} height={16} src={OpenBetaLogo} layout='responsive' />
       </a>
     </Link>
   )

src/components/home/Map.tsx

@@ -36,12 +36,12 @@ export default function Map (): JSX.Element {
   return (
     <div
       id={mapElementId}
-      className='z-10 absolute inset-0 w-full h-full bg-gray-100'
-      style={{ height: height - 54 }}
+      className='z-10 absolute inset-0 w-full h-full bg-gray-200'
+      style={{ height }}
     >
 
       <BaseMap
-        height={height - 54}
+        height={height}
         viewstate={viewstate}
         onViewStateChange={setViewState}
         light

src/components/search/Autocomplete.tsx

@@ -48,7 +48,7 @@ export const Autocomplete = (props: AutocompleteProps): JSX.Element => {
     <div
       className={
         classNames(
-          props.isMobile ? 'w-24 ' : 'z-50 mx-auto',
+          props.isMobile ? '' : 'z-50 mx-auto',
           props?.containerClassname)
       }
       ref={containerRef}