use Select for focus mode predefined options

Author: Chouikane

src/features/settings/components/PauseSettings.tsx

@@ -1,7 +1,5 @@
 import { useState } from 'react'
-import Select from 'react-select'
-import Toggle from 'react-toggle'
-import { ChipsSet } from 'src/components/Elements'
+import Select, { SingleValue } from 'react-select'
 
 type PauseSettingsProps = {
   onSubmit: (pauseToValue: number) => void
@@ -12,108 +10,103 @@ type PauseOptionType = {
   label: string
 }
 
-const pauseOptions: PauseOptionType[] = [
+const customPauseOptions: PauseOptionType[] = [
   { value: 1, label: 'Minutes' },
   { value: 60, label: 'Hours' },
-  { value: 1440, label: 'Days' },
+]
+
+const PREDEFINED_OPTIONS: PauseOptionType[] = [
+  { value: 15, label: '15 Minutes' },
+  { value: 30, label: '30 Minutes' },
+  { value: 60, label: '1 Hour' },
+  { value: -1, label: 'Custom...' },
 ]
 
 export const PauseSettings = ({ onSubmit }: PauseSettingsProps) => {
-  const [isPauseChecked, setIsPauseChecked] = useState(false)
   const [pauseValue, setPauseValue] = useState(0)
   const [isCustomInput, setIsCustomInput] = useState(false)
   const [selectedNumber, setSelectedNumber] = useState('')
-  const [selectedPeriod, setSelectedPeriod] = useState<PauseOptionType>(pauseOptions[0])
+  const [selectedPeriod, setSelectedPeriod] = useState<PauseOptionType>(customPauseOptions[0])
+  const [error, setError] = useState<string | null>(null)
 
-  const onPauseAppChange = () => {
-    setIsPauseChecked(!isPauseChecked)
-  }
   const onSubmitClick = () => {
+    setError(null)
     try {
       let value = pauseValue
       if (isCustomInput) {
         value = parseInt(selectedNumber) * selectedPeriod.value
       }
-      if (value <= 0) {
-        throw Error('Invalid value')
+      if (isNaN(value) || value <= 0) {
+        setError('Please select a valid value')
+      } else {
+        const futureDate = new Date(new Date().getTime() + value * 60000)
+
+        onSubmit(futureDate.getTime())
       }
-      const futureDate = new Date(new Date().getTime() + pauseValue * 60000)
-      onSubmit(futureDate.getTime())
     } catch (err) {
       console.log('PauseSettings Error:', err)
+      setError('An error occurred, please try agian')
     }
   }
 
-  const onChipsChange = (selectedChip) => {
-    let value = parseInt(selectedChip.value)
-    if (value === -1) {
+  const onSearchEngineSelectChange = (selectedOption: SingleValue<PauseOptionType>) => {
+    setError(null)
+    if (!selectedOption) {
+      return
+    }
+    if (selectedOption.value === -1) {
       setPauseValue(0)
       return setIsCustomInput(true)
     }
     setIsCustomInput(false)
-    setPauseValue(value)
+    setPauseValue(selectedOption.value)
   }
+
   return (
     <div className="settingRow">
-      <p className="settingTitle">Pause App</p>
+      <p className="settingTitle">Focus Mode</p>
       <div className="settingContent">
-        <Toggle checked={isPauseChecked} icons={false} onChange={onPauseAppChange} />
-
-        {isPauseChecked && (
-          <div className="pauseFormWrapper">
-            <div className="pauseChips">
-              <ChipsSet
-                className={'noMargin alternative-color'}
-                canSelectMultiple={false}
-                options={[
-                  {
-                    label: '30 Minutes',
-                    value: '30',
-                  },
-                  {
-                    label: '1 Hour',
-                    value: '60',
-                  },
-                  {
-                    label: '1 Day',
-                    value: '1440',
-                  },
-                  {
-                    label: 'Custom',
-                    value: '-1',
-                  },
-                ]}
-                defaultValues={['60']}
-                onChange={(_, selectedChips) => {
-                  onChipsChange(selectedChips[0])
-                }}
+        <div className="pauseFormWrapper">
+          <div className="pauseChips">
+            <Select
+              options={PREDEFINED_OPTIONS}
+              placeholder="Select a period..."
+              isMulti={false}
+              isClearable={false}
+              isSearchable={false}
+              classNamePrefix={'hackertab'}
+              onChange={onSearchEngineSelectChange}
+            />
+          </div>
+          {isCustomInput && (
+            <div className="pauseForm">
+              <input
+                type="number"
+                value={selectedNumber}
+                onChange={(e) => setSelectedNumber(e.target.value)}
+                placeholder="Number"
+              />
+              <Select
+                value={selectedPeriod}
+                options={customPauseOptions}
+                isClearable={false}
+                isSearchable={false}
+                classNamePrefix={'hackertab'}
+                onChange={(newValue) => setSelectedPeriod(newValue as PauseOptionType)}
               />
             </div>
-            {isCustomInput && (
-              <div className="pauseForm">
-                <input
-                  type="number"
-                  value={selectedNumber}
-                  onChange={(e) => setSelectedNumber(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>
+          )}
+          {error && (
+            <div className="settingHint">
+              <p>{error}</p>
             </div>
+          )}
+          <div className="buttonWrapper">
+            <button className="pauseButton" onClick={onSubmitClick}>
+              Done
+            </button>
           </div>
-        )}
+        </div>
       </div>
     </div>
   )