add date range picker to the incidents screen

client/src/components/DateRangePicker/index.js

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+
+import { Form, Message } from 'semantic-ui-react';
+
+import { defaultDateFormat } from '../../constants/constants';
+
+class DateRangePicker extends Component {
+    constructor(props) {
+        super(props);
+
+        const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
+        let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();
+
+        if (initialStartDate > initialEndDate){
+            initialEndDate = initialStartDate.add(1, 'day');
+        }
+
+        this.state = {
+            startDate: initialStartDate,
+            endDate: initialEndDate,
+            error: null,
+            startDateLabel: props.startDateLabel || 'Start date',
+            endDateLabel: props.endDateLabel || 'End date',
+        };
+    }
+
+    onStartDateChange(event) {
+        const { endDate, startDateLabel, endDateLabel } = this.state;
+
+        const newStartDate = moment(event.target.value, defaultDateFormat);
+        if (newStartDate > endDate){
+            this.setState({
+                error: `${startDateLabel} cannot be after ${endDateLabel}`
+            });
+            return;
+        }
+        this.setState({startDate: newStartDate, error: null});
+    }
+
+    onEndDateChange(event) {
+        const { startDate, startDateLabel, endDateLabel } = this.state;
+
+        const newEndDate = moment(event.target.value, defaultDateFormat);
+        if (newEndDate < startDate){
+            this.setState({
+                error: `${startDateLabel} cannot be after ${endDateLabel}`
+            });
+            return;
+        }
+        this.setState({endDate: newEndDate, error: null});
+    }
+
+    onDismiss() {
+        this.setState({error: null});
+    }
+
+    onButtonClick() {
+        const { onDatesUpdate } = this.props;
+        const { startDate, endDate } = this.state;
+
+        if (onDatesUpdate){
+            onDatesUpdate({
+                startDate: startDate.format(defaultDateFormat),
+                endDate: endDate.format(defaultDateFormat),
+            });
+        }
+    }
+
+    componentDidMount() {
+        this.onButtonClick();
+    }
+
+    render() {
+        const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
+
+        const buttonLabel = this.props.buttonLabel || 'Save';
+
+        const startDateValue = startDate.format(defaultDateFormat);
+        const endDateValue = endDate.format(defaultDateFormat);
+
+        return (
+            <Form>
+                <Form.Group widths="equal">
+                    <Form.Input
+                        fluid
+                        required
+                        label={startDateLabel}
+                        type="date"
+                        value={startDateValue}
+                        onChange={this.onStartDateChange.bind(this)}
+                    />
+                    <Form.Input
+                        fluid
+                        required
+                        label={endDateLabel}
+                        type="date"
+                        value={endDateValue}
+                        onChange={this.onEndDateChange.bind(this)}
+                    />
+                </Form.Group>
+                { error &&
+                    <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
+                        <Message.Header>Wrong date</Message.Header>
+                        <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
+                    </Message>
+                }
+                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+            </Form>
+        );
+    }
+}
+
+export default DateRangePicker;