add do not disturbe mode

Author: Chouikane

src/App.js

@@ -1,7 +1,7 @@
 import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import 'src/assets/App.css'
-import { Header } from 'src/components/Layout'
+import { Header, PausedAppContent } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
@@ -19,7 +19,7 @@ function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [showOnboarding, setShowOnboarding] = useState(true)
-  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted } = useUserPreferences()
+  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted, pauseTo } = useUserPreferences()
 
   useLayoutEffect(() => {
     if (!onboardingCompleted && getAppVersion() <= '1.15.9') {
@@ -35,13 +35,18 @@ function App() {
     setupAnalytics()
     setupIdentification()
     trackPageView('home')
+
   }, [])
 
+  const isAppPaused = Boolean(pauseTo && pauseTo - (new Date()).getTime() > 0)
+  console.log("pauseTo: ", isAppPaused);
+
   return (
     <>
       <MarketingBanner />
 
       <div className="App">
+        <PausedAppContent isAppPaused={isAppPaused} />
         {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
           <Suspense fallback={null}>
             <OnboardingModal

src/assets/App.css

@@ -1120,3 +1120,29 @@ Producthunt item
   position: relative;
   vertical-align: middle;
 }
+
+/* PAUSE CONTENT */
+
+.pauseContentWrapper {
+  height: 0;
+  transition: height 0.5s ease-out;
+}
+
+.pauseContentWrapper.active {
+  height: 100vh;
+}
+
+.pauseContentWrapper .options {
+  height: 5%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding-right: 24px;
+}
+
+.pauseContentWrapper .searchContainer {
+  height: 95%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Elements/SearchBar/SearchBar.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect, useRef } from 'react'
-import { trackSearchEngineUse } from 'src/lib/analytics'
 import { GoSearch } from 'react-icons/go'
 import { SUPPORTED_SEARCH_ENGINES } from 'src/config'
+import { trackSearchEngineUse } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SearchEngine } from 'src/types'
 
-export const SearchBar = () => {
+type SearchBarProps = {
+  withLogo?: boolean
+}
+
+export const SearchBar = ({ withLogo }: SearchBarProps) => {
   const { searchEngine } = useUserPreferences()
 
   const keywordsInputRef = useRef<HTMLInputElement | null>(null)

src/components/Layout/PausedAppContent.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import Toggle from 'react-toggle'
+import { SearchBar } from 'src/components/Elements/SearchBar'
+import { useUserPreferences } from 'src/stores/preferences'
+
+type PausedAppContentProps = {
+  isAppPaused: boolean
+}
+
+export const PausedAppContent = ({ isAppPaused }: PausedAppContentProps) => {
+  const { setPauseTo } = useUserPreferences()
+  const [isToggleChecked, setIsToggleChecked] = useState(isAppPaused)
+
+  useEffect(() => {
+    setIsToggleChecked(isAppPaused)
+  }, [isAppPaused])
+
+  const onPauseToggle = () => {
+    setIsToggleChecked(false)
+    setTimeout(() => {
+      setPauseTo(0)
+    }, 550)
+  }
+  const wrapperClassName = `pauseContentWrapper ${isAppPaused ? 'active' : ''}`
+
+  return (
+    <div className={wrapperClassName}>
+      {isAppPaused && (
+        <>
+          <div className="options">
+            <Toggle checked={isToggleChecked} onChange={onPauseToggle} />
+          </div>
+          <div className="searchContainer">
+            <SearchBar withLogo={true} />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/components/Layout/index.ts

@@ -1,4 +1,5 @@
-export * from "./Header"
-export * from "./Footer"
-export * from "./AppContentLayout"
-export * from "./ScrollCardsNavigator"
+export * from './AppContentLayout'
+export * from './Footer'
+export * from './Header'
+export * from './PausedAppContent'
+export * from './ScrollCardsNavigator'

src/features/settings/components/PauseSettings.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import Select from 'react-select'
+import Toggle from 'react-toggle'
+
+type PauseSettingsProps = {
+  onSubmit: (pauseToValue: number) => void
+}
+
+type PauseOptionType = {
+  value: number
+  label: string
+}
+
+const pauseOptions: PauseOptionType[] = [
+  { value: 1, label: 'Minutes' },
+  { value: 60, label: 'Hours' },
+  { value: 1440, label: 'Days' },
+]
+
+export const PauseSettings = ({ onSubmit }: PauseSettingsProps) => {
+  const [isPauseChecked, setIsPauseChecked] = useState(false)
+  const [selectedNumber, setSelectedNumber] = useState('')
+  const [selectedPeriod, setSelectedPeriod] = useState<PauseOptionType>(pauseOptions[0])
+
+  const onPauseAppChange = () => {
+    setIsPauseChecked(!isPauseChecked)
+  }
+  const onSubmitClick = () => {
+    try {
+      let pauseValue = parseInt(selectedNumber) * selectedPeriod.value
+      if (pauseValue <= 0) {
+        throw Error('Invalid value')
+      }
+      const futureDate = new Date(new Date().getTime() + pauseValue * 60000)
+      onSubmit(futureDate.getTime())
+    } catch (err) {
+      console.log('PauseSettings Error:', err)
+    }
+  }
+
+  return (
+    <div className="settingRow">
+      <p className="settingTitle">Pause App</p>
+      <div className="settingContent">
+        <Toggle checked={isPauseChecked} icons={false} onChange={onPauseAppChange} />
+        {isPauseChecked && (
+          <div className="pauseFormWrapper">
+            <div className="pauseForm">
+              <input
+                type="number"
+                value={selectedNumber}
+                onChange={(e) => setSelectedNumber(e.target.value)}
+                // value={rssUrl || ''}
+                // onChange={(e) => setRssUrl(e.target.value)}
+                placeholder="Number"
+              />
+              <Select
+                value={selectedPeriod}
+                options={pauseOptions}
+                isClearable={false}
+                isSearchable={false}
+                classNamePrefix={'hackertab'}
+                onChange={(newValue) => setSelectedPeriod(newValue as PauseOptionType)}
+              />
+            </div>
+            <div className="buttonWrapper">
+              <button className="pauseButton" onClick={onSubmitClick}>
+                Done
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

src/features/settings/components/SettingsModal.tsx

@@ -25,6 +25,7 @@ import {
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SearchEngineType, SelectedCard } from 'src/types'
+import { PauseSettings } from './PauseSettings'
 import { RssSetting } from './RssSetting'
 import './settings.css'
 
@@ -56,6 +57,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     setTags,
     userCustomCards,
     setUserCustomCards,
+    setPauseTo,
   } = useUserPreferences()
   const [selectedCards, setSelectedCards] = useState(cards)
 
@@ -144,6 +146,13 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     identifyUserTheme(newTheme)
   }
 
+  const onPauseSubmit = (pauseToValue: number) => {
+    handleCloseModal()
+    setTimeout(() => {
+      setPauseTo(pauseToValue)
+    }, 250)
+  }
+
   return (
     <ReactModal
       isOpen={showSettings}
@@ -215,6 +224,8 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
 
         <RssSetting setSelectedCards={setSelectedCards} />
 
+        <PauseSettings onSubmit={onPauseSubmit} />
+
         <div className="settingRow">
           <p className="settingTitle">Dark Mode</p>
           <div className="settingContent">

src/features/settings/components/settings.css

@@ -177,24 +177,8 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
-.rss-sources .hackertab__indicators {
-  display: none;
-}
 
-.rss-widget 
-.rssUrlControl {
-  margin: 6px 0;
-  color: var(--primary-text-color);
-}
 
-.rssUrlInput {
-  width: 66%;
-  margin-right: 4px;
-  padding: 4px;
-  background-color: var(--card-background-color) !important;
-  border-color: var(--tag-border-color) !important;
-  color: var(--primary-text-color)
-}
 
 @media (max-width: 768px) {
   .Modal {
@@ -216,3 +200,39 @@ Select styles
     align-items: flex-start;
   }
 }
+
+/* PAUSE SETTING */
+
+
+.pauseFormWrapper {
+  margin: 6px 0 0 6px;
+}
+
+.pauseForm {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 8px;
+}
+
+.pauseForm input[type=number] {
+  margin-right: 24px;
+  flex: 1;
+  background-color: var(--settings-input-background-color);
+  border: 1px solid var(--settings-input-border-color);
+  border-radius: 50px;
+  padding: 6px 18px;
+  color: var(--settings-input-text-color);
+  font-size: 14px;
+}
+
+.buttonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 6px;
+}
+
+.pauseButton {
+
+  background-color: #EE802F;
+  color: white;
+}

src/stores/preferences.ts

@@ -18,6 +18,7 @@ export type UserPreferencesState = {
   cardsSettings: Record<string, CardSettingsType>
   firstSeenDate: number
   userCustomCards: SupportedCardType[]
+  pauseTo: number
 }
 
 type UserPreferencesStoreActions = {
@@ -32,6 +33,7 @@ type UserPreferencesStoreActions = {
   markOnboardingAsCompleted: (occupation: Omit<Occupation, 'icon'> | null) => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
   updateCardOrder: (prevIndex: number, newIndex: number) => void
+  setPauseTo: (value: number) => void
 }
 
 export const useUserPreferences = create(
@@ -53,6 +55,7 @@ export const useUserPreferences = create(
         { id: 3, name: 'producthunt', type: 'supported' },
       ],
       userCustomCards: [],
+      pauseTo: 0,
       setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }),
       setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }),
       setTheme: (theme: Theme) => set({ theme: theme }),
@@ -76,17 +79,18 @@ export const useUserPreferences = create(
           onboardingResult: occupation,
         })),
       setUserCustomCards: (cards: SupportedCardType[]) => set({ userCustomCards: cards }),
-      updateCardOrder: (prevIndex: number, newIndex: number) => set((state) => {
-    
-        const newState = arrayMove(state.cards, prevIndex, newIndex).map((card, index) => {
-          return {
-           ...card,
-           id: index
-          }
-         })
+      updateCardOrder: (prevIndex: number, newIndex: number) =>
+        set((state) => {
+          const newState = arrayMove(state.cards, prevIndex, newIndex).map((card, index) => {
+            return {
+              ...card,
+              id: index,
+            }
+          })
 
-        return { cards: newState}
-      }),
+          return { cards: newState }
+        }),
+      setPauseTo: (value) => set({ pauseTo: value }),
     }),
     {
       name: 'preferences_storage',