display the timeout label

Author: medyo

src/features/settings/components/DNDSettings.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import Select, { SingleValue } from 'react-select'
 import { trackDNDEnable } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
+import { diffBetweenTwoDatesInMinutes } from 'src/utils/DateUtils'
 
 type DndOption = {
   value: number | 'always'
@@ -30,10 +31,11 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
     }
 
     if (typeof selectedDNDDuration === 'string') {
-      setDNDDuration('always')
+      setDNDDuration(selectedDNDDuration)
     } else {
       const value = selectedDNDDuration as number
-      const futureDate = new Date(new Date().getTime() + value * 60000)
+      const futureDate = new Date()
+      futureDate.setMinutes(futureDate.getMinutes() + value)
       setDNDDuration({
         value: selectedDNDDuration,
         countdown: futureDate.getTime(),
@@ -64,6 +66,22 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
     }
   }
 
+  const timeoutLabel = (): string | undefined => {
+    if (typeof DNDDuration === 'object') {
+      const DNDDurationObject = DNDDuration as {
+        value: number
+        countdown: number
+      }
+      const futureDate = new Date(DNDDurationObject.countdown)
+      const now = new Date()
+      return `DND will become inactive in ${diffBetweenTwoDatesInMinutes(
+        futureDate.getTime(),
+        now.getTime()
+      )} Minutes`
+    }
+
+    return undefined
+  }
   return (
     <div className="settingRow">
       <p className="settingTitle">
@@ -88,6 +106,11 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
 
           <button onClick={onApplyClicked}>Apply</button>
         </div>
+        {timeoutLabel() && (
+          <div className="settingHint">
+            <p>{timeoutLabel()}</p>
+          </div>
+        )}
       </div>
     </div>
   )

src/utils/DateUtils.ts

@@ -1,3 +1,7 @@
 export const diffBetweenTwoDatesInDays = (oldestDate: number, newestDate: number) => {
   return Math.floor((newestDate - oldestDate) / (1000 * 60 * 60 * 24));
+} 
+
+export const diffBetweenTwoDatesInMinutes = (oldestDate: number, newestDate: number) => {
+  return Math.floor((oldestDate - newestDate) / (1000 * 60 ));
 }