search form

Author: alexjs-dev

components/Forms/SearchForm.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { reduxForm } from 'redux-form' // tslint:disable
 import classNames from 'classnames'
 import useFetchVehicleModels from '../../hooks/useFetchVehicleModels'
@@ -20,31 +20,38 @@ type Props = {
   className?: string | null
   fluid?: boolean
   cb?: () => void
+  defaultExpanded?: boolean
   handleSubmit: (fn: any) => void
 }
 
 const SearchFormComponent: React.FunctionComponent<Props> = ({
   className,
   fluid,
   cb,
+  defaultExpanded,
   handleSubmit,
 }) => {
   const router = useRouter()
   useFetchVehicleModels(form)
-  const [openExpand, setOpenExpand] = useState(false)
+  const [openExpand, setOpenExpand] = useState(defaultExpanded || false)
+
+  useEffect(() => {
+    if (defaultExpanded) setOpenExpand(true)
+  }, [defaultExpanded])
+
   /* @ts-ignore */
   const [_, __, closeModal] = useModal()
   const { t } = useTranslation()
   const onSubmit = (values: any) => {
     const query = toQueryBasic(values)
-    closeModal();
+    closeModal()
     if (query) {
       router.push({
         pathname: '/search',
         query,
       })
     }
-    if (cb) cb();
+    if (cb) cb()
   }
 
   return (

components/Input/Select.module.scss

@@ -44,6 +44,10 @@
     font-size: $font-size-p;
     line-height: $line-height-h5;
     color: $color-black;
+    @media (max-width: $tablet) {
+      white-space: nowrap;
+      max-width: 23vw;
+    }
   }
   &:focus {
     border: $border-thick-primary;

components/Pickers/ColorPicker.js

@@ -136,7 +136,7 @@ ColorPicker.propTypes = {
 
 ColorPicker.defaultProps = {
   visibleColors: 3,
-  allowEmpty: false,
+  allowEmpty: true,
   label: null,
 }
 

components/Pickers/RangePicker.module.scss

@@ -1,15 +1,18 @@
 @import 'vars.scss';
 
 .container {
-	display: flex;
-	.divider {
-		margin-top: spacing(6);
-		padding: 0 spacing(0.5);
-		.line {
-			width: 100%;
-			min-width: 56px;
-			height: 2px;
-			background: $color-light-gray;
-		}
-	}
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  .divider {
+    margin-top: spacing(6);
+    padding: 0 spacing(0.5);
+    .line {
+      width: 100%;
+      height: 2px;
+      background: $color-light-gray;
+      @media (min-width: $tablet) {
+        min-width: 56px;
+      }
+    }
+  }
 }

pages/search/index.tsx

@@ -3,6 +3,10 @@ import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { change } from 'redux-form' // tslint:disable
 import get from 'lodash/get'
+import includes from 'lodash/includes'
+import some from 'lodash/some'
+import keys from 'lodash/keys'
+import isEmpty from 'lodash/isEmpty'
 import toNumber from 'lodash/toNumber'
 import {
   SearchForm,
@@ -18,40 +22,113 @@ import Creators from '../../store/listing/creators'
 import styles from './search.module.scss'
 import { useRouter } from 'next/router'
 import { fieldTypes } from '~/utils/formValidators'
+import { makesSelector } from '~/store/vehicles/selectors'
 
 const form = 'searchForm'
 
+const normalizeSearchQuery = (query: any) => {
+  console.log('query', query)
+  return {
+    ...(query.pricemin ? { 'price[$gte]': query.pricemin } : {}),
+    ...(query.pricemax
+      ? { 'price[$lte]': toNumber(get(query, 'pricemax', 0)) + 1 }
+      : {}),
+    ...(query.model ? { 'vehicle.modelId': query.model } : {}), // create one for make
+    ...(query.transmission
+      ? { 'vehicle.transmission': query.transmission }
+      : {}),
+    ...(query.fuel ? { 'vehicle.fuel': query.fuel } : {}),
+    ...(query.color ? { 'vehicle.color': query.color } : {}),
+    ...(query.bodyType
+      ? {
+          'vehicle.bodyType': {
+            $in: query.bodyType,
+          },
+        }
+      : {}),
+  }
+}
+
+//     roomId: {
+// $in: [ 2, 5 ]
+// }
+
 const SearchPage: React.FunctionComponent = () => {
   const { query } = useRouter()
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const pagination = useSelector(listingPaginationSelector)
   const listings = useSelector(listingsSelector)
+  const makes = useSelector(makesSelector)
   const count = get(pagination, 'total', 0)
 
   const fetch = (resetPagination = false) => {
-      dispatch(Creators.fetchListings({
+    dispatch(
+      Creators.fetchListings({
         resetPagination,
-        ...(query.pricemin ? { 'price[$gte]': query.pricemin } : {}),
-        ...(query.pricemax ? { 'price[$lte]': toNumber(get(query, 'pricemax', 0)) + 1 } : {}),
-      }))
+        ...normalizeSearchQuery(query),
+      })
+    )
   }
   useEffect(() => {
     if (query) {
-      fetch();
+      fetch()
       if (query.pricemin) {
         dispatch(change(form, `${fieldTypes.price}.min`, query.pricemin))
       }
       if (query.pricemax) {
         dispatch(change(form, `${fieldTypes.price}.max`, query.pricemax))
       }
+      if (query.yearmax) {
+        dispatch(change(form, `${fieldTypes.year}.max`, query.yearmax))
+      }
+      if (query.yearmin) {
+        dispatch(change(form, `${fieldTypes.year}.min`, query.yearmin))
+      }
+      if (query.color) {
+        dispatch(change(form, `${fieldTypes.color}`, query.color))
+      }
+      if (query.bodyType) {
+        dispatch(change(form, `${fieldTypes.bodyType}`, query.bodyType))
+      }
+      if (query.transmission) {
+        dispatch(change(form, `${fieldTypes.gearbox}`, query.transmission))
+      }
+      if (query.fuel) {
+        dispatch(change(form, `${fieldTypes.fuel}`, query.fuel))
+      }
+      if (query.make) {
+        dispatch(change(form, `${fieldTypes.make}`, query.make))
+      }
     }
   }, [query])
+
+  useEffect(() => {
+    if (!isEmpty(makes) && query) {
+      if (query.model) {
+        setTimeout(() => {
+          dispatch(change(form, `${fieldTypes.model}`, query.model))
+        }, 300)
+      }
+    }
+  }, [makes])
+
+  const queryKeys = keys(query)
+
+  const defaultExpanded = some(
+    ['color', 'pricemin', 'pricemax', 'yearmin', 'yearmax'],
+    (key) => includes(queryKeys, key)
+  )
+
   return (
     <Layout background="white" fullscreen>
       <div className={styles.search}>
         <h1>{`${t('titles.foundVehicles')}: ${count}`}</h1>
-        <SearchForm cb={() => fetch(true)} fluid />
+        <SearchForm
+          cb={() => fetch(true)}
+          defaultExpanded={defaultExpanded}
+          fluid
+        />
       </div>
       <ListingsCarousel type="FEATURED" title={t('titles.featuredVehicles')} />
       <InfinitePagination