feat: add DatePicker to Conferences search page

Author: CloudPower97

client/.eslintrc.js

@@ -70,13 +70,6 @@ module.exports = {
     'import/no-unresolved': 2,
     'import/no-webpack-loader-syntax': 0,
     'import/prefer-default-export': 0,
-    indent: [
-      2,
-      2,
-      {
-        SwitchCase: 1,
-      },
-    ],
     'react/destructuring-assignment': 0,
     'react/jsx-closing-tag-location': 0,
     'react/forbid-prop-types': 0,

client/src/components/ConferencesSearch/ConferencesSearch.js

@@ -1,8 +1,14 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Section, Container, Row, TextInput } from 'react-materialize'
+import DatePicker from 'components/DatePicker'
 import SearchButton from 'components/SearchButton'
 
 class SearchConference extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+  }
+
   state = {}
 
   render() {
@@ -36,6 +42,15 @@ class SearchConference extends Component {
                   })
                 }}
               />
+              <DatePicker
+                s={12}
+                label="Conference date"
+                onChange={date => {
+                  this.setState({
+                    date: new Date(date).toISOString(),
+                  })
+                }}
+              />
             </Row>
           </Container>
         </Section>
@@ -46,7 +61,15 @@ class SearchConference extends Component {
               Object.keys(this.state).length
                 ? `?filter=${Object.entries(this.state)
                     .filter(([, value]) => value.length)
-                    .map(([field, value]) => encodeURIComponent(`${field} iLike %${value}%`))
+                    .map(([field, value]) => {
+                      switch (field) {
+                        case 'date':
+                          return encodeURIComponent(`${field} eq ${value}`)
+
+                        default:
+                          return encodeURIComponent(`${field} iLike %${value}%`)
+                      }
+                    })
                     .join(',')}`
                 : ''
             }

client/src/components/DatePicker/DatePicker.js

@@ -0,0 +1,162 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TextInput } from 'react-materialize'
+import idgen from 'libs/idgen'
+
+class DatePicker extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.id = props.id || `datepicker${idgen()}`
+  }
+
+  componentDidMount() {
+    if (typeof window.M !== 'undefined') {
+      const { onChange } = this.props
+      const elem = document.getElementById(this.id)
+      const options = onChange ? { onSelect: onChange, ...this.props.options } : this.props.options
+
+      this.instance = window.M.Datepicker.init(elem, options)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.instance) {
+      this.instance.destroy()
+    }
+  }
+
+  render() {
+    const { ...other } = this.props
+
+    return <TextInput id={this.id} inputClassName="datepicker" {...other} />
+  }
+}
+
+DatePicker.propTypes = {
+  /**
+   * Event called when Time has been selected
+   */
+  onChange: PropTypes.func,
+  /**
+   * id passed to datepicker, also used for init method
+   */
+  id: PropTypes.string,
+  /**
+   * options passed to init method
+   * more info: https://materializecss.com/pickers.html#date-picker
+   */
+  options: PropTypes.shape({
+    /**
+     * Automatically close picker when date is selected.
+     */
+    autoClose: PropTypes.bool,
+    /**
+     * The date output format for the input field value.
+     * @default 'mmm dd, yyyy'
+     */
+    format: PropTypes.string,
+    /**
+     * Used to create date object from current input string.
+     * @default null
+     */
+    parse: PropTypes.any,
+    /**
+     * The initial date to view when first opened.
+     * @default null
+     */
+    defaultDate: PropTypes.any,
+    /**
+     * Make the defaultDate the initial selected value.
+     * @default false
+     */
+    setDefaultDate: PropTypes.bool,
+    /**
+     * Prevent selection of any date on the weekend.
+     * @default false
+     */
+    disableWeekends: PropTypes.bool,
+    /**
+     * Custom function to disable certain days.
+     * @default null
+     */
+    disableDayFn: PropTypes.any,
+    /**
+     * First day of week (0: Sunday, 1: Monday etc).
+     * @default 0
+     */
+    firstDay: PropTypes.number,
+    /**
+     * The earliest date that can be selected.
+     * @default null
+     */
+    minDate: PropTypes.any,
+    /**
+     * The latest date that can be selected.
+     * @default null
+     */
+    maxDate: PropTypes.any,
+    /**
+     * Number of years either side, or array of upper/lower range.
+     * @default 10
+     */
+    yearRange: PropTypes.oneOf([PropTypes.number, PropTypes.array]),
+    /**
+     * Changes Datepicker to RTL.
+     * @default false
+     */
+    isRTL: PropTypes.bool,
+    /**
+     * Show month after year in Datepicker title.
+     * @default false
+     */
+    showMonthAfterYear: PropTypes.bool,
+    /**
+     * Render days of the calendar grid that fall in the next or previous month.
+     * @default false
+     */
+    showDaysInNextAndPreviousMonths: PropTypes.bool,
+    /**
+     * Specify a DOM element to render the calendar in, by default it will be placed before the input.
+     * @default null
+     */
+    container: PropTypes.any,
+    /**
+     * Show the clear button in the datepicker.
+     * @default false
+     */
+    showClearBtn: PropTypes.bool,
+    /**
+     * Internationalization options.
+     * @default See i18n documentation.
+     */
+    i18n: PropTypes.any,
+    /**
+     * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
+     * @default []
+     */
+    events: PropTypes.array,
+    /**
+     * Callback function when date is selected, first parameter is the newly selected date.
+     * @default null
+     */
+    onSelect: PropTypes.any,
+    /**
+     * Callback function when Datepicker is opened.
+     * @default null
+     */
+    onOpen: PropTypes.any,
+    /**
+     * Callback function when Datepicker is closed.
+     * @default null
+     */
+    onClose: PropTypes.any,
+    /**
+     * Callback function when Datepicker HTML is refreshed.
+     * @default null
+     */
+    onDraw: PropTypes.any,
+  }),
+}
+
+export default DatePicker

client/src/components/DatePicker/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "DatePicker.js"
+}