feat: Restore toggleable due dates (#1332)

client/src/components/cards/DueDateChip/DueDateChip.jsx

@@ -24,6 +24,7 @@ const Sizes = {
 const Statuses = {
   DUE_SOON: 'dueSoon',
   OVERDUE: 'overdue',
+  COMPLETED: 'completed',
 };
 
 const LONG_DATE_FORMAT_BY_SIZE = {
@@ -47,9 +48,17 @@ const STATUS_ICON_PROPS_BY_STATUS = {
     name: 'hourglass end',
     color: 'red',
   },
+  [Statuses.COMPLETED]: {
+    name: 'checkmark',
+    color: 'green',
+  },
 };
 
-const getStatus = (date) => {
+const getStatus = (date, isCompleted) => {
+  if (isCompleted) {
+    return Statuses.COMPLETED;
+  }
+
   const secondsLeft = Math.floor((date.getTime() - new Date().getTime()) / 1000);
 
   if (secondsLeft <= 0) {
@@ -64,12 +73,12 @@ const getStatus = (date) => {
 };
 
 const DueDateChip = React.memo(
-  ({ value, size, isDisabled, withStatus, withStatusIcon, onClick }) => {
+  ({ value, size, isCompleted, isDisabled, withStatus, withStatusIcon, onClick }) => {
     const [t] = useTranslation();
     const forceUpdate = useForceUpdate();
 
     const statusRef = useRef(null);
-    statusRef.current = withStatus ? getStatus(value) : null;
+    statusRef.current = withStatus ? getStatus(value, isCompleted) : null;
 
     const intervalRef = useRef(null);
 
@@ -80,9 +89,13 @@ const DueDateChip = React.memo(
     );
 
     useEffect(() => {
-      if (withStatus && statusRef.current !== Statuses.OVERDUE) {
+      if (
+        withStatus &&
+        statusRef.current !== Statuses.OVERDUE &&
+        statusRef.current !== Statuses.COMPLETED
+      ) {
         intervalRef.current = setInterval(() => {
-          const status = getStatus(value);
+          const status = getStatus(value, isCompleted);
 
           if (status !== statusRef.current) {
             forceUpdate();
@@ -99,7 +112,7 @@ const DueDateChip = React.memo(
           clearInterval(intervalRef.current);
         }
       };
-    }, [value, withStatus, forceUpdate]);
+    }, [value, isCompleted, withStatus, forceUpdate]);
 
     const contentNode = (
       <span
@@ -134,6 +147,7 @@ const DueDateChip = React.memo(
 DueDateChip.propTypes = {
   value: PropTypes.instanceOf(Date).isRequired,
   size: PropTypes.oneOf(Object.values(Sizes)),
+  isCompleted: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool,
   withStatus: PropTypes.bool.isRequired,
   withStatusIcon: PropTypes.bool,

client/src/components/cards/DueDateChip/DueDateChip.module.scss

@@ -62,4 +62,9 @@
     background: #db2828;
     color: #fff;
   }
+
+  .wrapperCompleted {
+    background: #21ba45;
+    color: #fff;
+  }
 }