fix displaying the current selected DND value

Author: medyo

public/startup.js

@@ -5,8 +5,8 @@ function isDNDModeActive(DNDDuration) {
   console.log(DNDDuration)
   if (DNDDuration === 'always') {
     return true
-  } else if (typeof DNDDuration === 'number') {
-    return Boolean(DNDDuration && DNDDuration - new Date().getTime() > 0)
+  } else if (typeof DNDDuration === 'object') {
+    return Boolean(DNDDuration.value && DNDDuration.countdown - new Date().getTime() > 0)
   } else {
     return false
   }

src/components/Layout/Header.tsx

@@ -76,7 +76,7 @@ export const Header = ({
 
   const onUnpauseClicked = () => {
     trackDNDDisable()
-    setDNDDuration(0)
+    setDNDDuration('never')
   }
 
   return (

src/features/settings/components/DNDSettings.tsx

@@ -12,7 +12,7 @@ const DNDDurations: DndOption[] = [
   { value: 15, label: 'For 15 minutes' },
   { value: 30, label: 'For 30 minutes' },
   { value: 60, label: 'For 1 hour' },
-  { value: 'always', label: 'Until you turn off' },
+  { value: 'always', label: 'Until you turn it off' },
 ]
 
 type DNDSettingsProps = {
@@ -34,7 +34,10 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
     } else {
       const value = selectedDNDDuration as number
       const futureDate = new Date(new Date().getTime() + value * 60000)
-      setDNDDuration(futureDate.getTime())
+      setDNDDuration({
+        value: selectedDNDDuration,
+        countdown: futureDate.getTime(),
+      })
     }
 
     trackDNDEnable(selectedDNDDuration)
@@ -49,6 +52,18 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
     setSelectedDNDDuration(selectedOption.value)
   }
 
+  const getDefaultValue = (): DndOption | undefined => {
+    if (typeof DNDDuration === 'string') {
+      return DNDDurations.find((e) => e.value === DNDDuration)
+    } else if (typeof DNDDuration === 'object') {
+      const DNDDurationObject = DNDDuration as {
+        value: number
+        countdown: number
+      }
+      return DNDDurations.find((e) => e.value === DNDDurationObject.value)
+    }
+  }
+
   return (
     <div className="settingRow">
       <p className="settingTitle">
@@ -65,7 +80,7 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
               isMulti={false}
               isClearable={false}
               isSearchable={false}
-              value={DNDDurations.find((e) => e.value === DNDDuration)}
+              defaultValue={getDefaultValue()}
               classNamePrefix={'hackertab'}
               onChange={onPeriodSelect}
             />

src/stores/preferences.ts

@@ -4,7 +4,8 @@ import { Tag } from 'src/features/remoteConfig'
 import { enhanceTags } from 'src/utils/DataEnhancement'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { CardSettingsType, ListingMode, SelectedCard, SupportedCardType, Theme } from '../types'
+import { CardSettingsType, DNDDuration, ListingMode, SelectedCard, SupportedCardType, Theme } from '../types'
+
 
 export type UserPreferencesState = {
   userSelectedTags: Tag[]
@@ -19,7 +20,7 @@ export type UserPreferencesState = {
   cardsSettings: Record<string, CardSettingsType>
   firstSeenDate: number
   userCustomCards: SupportedCardType[]
-  DNDDuration: number | "always"
+  DNDDuration: DNDDuration
 }
 
 type UserPreferencesStoreActions = {
@@ -35,7 +36,7 @@ type UserPreferencesStoreActions = {
   markOnboardingAsCompleted: (occupation: Omit<Occupation, 'icon'> | null) => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
   updateCardOrder: (prevIndex: number, newIndex: number) => void
-  setDNDDuration: (value: number | "always") => void
+  setDNDDuration: (value: DNDDuration) => void
   isDNDModeActive: () => boolean;
 }
 
@@ -59,7 +60,7 @@ export const useUserPreferences = create(
         { id: 3, name: 'producthunt', type: 'supported' },
       ],
       userCustomCards: [],
-      DNDDuration: 0,
+      DNDDuration: "never",
       setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }),
       setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }),
       setTheme: (theme: Theme) => set({ theme: theme }),
@@ -95,13 +96,21 @@ export const useUserPreferences = create(
 
           return { cards: newState }
         }),
-      setDNDDuration: (value) => set({ DNDDuration: value }),
+      setDNDDuration: (value: DNDDuration) => set({ DNDDuration: value }),
       isDNDModeActive: () => {
         const duration = get().DNDDuration
         if (duration === "always") {
           return true;
+        } else if (typeof duration === "object") {
+          const dndValue = duration as {
+            value: number
+            countdown: number
+          }
+          return Boolean(dndValue.value && dndValue.countdown - new Date().getTime() > 0)
+        } else {
+          return false;
         }
-        return Boolean(duration && duration - new Date().getTime() > 0)
+        
       }
     }),
     {

src/types/index.ts

@@ -108,3 +108,8 @@ export type Option = {
   value: string
   icon?: React.ReactNode
 }
+
+export type DNDDuration = {
+  value: number
+  countdown: number
+} | "always" | "never"