Rename deadline to due date, update dependencies

client/src/components/EditDueDateStep/EditDueDateStep.jsx

@@ -0,0 +1,152 @@
+import React, {
+  useCallback, useEffect, useMemo, useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import DatePicker from 'react-datepicker';
+import { Button, Form } from 'semantic-ui-react';
+import { Input, Popup } from '../../lib/custom-ui';
+
+import {
+  useDeepCompareCallback, useDidUpdate, useForm, useToggle,
+} from '../../hooks';
+
+import styles from './EditDueDateStep.module.css';
+
+const EditDueDateStep = React.memo(({
+  defaultValue, onUpdate, onBack, onClose,
+}) => {
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm(() => {
+    const date = defaultValue || new Date().setHours(12, 0, 0, 0);
+
+    return {
+      date: t('format:date', {
+        postProcess: 'formatDate',
+        value: date,
+      }),
+      time: t('format:time', {
+        postProcess: 'formatDate',
+        value: date,
+      }),
+    };
+  });
+
+  const [selectTimeFieldState, selectTimeField] = useToggle();
+
+  const dateField = useRef(null);
+  const timeField = useRef(null);
+
+  const nullableDate = useMemo(() => {
+    const date = t('format:date', {
+      postProcess: 'parseDate',
+      value: data.date,
+    });
+
+    if (Number.isNaN(date.getTime())) {
+      return null;
+    }
+
+    return date;
+  }, [data.date, t]);
+
+  const handleDatePickerChange = useCallback(
+    (date) => {
+      setData((prevData) => ({
+        ...prevData,
+        date: t('format:date', {
+          postProcess: 'formatDate',
+          value: date,
+        }),
+      }));
+      selectTimeField();
+    },
+    [setData, selectTimeField, t],
+  );
+
+  const handleSubmit = useDeepCompareCallback(() => {
+    if (!nullableDate) {
+      dateField.current.select();
+      return;
+    }
+
+    const value = t('format:dateTime', {
+      postProcess: 'parseDate',
+      value: `${data.date} ${data.time}`,
+    });
+
+    if (Number.isNaN(value.getTime())) {
+      timeField.current.select();
+      return;
+    }
+
+    if (!defaultValue || value.getTime() !== defaultValue.getTime()) {
+      onUpdate(value);
+    }
+
+    onClose();
+  }, [defaultValue, onUpdate, onClose, data, nullableDate]);
+
+  const handleClearClick = useDeepCompareCallback(() => {
+    if (defaultValue) {
+      onUpdate(null);
+    }
+
+    onClose();
+  }, [defaultValue, onUpdate, onClose]);
+
+  useEffect(() => {
+    dateField.current.select();
+  }, []);
+
+  useDidUpdate(() => {
+    timeField.current.select();
+  }, [selectTimeFieldState]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editDueDate', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.fieldWrapper}>
+            <div className={styles.fieldBox}>
+              <div className={styles.text}>{t('common.date')}</div>
+              <Input ref={dateField} name="date" value={data.date} onChange={handleFieldChange} />
+            </div>
+            <div className={styles.fieldBox}>
+              <div className={styles.text}>{t('common.time')}</div>
+              <Input ref={timeField} name="time" value={data.time} onChange={handleFieldChange} />
+            </div>
+          </div>
+          <DatePicker inline selected={nullableDate} onChange={handleDatePickerChange} />
+          <Button positive content={t('action.save')} />
+        </Form>
+        <Button
+          negative
+          content={t('action.remove')}
+          className={styles.deleteButton}
+          onClick={handleClearClick}
+        />
+      </Popup.Content>
+    </>
+  );
+});
+
+EditDueDateStep.propTypes = {
+  defaultValue: PropTypes.instanceOf(Date),
+  onUpdate: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditDueDateStep.defaultProps = {
+  defaultValue: undefined,
+  onBack: undefined,
+};
+
+export default EditDueDateStep;