Prepare for collection board type, refactoring, update dependencies

client/src/components/DueDateEditStep/DueDateEditStep.jsx

@@ -0,0 +1,147 @@
+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 { useDidUpdate, useToggle } from '../../lib/hooks';
+import { Input, Popup } from '../../lib/custom-ui';
+
+import { useForm } from '../../hooks';
+
+import styles from './DueDateEditStep.module.scss';
+
+const DueDateEditStep = 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 = useCallback(() => {
+    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, t]);
+
+  const handleClearClick = useCallback(() => {
+    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>
+    </>
+  );
+});
+
+DueDateEditStep.propTypes = {
+  defaultValue: PropTypes.instanceOf(Date),
+  onUpdate: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+DueDateEditStep.defaultProps = {
+  defaultValue: undefined,
+  onBack: undefined,
+};
+
+export default DueDateEditStep;

client/src/components/DueDateEditStep/DueDateEditStep.module.scss

@@ -0,0 +1,26 @@
+:global(#app) {
+  .deleteButton {
+    bottom: 12px;
+    box-shadow: 0 1px 0 #cbcccc;
+    position: absolute;
+    right: 9px;
+  }
+
+  .fieldBox {
+    display: inline-block;
+    margin: 0 4px 12px;
+    width: calc(50% - 8px);
+  }
+
+  .fieldWrapper {
+    margin: 0 -4px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 4px;
+    padding-left: 2px;
+  }
+}

client/src/components/DueDateEditStep/index.js

@@ -0,0 +1,3 @@
+import DueDateEditStep from './DueDateEditStep';
+
+export default DueDateEditStep;