Updated react-datepicker to latest version

.travis.yml

@@ -16,6 +16,7 @@ node_js:
 jobs:
   fast_finish: true
   allow_failures:
+    - name: 'Lint'
     - name: 'Mutation tests'
   include:
 

package-lock.json

@@ -4751,13 +4751,13 @@
       }
     },
     "@types/react-datepicker": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-1.8.0.tgz",
-      "integrity": "sha512-QyHMOFCOFIkcyDCXUGnL7OyM+Gj2aG95d3t18wgrLTxQJseVQXeQFTVnUeXmmF2cZxeWtGTfRl1uYPTr3/rAFg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-3.1.1.tgz",
+      "integrity": "sha512-vwNrgaIMJThvvwmtnA8jSVVJZ0FNgljQrq1jDA4MtYJIDmVmd9NNrFaXf9u2JqR2nS+8Kvi8OVs/tnAbUqZhHw==",
       "dev": true,
       "requires": {
         "@types/react": "*",
-        "moment": ">=2.14.0",
+        "date-fns": "^2.0.1",
         "popper.js": "^1.14.1"
       }
     },
@@ -10288,6 +10288,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
     "date-format": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz",
@@ -22843,25 +22848,15 @@
       }
     },
     "react-datepicker": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.5.0.tgz",
-      "integrity": "sha512-Neh1rz0d1QeR7KuoTiYeR6oj73DJkqt0vuNSgfMuxXEwGmz/4sPynouYGo6gdKiQbxIXBJJ/FLDLHJEr5XNThw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.3.0.tgz",
+      "integrity": "sha512-QnIlBxDSWEGBi2X5P1BqWzvfnPFRKhtrsgAcujUVwyWeID/VatFaAOEjEjfD1bXR9FuSYVLlLR3j/vbG19hWOA==",
       "requires": {
-        "classnames": "^2.2.5",
-        "prop-types": "^15.6.0",
-        "react-onclickoutside": "^6.7.1",
-        "react-popper": "^0.9.1"
-      },
-      "dependencies": {
-        "react-popper": {
-          "version": "0.9.5",
-          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.9.5.tgz",
-          "integrity": "sha1-AqJO8+7DOvnlToNYq3DrDjMe3QU=",
-          "requires": {
-            "popper.js": "^1.14.1",
-            "prop-types": "^15.6.1"
-          }
-        }
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.9.0",
+        "react-popper": "^1.3.4"
       }
     },
     "react-dev-utils": {

package.json

@@ -45,7 +45,7 @@
     "react-chartjs-2": "^2.11.1",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-datepicker": "~1.5.0",
+    "react-datepicker": "^3.3.0",
     "react-dom": "^17.0.1",
     "react-external-link": "^1.1.1",
     "react-leaflet": "^3.0.2",
@@ -81,7 +81,7 @@
     "@types/react-autosuggest": "^10.0.1",
     "@types/react-color": "^3.0.4",
     "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-datepicker": "~1.8.0",
+    "@types/react-datepicker": "^3.1.1",
     "@types/react-dom": "^16.9.9",
     "@types/react-leaflet": "^2.5.2",
     "@types/react-redux": "^7.1.11",

src/short-urls/helpers/EditMetaModal.tsx

@@ -17,10 +17,10 @@ interface EditMetaModalConnectProps extends ShortUrlModalProps {
   editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable<ShortUrlMeta>) => Promise<void>;
 }
 
-const dateOrUndefined = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
+const dateOrNull = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
   const date = shortUrl?.meta?.[dateName];
 
-  return date ? moment(date) : undefined;
+  return date ? moment(date) : null;
 };
 
 const EditMetaModal = (
@@ -28,8 +28,8 @@ const EditMetaModal = (
 ) => {
   const { saving, error } = shortUrlMeta;
   const url = shortUrl && (shortUrl.shortUrl || '');
-  const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));
-  const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil'));
+  const [ validSince, setValidSince ] = useState(dateOrNull(shortUrl, 'validSince'));
+  const [ validUntil, setValidUntil ] = useState(dateOrNull(shortUrl, 'validUntil'));
   const [ maxVisits, setMaxVisits ] = useState(shortUrl?.meta?.maxVisits);
 
   const close = pipe(resetShortUrlMeta, toggle);
@@ -56,7 +56,7 @@ const EditMetaModal = (
               selected={validSince}
               maxDate={validUntil}
               isClearable
-              onChange={setValidSince as any}
+              onChange={setValidSince}
             />
           </FormGroup>
           <FormGroup>

src/utils/DateInput.tsx

@@ -1,26 +1,45 @@
-import { Component, RefObject, createRef } from 'react';
-import { isNil } from 'ramda';
+import { useRef } from 'react';
+import { isNil, dissoc } from 'ramda';
 import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import classNames from 'classnames';
+import moment from 'moment';
 import './DateInput.scss';
 
-export interface DateInputProps extends ReactDatePickerProps {
-  ref?: RefObject<Component<ReactDatePickerProps> & { input: HTMLInputElement }>;
+interface DatePropsInterface {
+  endDate?: moment.Moment | null;
+  maxDate?: moment.Moment | null;
+  minDate?: moment.Moment | null;
+  selected?: moment.Moment | null;
+  startDate?: moment.Moment | null;
+  onChange?: (date: moment.Moment | null) => void;
 }
 
+export type DateInputProps = DatePropsInterface & Omit<ReactDatePickerProps, keyof DatePropsInterface>;
+
+const transformProps = (props: DateInputProps): ReactDatePickerProps => ({
+  ...dissoc('ref', props),
+  endDate: props.endDate?.toDate(),
+  maxDate: props.maxDate?.toDate(),
+  minDate: props.minDate?.toDate(),
+  selected: props.selected?.toDate(),
+  startDate: props.startDate?.toDate(),
+  onChange: (date: Date | null) => props.onChange?.(date && moment(date)),
+});
+
 const DateInput = (props: DateInputProps) => {
-  const { className, isClearable, selected, ref = createRef() } = props;
+  const { className, isClearable, selected } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
+  const ref = useRef<{ input: HTMLInputElement }>();
 
   return (
     <div className="date-input-container">
       <DatePicker
-        {...props}
+        {...transformProps(props)}
+        dateFormat="yyyy-MM-dd"
         className={classNames('date-input-container__input form-control', className)}
-        dateFormat="YYYY-MM-DD"
-        readOnly
+        // @ts-expect-error
         ref={ref}
       />
       {showCalendarIcon && (