More components migrated to TS

src/utils/DateInput.tsx

@@ -1,21 +1,16 @@
-import React from 'react';
+import React, { Component, RefObject } from 'react';
 import { isNil } from 'ramda';
-import DatePicker from 'react-datepicker';
+import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './DateInput.scss';
 
-const propTypes = {
-  className: PropTypes.string,
-  isClearable: PropTypes.bool,
-  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
-  ref: PropTypes.object,
-  disabled: PropTypes.bool,
-};
+export interface DateInputProps extends ReactDatePickerProps {
+  ref?: RefObject<Component<ReactDatePickerProps> & { input: HTMLInputElement }>;
+}
 
-const DateInput = (props) => {
+const DateInput = (props: DateInputProps) => {
   const { className, isClearable, selected, ref = React.createRef() } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
 
@@ -32,13 +27,11 @@ const DateInput = (props) => {
         <FontAwesomeIcon
           icon={calendarIcon}
           className="date-input-container__icon"
-          onClick={() => ref.current.input.focus()}
+          onClick={() => ref.current?.input.focus()}
         />
       )}
     </div>
   );
 };
 
-DateInput.propTypes = propTypes;
-
 export default DateInput;

src/utils/helpers/date.ts

@@ -1,11 +1,12 @@
 import * as moment from 'moment';
+import { OptionalString } from '../utils';
 
 type MomentOrString = moment.Moment | string;
 type NullableDate = MomentOrString | null;
 
-const isMomentObject = (date: moment.Moment | string): date is moment.Moment => typeof (date as moment.Moment).format === 'function';
+const isMomentObject = (date: MomentOrString): date is moment.Moment => typeof (date as moment.Moment).format === 'function';
 
-const formatDateFromFormat = (date?: NullableDate, format?: string): NullableDate | undefined =>
+const formatDateFromFormat = (date?: NullableDate, format?: string): OptionalString =>
   !date || !isMomentObject(date) ? date : date.format(format);
 
 export const formatDate = (format = 'YYYY-MM-DD') => (date?: NullableDate) => formatDateFromFormat(date, format);

src/utils/utils.ts

@@ -25,3 +25,7 @@ export const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !i
 export type Nullable<T> = {
   [P in keyof T]: T[P] | null
 };
+
+type Optional<T> = T | null | undefined;
+
+export type OptionalString = Optional<string>;