rename pause to DND

Author: medyo

src/App.js

@@ -28,8 +28,8 @@ function App() {
     firstSeenDate,
     markOnboardingAsCompleted,
     maxVisibleCards,
-    isPauseModeActive,
-    pauseTo,
+    isDNDModeActive,
+    DNDDurarion,
   } = useUserPreferences()
 
   useLayoutEffect(() => {
@@ -63,7 +63,7 @@ function App() {
   }
 
   useLayoutEffect(() => {
-    let dndLayoutDiv = document.getElementsByClassName('pauseContentWrapper')[0]
+    let dndLayoutDiv = document.getElementsByClassName('DNDContent')[0]
     let observer = new IntersectionObserver(callback, intersectionOptions)
 
     if (dndLayoutDiv) {
@@ -75,7 +75,7 @@ function App() {
     return () => {
       observer.disconnect()
     }
-  }, [pauseTo])
+  }, [DNDDurarion])
 
   return (
     <>
@@ -98,7 +98,7 @@ function App() {
         />
 
         <div className="layoutLayers hideScrollBar">
-          {isPauseModeActive() && <DNDLayout />}
+          {isDNDModeActive() && <DNDLayout />}
           <AppContentLayout setShowSettings={setShowSettings} />
         </div>
         <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />

src/components/Layout/DNDLayout/DNDLayout.css

@@ -10,7 +10,7 @@
   transition: all 0.4s ease-out;
 }
 
-.pauseContentWrapper {
+.DNDContent {
   min-height: 100%;
   display: flex;
   flex-direction: column;

src/components/Layout/DNDLayout/DNDLayout.tsx

@@ -18,7 +18,7 @@ export const DNDLayout = () => {
   }
 
   return (
-    <section className="pauseContentWrapper">
+    <section className="DNDContent">
       <div className="searchWidget">
         <SearchBarWithLogo />
       </div>

src/components/Layout/Header.tsx

@@ -27,7 +27,7 @@ export const Header = ({
 }: HeaderProps) => {
   const [themeIcon, setThemeIcon] = useState(<BsMoon />)
   const isFirstRun = useRef(true)
-  const { theme, setTheme, setPauseTo, isPauseModeActive } = useUserPreferences()
+  const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
   const { userBookmarks } = useBookmarks()
 
   useEffect(() => {
@@ -75,9 +75,7 @@ export const Header = ({
   }
 
   const onUnpauseClicked = () => {
-    setTimeout(() => {
-      setPauseTo(0)
-    }, 200)
+    setDNDDuration(0)
   }
 
   return (
@@ -94,7 +92,7 @@ export const Header = ({
         </span>
         <SearchBar />
         <div className="extras">
-          {isPauseModeActive() && (
+          {isDNDModeActive() && (
             <button className="extraBtn extraTextBtn" onClick={() => onUnpauseClicked()}>
               <MdDoDisturbOff />
               &nbsp;Unpause

src/features/settings/components/DNDSettings.tsx

@@ -21,19 +21,19 @@ type DNDSettingsProps = {
 export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
   const [selectedDNDDuration, setSelectedDNDDuration] = useState<DndOption['value']>()
 
-  const { pauseTo, setPauseTo } = useUserPreferences()
+  const { DNDDurarion, setDNDDuration } = useUserPreferences()
 
   const onApplyClicked = () => {
     if (!selectedDNDDuration) {
       return
     }
 
     if (typeof selectedDNDDuration === 'string') {
-      setPauseTo('always')
+      setDNDDuration('always')
     } else {
       const value = selectedDNDDuration as number
       const futureDate = new Date(new Date().getTime() + value * 60000)
-      setPauseTo(futureDate.getTime())
+      setDNDDuration(futureDate.getTime())
     }
 
     setShowSettings(false)
@@ -55,25 +55,21 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
         <span className="settingHint">(Pause Hackertab for some moment)</span>
       </p>
       <div className="settingContent">
-        <div className="pauseFormWrapper">
-          <div className="form">
-            <div style={{ flex: 1 }}>
-              <Select
-                options={DNDDurations}
-                placeholder="For x minutes"
-                isMulti={false}
-                isClearable={false}
-                isSearchable={false}
-                value={DNDDurations.find((e) => e.value === pauseTo)}
-                classNamePrefix={'hackertab'}
-                onChange={onPeriodSelect}
-              />
-            </div>
-
-            <button className="pauseButton" onClick={onApplyClicked}>
-              Apply
-            </button>
+        <div className="form">
+          <div style={{ flex: 1 }}>
+            <Select
+              options={DNDDurations}
+              placeholder="For x minutes"
+              isMulti={false}
+              isClearable={false}
+              isSearchable={false}
+              value={DNDDurations.find((e) => e.value === DNDDurarion)}
+              classNamePrefix={'hackertab'}
+              onChange={onPeriodSelect}
+            />
           </div>
+
+          <button onClick={onApplyClicked}>Apply</button>
         </div>
       </div>
     </div>

src/stores/preferences.ts

@@ -19,7 +19,7 @@ export type UserPreferencesState = {
   cardsSettings: Record<string, CardSettingsType>
   firstSeenDate: number
   userCustomCards: SupportedCardType[]
-  pauseTo: number | "always"
+  DNDDurarion: number | "always"
 }
 
 type UserPreferencesStoreActions = {
@@ -35,8 +35,8 @@ type UserPreferencesStoreActions = {
   markOnboardingAsCompleted: (occupation: Omit<Occupation, 'icon'> | null) => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
   updateCardOrder: (prevIndex: number, newIndex: number) => void
-  setPauseTo: (value: number | "always") => void
-  isPauseModeActive: () => boolean;
+  setDNDDuration: (value: number | "always") => void
+  isDNDModeActive: () => boolean;
 }
 
 export const useUserPreferences = create(
@@ -59,7 +59,7 @@ export const useUserPreferences = create(
         { id: 3, name: 'producthunt', type: 'supported' },
       ],
       userCustomCards: [],
-      pauseTo: 0,
+      DNDDurarion: 0,
       setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }),
       setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }),
       setTheme: (theme: Theme) => set({ theme: theme }),
@@ -95,13 +95,13 @@ export const useUserPreferences = create(
 
           return { cards: newState }
         }),
-      setPauseTo: (value) => set({ pauseTo: value }),
-      isPauseModeActive: () => {
-        const pauseTo = get().pauseTo
-        if (pauseTo === "always") {
+      setDNDDuration: (value) => set({ DNDDurarion: value }),
+      isDNDModeActive: () => {
+        const duration = get().DNDDurarion
+        if (duration === "always") {
           return true;
         }
-        return Boolean(pauseTo && pauseTo - new Date().getTime() > 0)
+        return Boolean(duration && duration - new Date().getTime() > 0)
       }
     }),
     {