Rename deadline to due date, update dependencies

client/src/components/Card/ActionsPopup.jsx

@@ -8,7 +8,7 @@ import { Popup } from '../../lib/custom-ui';
 import { useSteps } from '../../hooks';
 import ProjectMembershipsStep from '../ProjectMembershipsStep';
 import LabelsStep from '../LabelsStep';
-import EditDeadlineStep from '../EditDeadlineStep';
+import EditDueDateStep from '../EditDueDateStep';
 import EditTimerStep from '../EditTimerStep';
 import DeleteStep from '../DeleteStep';
 
@@ -17,7 +17,7 @@ import styles from './ActionsPopup.module.css';
 const StepTypes = {
   USERS: 'USERS',
   LABELS: 'LABELS',
-  EDIT_DEADLINE: 'EDIT_DEADLINE',
+  EDIT_DUE_DATE: 'EDIT_DUE_DATE',
   EDIT_TIMER: 'EDIT_TIMER',
   DELETE: 'DELETE',
 };
@@ -57,8 +57,8 @@ const ActionsStep = React.memo(
       openStep(StepTypes.LABELS);
     }, [openStep]);
 
-    const handleEditDeadlineClick = useCallback(() => {
-      openStep(StepTypes.EDIT_DEADLINE);
+    const handleEditDueDateClick = useCallback(() => {
+      openStep(StepTypes.EDIT_DUE_DATE);
     }, [openStep]);
 
     const handleEditTimerClick = useCallback(() => {
@@ -69,10 +69,10 @@ const ActionsStep = React.memo(
       openStep(StepTypes.DELETE);
     }, [openStep]);
 
-    const handleDeadlineUpdate = useCallback(
-      (deadline) => {
+    const handleDueDateUpdate = useCallback(
+      (dueDate) => {
         onUpdate({
-          deadline,
+          dueDate,
         });
       },
       [onUpdate],
@@ -112,11 +112,11 @@ const ActionsStep = React.memo(
               onBack={handleBack}
             />
           );
-        case StepTypes.EDIT_DEADLINE:
+        case StepTypes.EDIT_DUE_DATE:
           return (
-            <EditDeadlineStep
-              defaultValue={card.deadline}
-              onUpdate={handleDeadlineUpdate}
+            <EditDueDateStep
+              defaultValue={card.dueDate}
+              onUpdate={handleDueDateUpdate}
               onBack={handleBack}
               onClose={onClose}
             />
@@ -170,8 +170,8 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
-            <Menu.Item className={styles.menuItem} onClick={handleEditDeadlineClick}>
-              {t('action.editDeadline', {
+            <Menu.Item className={styles.menuItem} onClick={handleEditDueDateClick}>
+              {t('action.editDueDate', {
                 context: 'title',
               })}
             </Menu.Item>

client/src/components/Card/Card.jsx

@@ -11,7 +11,7 @@ import EditName from './EditName';
 import ActionsPopup from './ActionsPopup';
 import User from '../User';
 import Label from '../Label';
-import Deadline from '../Deadline';
+import DueDate from '../DueDate';
 import Timer from '../Timer';
 
 import styles from './Card.module.css';
@@ -21,7 +21,7 @@ const Card = React.memo(
     id,
     index,
     name,
-    deadline,
+    dueDate,
     timer,
     isPersisted,
     notificationsTotal,
@@ -74,7 +74,7 @@ const Card = React.memo(
         )}
         <div className={styles.name}>{name}</div>
         {tasks.length > 0 && <Tasks items={tasks} />}
-        {(deadline || timer) && (
+        {(dueDate || timer) && (
           <span className={styles.attachments}>
             {notificationsTotal > 0 && (
               <span
@@ -87,9 +87,9 @@ const Card = React.memo(
                 {notificationsTotal}
               </span>
             )}
-            {deadline && (
+            {dueDate && (
               <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                <Deadline value={deadline} size="tiny" />
+                <DueDate value={dueDate} size="tiny" />
               </span>
             )}
             {timer && (
@@ -131,7 +131,7 @@ const Card = React.memo(
                       card={{
                         id,
                         name,
-                        deadline,
+                        dueDate,
                         timer,
                         isPersisted,
                       }}
@@ -171,7 +171,7 @@ Card.propTypes = {
   id: PropTypes.number.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
-  deadline: PropTypes.instanceOf(Date),
+  dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isPersisted: PropTypes.bool.isRequired,
   notificationsTotal: PropTypes.number.isRequired,
@@ -194,7 +194,7 @@ Card.propTypes = {
 };
 
 Card.defaultProps = {
-  deadline: undefined,
+  dueDate: undefined,
   timer: undefined,
 };
 

client/src/components/CardModal/CardModal.jsx

@@ -13,11 +13,11 @@ import Tasks from './Tasks';
 import Actions from './Actions';
 import User from '../User';
 import Label from '../Label';
-import Deadline from '../Deadline';
+import DueDate from '../DueDate';
 import Timer from '../Timer';
 import ProjectMembershipsPopup from '../ProjectMembershipsPopup';
 import LabelsPopup from '../LabelsPopup';
-import EditDeadlinePopup from '../EditDeadlinePopup';
+import EditDueDatePopup from '../EditDueDatePopup';
 import EditTimerPopup from '../EditTimerPopup';
 import DeletePopup from '../DeletePopup';
 
@@ -27,7 +27,7 @@ const CardModal = React.memo(
   ({
     name,
     description,
-    deadline,
+    dueDate,
     timer,
     isSubscribed,
     isActionsFetching,
@@ -77,10 +77,10 @@ const CardModal = React.memo(
       [onUpdate],
     );
 
-    const handleDeadlineUpdate = useCallback(
-      (newDeadline) => {
+    const handleDueDateUpdate = useCallback(
+      (newDueDate) => {
         onUpdate({
-          deadline: newDeadline,
+          dueDate: newDueDate,
         });
       },
       [onUpdate],
@@ -125,7 +125,7 @@ const CardModal = React.memo(
           </Grid.Row>
           <Grid.Row className={styles.modalPadding}>
             <Grid.Column width={12} className={styles.contentPadding}>
-              {(users.length > 0 || labels.length > 0 || deadline || timer) && (
+              {(users.length > 0 || labels.length > 0 || dueDate || timer) && (
                 <div className={styles.moduleWrapper}>
                   {users.length > 0 && (
                     <div className={styles.attachments}>
@@ -154,7 +154,7 @@ const CardModal = React.memo(
                       >
                         <button
                           type="button"
-                          className={classNames(styles.attachment, styles.deadline)}
+                          className={classNames(styles.attachment, styles.dueDate)}
                         >
                           <Icon name="add" size="small" className={styles.addAttachment} />
                         </button>
@@ -195,24 +195,24 @@ const CardModal = React.memo(
                       >
                         <button
                           type="button"
-                          className={classNames(styles.attachment, styles.deadline)}
+                          className={classNames(styles.attachment, styles.dueDate)}
                         >
                           <Icon name="add" size="small" className={styles.addAttachment} />
                         </button>
                       </LabelsPopup>
                     </div>
                   )}
-                  {deadline && (
+                  {dueDate && (
                     <div className={styles.attachments}>
                       <div className={styles.text}>
-                        {t('common.deadline', {
+                        {t('common.dueDate', {
                           context: 'title',
                         })}
                       </div>
                       <span className={styles.attachment}>
-                        <EditDeadlinePopup defaultValue={deadline} onUpdate={handleDeadlineUpdate}>
-                          <Deadline value={deadline} />
-                        </EditDeadlinePopup>
+                        <EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
+                          <DueDate value={dueDate} />
+                        </EditDueDatePopup>
                       </span>
                     </div>
                   )}
@@ -302,12 +302,12 @@ const CardModal = React.memo(
                     {t('common.labels')}
                   </Button>
                 </LabelsPopup>
-                <EditDeadlinePopup defaultValue={deadline} onUpdate={handleDeadlineUpdate}>
+                <EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="calendar check outline" className={styles.actionIcon} />
-                    {t('common.deadline')}
+                    {t('common.dueDate')}
                   </Button>
-                </EditDeadlinePopup>
+                </EditDueDatePopup>
                 <EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
                   <Button fluid className={styles.actionButton}>
                     <Icon name="clock outline" className={styles.actionIcon} />
@@ -346,7 +346,7 @@ const CardModal = React.memo(
 CardModal.propTypes = {
   name: PropTypes.string.isRequired,
   description: PropTypes.string,
-  deadline: PropTypes.instanceOf(Date),
+  dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isSubscribed: PropTypes.bool.isRequired,
   isActionsFetching: PropTypes.bool.isRequired,
@@ -381,7 +381,7 @@ CardModal.propTypes = {
 
 CardModal.defaultProps = {
   description: undefined,
-  deadline: undefined,
+  dueDate: undefined,
   timer: undefined,
 };
 

client/src/components/CardModal/CardModal.module.css

@@ -64,7 +64,7 @@
   padding: 8px 8px 0 16px !important;
 }
 
-.deadline {
+.dueDate {
   background: #dce0e4;
   border: none;
   border-radius: 3px;
@@ -78,7 +78,7 @@
   vertical-align: top;
 }
 
-.deadline:hover {
+.dueDate:hover {
   background: #d2d8dc;
   color: #17394d;
 }

client/src/components/Deadline/index.js

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

client/src/components/DueDate/DueDate.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import styles from './Deadline.module.css';
+import styles from './DueDate.module.css';
 
 const SIZES = {
   TINY: 'tiny',
@@ -35,7 +35,7 @@ const FORMATS = {
   medium: 'longDateTime',
 };
 
-const Deadline = React.memo(({
+const DueDate = React.memo(({
   value, size, isDisabled, onClick,
 }) => {
   const [t] = useTranslation();
@@ -62,17 +62,17 @@ const Deadline = React.memo(({
   );
 });
 
-Deadline.propTypes = {
+DueDate.propTypes = {
   value: PropTypes.instanceOf(Date).isRequired,
   size: PropTypes.oneOf(Object.values(SIZES)),
   isDisabled: PropTypes.bool,
   onClick: PropTypes.func,
 };
 
-Deadline.defaultProps = {
+DueDate.defaultProps = {
   size: SIZES.MEDIUM,
   isDisabled: false,
   onClick: undefined,
 };
 
-export default Deadline;
+export default DueDate;

client/src/components/DueDate/index.js

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

client/src/components/EditDeadlinePopup.jsx

@@ -1,5 +0,0 @@
-import { withPopup } from '../lib/popup';
-
-import EditDeadlineStep from './EditDeadlineStep';
-
-export default withPopup(EditDeadlineStep);

client/src/components/EditDeadlineStep/index.js

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

client/src/components/EditDueDatePopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import EditDueDateStep from './EditDueDateStep';
+
+export default withPopup(EditDueDateStep);

client/src/components/EditDueDateStep/EditDueDateStep.jsx

@@ -11,9 +11,9 @@ import {
   useDeepCompareCallback, useDidUpdate, useForm, useToggle,
 } from '../../hooks';
 
-import styles from './EditDeadlineStep.module.css';
+import styles from './EditDueDateStep.module.css';
 
-const EditDeadlineStep = React.memo(({
+const EditDueDateStep = React.memo(({
   defaultValue, onUpdate, onBack, onClose,
 }) => {
   const [t] = useTranslation();
@@ -107,7 +107,7 @@ const EditDeadlineStep = React.memo(({
   return (
     <>
       <Popup.Header onBack={onBack}>
-        {t('common.editDeadline', {
+        {t('common.editDueDate', {
           context: 'title',
         })}
       </Popup.Header>
@@ -137,16 +137,16 @@ const EditDeadlineStep = React.memo(({
   );
 });
 
-EditDeadlineStep.propTypes = {
+EditDueDateStep.propTypes = {
   defaultValue: PropTypes.instanceOf(Date),
   onUpdate: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-EditDeadlineStep.defaultProps = {
+EditDueDateStep.defaultProps = {
   defaultValue: undefined,
   onBack: undefined,
 };
 
-export default EditDeadlineStep;
+export default EditDueDateStep;

client/src/components/EditDueDateStep/index.js

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