search page

Author: alexjs-dev

components/Forms/SearchForm.module.scss

@@ -3,6 +3,7 @@
 .container {
   padding: spacing(2) spacing(1);
   background: $color-white;
+  transition: $transition;
   .row {
     display: grid;
     grid-template-columns: 1fr 1fr;

components/Forms/SearchForm.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable no-underscore-dangle */
 import React, { useState, useEffect } from 'react'
-import { reduxForm } from 'redux-form' // tslint:disable
+import { reduxForm, reset, getFormValues, change } from 'redux-form' // tslint:disable
 import classNames from 'classnames'
 import useFetchVehicleModels from '../../hooks/useFetchVehicleModels'
 import { useRouter } from 'next/router'
+import get from 'lodash/get'
+import reduce from 'lodash/reduce'
+import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import useModal from '../../hooks/useModal'
 import { useTranslation } from 'react-i18next'
@@ -21,20 +24,40 @@ type Props = {
   fluid?: boolean
   cb?: () => void
   defaultExpanded?: boolean
+  dirty: boolean
   handleSubmit: (fn: any) => void
 }
 
+const createResetFieldsMap = (fields: any, formValues: any, cb: any) => {
+  return reduce(
+    fields,
+    (prev, field) => {
+      const value = get(formValues, field)
+      if (!prev) prev = {}
+      if (value && value !== '') {
+        return {
+          ...prev,
+          [field]: cb(field),
+        }
+      }
+      return prev
+    },
+    {}
+  )
+}
+
 const SearchFormComponent: React.FunctionComponent<Props> = ({
   className,
   fluid,
   cb,
   defaultExpanded,
   handleSubmit,
+  dirty,
 }) => {
   const router = useRouter()
   useFetchVehicleModels(form)
   const [openExpand, setOpenExpand] = useState(defaultExpanded || false)
-
+  const dispatch = useDispatch()
   useEffect(() => {
     if (defaultExpanded) setOpenExpand(true)
   }, [defaultExpanded])
@@ -54,12 +77,29 @@ const SearchFormComponent: React.FunctionComponent<Props> = ({
     if (cb) cb()
   }
 
+  const formValues = useSelector(getFormValues(form))
+
+  const resetFields = createResetFieldsMap(
+    [
+      fieldTypes.make,
+      fieldTypes.model,
+      fieldTypes.fuel,
+      fieldTypes.gearbox,
+      fieldTypes.bodyType,
+    ],
+    formValues,
+    (field: string) => () => dispatch(change(form, field, ''))
+  )
+
   return (
     <form
       className={classNames(styles.container, className, fluid && styles.fluid)}
       onSubmit={() => handleSubmit(onSubmit)}
     >
-      <BaseVehicleFields />
+      <BaseVehicleFields
+        onReset={!dirty ? undefined : () => dispatch(reset(form))}
+        resetFields={resetFields}
+      />
       <div className={styles.row}>
         {/* @ts-ignore */}
         <Checkbox name={fieldTypes.remember} label={t('label.remember')} />

components/Forms/parts/BaseVehicleFields.module.scss

@@ -15,3 +15,11 @@
   @extend .spacing;
   min-width: 50%;
 }
+
+.buttonReset {
+  display: flex;
+  margin-bottom: spacing(1);
+  @media (min-width: $tablet) {
+    justify-content: flex-end;
+  }
+}

components/Forms/parts/BaseVehicleFields.tsx

@@ -2,14 +2,16 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import includes from 'lodash/includes'
+import get from 'lodash/get'
+import { FiTrash2 } from 'react-icons/fi'
 import {
   modelsSelector,
   makesSelector,
   modelsLoadingSelector,
   makesLoadingSelector,
 } from '../../../store/vehicles/selectors'
 import { transmissionTypes, bodyType, fuelTypes } from '../../../consts/vehicle'
-import { Select } from '../..'
+import { Button, Select } from '../..'
 import {
   mapBaseOptions,
   mapVehicleTranslatableOptions,
@@ -20,11 +22,15 @@ import styles from './BaseVehicleFields.module.scss'
 type Props = {
   singleVehicleBodySelect?: boolean
   requiredFields?: string[]
+  onReset?: any
+  resetFields?: any
 }
 
 const BaseVehicleFields: React.FunctionComponent<Props> = ({
   singleVehicleBodySelect,
   requiredFields,
+  onReset,
+  resetFields,
 }) => {
   const { t } = useTranslation()
   const models = useSelector(modelsSelector)
@@ -41,6 +47,18 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
 
   return (
     <>
+      {onReset && (
+        <div className={styles.buttonReset}>
+          <Button
+            color={Button.colors.RED}
+            type={Button.types.GHOST}
+            onClick={onReset}
+          >
+            <FiTrash2 />
+          </Button>
+        </div>
+      )}
+
       <div className={styles.row}>
         {/* @ts-ignore */}
         <Select
@@ -51,6 +69,7 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
           isRequired={includes(requiredFields, fieldTypes.make)}
           name={fieldTypes.make}
           options={makesOptions}
+          onReset={get(resetFields, fieldTypes.make)}
         />
         {/* @ts-ignore */}
         <Select
@@ -61,6 +80,7 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
           name={fieldTypes.model}
           isRequired={includes(requiredFields, fieldTypes.model)}
           options={modelsOptions}
+          onReset={get(resetFields, fieldTypes.model)}
         />
       </div>
       <div className={styles.row}>
@@ -72,6 +92,7 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
           name={fieldTypes.fuel}
           isRequired={includes(requiredFields, fieldTypes.fuel)}
           options={fuels}
+          onReset={get(resetFields, fieldTypes.fuel)}
         />
         {/* @ts-ignore */}
         <Select
@@ -81,20 +102,22 @@ const BaseVehicleFields: React.FunctionComponent<Props> = ({
           name={fieldTypes.gearbox}
           isRequired={includes(requiredFields, fieldTypes.gearbox)}
           options={transmissions}
+          onReset={get(resetFields, fieldTypes.gearbox)}
         />
       </div>
       <div className={styles.spacing}>
-      {/* @ts-ignore */}
-      <Select
-        label={t('label.bodyType')}
-        fluid
-        multiple={!singleVehicleBodySelect}
-        isRequired={includes(requiredFields, fieldTypes.bodyType)}
-        placeholder={t('placeholder.bodyType')}
-        name={fieldTypes.bodyType}
-        className={styles.marginBottom}
-        options={vehicleBodyTypes}
-      />
+        {/* @ts-ignore */}
+        <Select
+          label={t('label.bodyType')}
+          fluid
+          multiple={!singleVehicleBodySelect}
+          isRequired={includes(requiredFields, fieldTypes.bodyType)}
+          placeholder={t('placeholder.bodyType')}
+          name={fieldTypes.bodyType}
+          className={styles.marginBottom}
+          onReset={get(resetFields, fieldTypes.bodyType)}
+          options={vehicleBodyTypes}
+        />
       </div>
     </>
   )

components/Input/Input.module.scss

@@ -55,6 +55,7 @@
   margin-bottom: spacing(1);
   display: inline-flex;
   align-items: center;
+  position: relative;
   span {
     transition: $transition;
     font-size: $font-size-p;
@@ -135,3 +136,9 @@
     border-bottom: 10px solid $color-complimentary-transparent-heavy;
   }
 }
+
+.cancelButton {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

components/Input/Select.js

@@ -37,6 +37,7 @@ const SelectComponent = ({
   placeholder,
   multiple,
   isCustom,
+  onReset,
 }) => {
   const { value } = input
   const { error, active } = meta
@@ -116,7 +117,12 @@ const SelectComponent = ({
         onClick={handleOpen}
         onKeyPress={handleKeyPress}
       >
-        <InputLabel isRequired={isRequired} label={label} name={name} />
+        <InputLabel
+          isRequired={isRequired}
+          label={label}
+          name={name}
+          onReset={onReset}
+        />
         {isCustom ? (
           <select
             name={name}
@@ -131,7 +137,7 @@ const SelectComponent = ({
             onChange={(e) => handleOptionClick(e.target.value)}
             tabIndex="0"
           >
-          <option value="">---</option>
+            <option value="">---</option>
             {map(options, (option, index) => (
               <option key={index} value={option.value}>
                 {option.label}
@@ -188,6 +194,7 @@ SelectComponent.propTypes = {
   onChange: PropTypes.func,
   fluid: PropTypes.bool,
   label: PropTypes.string,
+  onReset: PropTypes.any,
   multiple: PropTypes.bool,
   loading: PropTypes.bool,
   isRequired: PropTypes.bool,
@@ -223,6 +230,7 @@ SelectComponent.defaultProps = {
   options: [],
   multiple: false,
   isRequired: false,
+  onReset: null,
   onChange: null,
 }
 
@@ -241,6 +249,7 @@ const Select = ({
   multiple,
   loading,
   isCustom,
+  onReset,
   ...dropdownProps
 }) => {
   if (!visible) return null
@@ -263,6 +272,7 @@ const Select = ({
         multiple,
         loading,
         isCustom,
+        onReset,
         ...dropdownProps,
       }}
     />
@@ -283,6 +293,7 @@ Select.propTypes = {
   fluid: PropTypes.bool,
   label: PropTypes.string,
   multiple: PropTypes.bool,
+  onReset: PropTypes.any,
   loading: PropTypes.bool,
   isRequired: PropTypes.bool,
   isCustom: PropTypes.bool, // use HTML5 option select instead
@@ -298,6 +309,7 @@ Select.defaultProps = {
   disabled: false,
   options: [],
   validate: null,
+  onReset: null,
   onChange: null,
   normalize: null,
   multiple: false,

components/Input/parts/InputLabel.js

@@ -1,7 +1,8 @@
 import React, { memo, useState, useRef } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import { FcQuestions } from 'react-icons/fc'
+import { FcQuestions, FcCancel } from 'react-icons/fc'
+import { Button } from '~components'
 import useOutsideClick from '~hooks/useOutsideClick'
 import styles from '../Input.module.scss'
 
@@ -13,6 +14,7 @@ const InputLabel = ({
   small,
   tooltip,
   className,
+  onReset,
 }) => {
   const [tooltipActive, setTooltipActive] = useState(false)
   const ref = useRef(null)
@@ -32,8 +34,22 @@ const InputLabel = ({
         <span>{label}</span>
         {isRequired && <span className={styles.required}>&nbsp;*</span>}
       </label>
+      {onReset && (
+        <button
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            onReset()
+          }}
+          type="button"
+          className={styles.cancelButton}
+        >
+          <FcCancel />
+        </button>
+      )}
       {tooltip && (
         <button
+          type="button"
           className={styles.tooltipButton}
           onClick={() => setTooltipActive(!tooltipActive)}
         >
@@ -54,6 +70,7 @@ InputLabel.propTypes = {
   small: PropTypes.bool,
   name: PropTypes.string,
   tooltip: PropTypes.string,
+  onReset: PropTypes.any,
 }
 
 InputLabel.defaultProps = {
@@ -62,6 +79,7 @@ InputLabel.defaultProps = {
   className: null,
   tooltip: null,
   isRequired: false,
+  onReset: null,
 }
 
 export default memo(InputLabel)