Cleaned up user agent logic and added debouced input

src/Popup/Components/CheckBox.tsx

@@ -1,12 +1,12 @@
 import { Label, Checkbox } from 'theme-ui'
 
-interface SystemPageProps {
+interface CheckBoxProps {
   title: string
   onChange?: () => void
   checked?: boolean
 }
 
-const CheckBox = ({ title, onChange, checked }: SystemPageProps) => {
+const CheckBox = ({ title, onChange, checked }: CheckBoxProps) => {
   return (
     <Label sx={{ mb: '8px' }}>
       <Checkbox onChange={onChange} checked={checked} />

src/Popup/Components/DebouncedInput.tsx

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
 import { Label, Input } from 'theme-ui'
-import detachDebugger from '../../../utils/detachDebugger'
+import detachDebugger from '../../utils/detachDebugger'
 import debounce from 'lodash.debounce'
 
-interface SystemInputProps {
+interface DebouncedInputProps {
   name: string
   title: string
   value: string
@@ -11,13 +11,13 @@ interface SystemInputProps {
   onChange: () => void
 }
 
-const SystemInput = ({
+const DebouncedInput = ({
   name,
   title,
   value,
   setValue,
   onChange,
-}: SystemInputProps) => {
+}: DebouncedInputProps) => {
   const debouncedChangeHandler = useMemo(
     () =>
       debounce((e) => {
@@ -41,4 +41,4 @@ const SystemInput = ({
   )
 }
 
-export default SystemInput
+export default DebouncedInput

src/Popup/Pages/SystemPage/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
 import { Box, Flex, Label, Radio, Select } from 'theme-ui'
-import SystemInput from './SystemInput'
+import DebouncedInput from '../../Components/DebouncedInput'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
@@ -173,28 +173,28 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
           </Select>
         </>
       )}
-      <SystemInput
+      <DebouncedInput
         name="timezone"
         title="Timezone"
         value={timezone}
         setValue={setTimezone}
         onChange={changeInputText}
       />
-      <SystemInput
+      <DebouncedInput
         name="locale"
         title="Locale"
         value={locale}
         setValue={setLocale}
         onChange={changeInputText}
       />
-      <SystemInput
+      <DebouncedInput
         name="lat"
         title="Latitude"
         value={lat}
         setValue={setLatitude}
         onChange={changeInputText}
       />
-      <SystemInput
+      <DebouncedInput
         name="lon"
         title="Longitude"
         value={lon}

src/Popup/Pages/UserAgentPage/UserAgentSelect.tsx

@@ -1,50 +0,0 @@
-import { Dispatch, SetStateAction, ChangeEvent } from 'react'
-import { Label, Select } from 'theme-ui'
-import configurations from '../../../utils/configurations'
-import detachDebugger from '../../../utils/detachDebugger'
-
-interface ConfigurationSelectProps {
-  title: string
-  configuration: string
-  setConfiguration: Dispatch<SetStateAction<string>>
-}
-
-const UserAgentSelect = ({
-  title,
-  configuration,
-  setConfiguration,
-}: ConfigurationSelectProps) => {
-  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
-    detachDebugger()
-    chrome.storage.local.set({
-      configuration: e.target.value,
-    })
-    setConfiguration(e.target.value)
-  }
-
-  return (
-    <>
-      <Label htmlFor="configuration">{title}</Label>
-      <Select
-        name="configuration"
-        id="configuration"
-        value={configuration}
-        onChange={changeConfiguration}
-        mb={'8px'}
-      >
-        <option value="none">None</option>
-        <option value="match">Match IP</option>
-        <option value="custom">Custom</option>
-        <optgroup label="Locations">
-          {Object.keys(configurations).map((key) => (
-            <option value={key} key={key}>
-              {configurations[key].name}
-            </option>
-          ))}
-        </optgroup>
-      </Select>
-    </>
-  )
-}
-
-export default UserAgentSelect

src/Popup/Pages/UserAgentPage/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
+import { Box, Label, Radio, Flex, Select } from 'theme-ui'
+import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
 
@@ -8,16 +9,16 @@ interface UserAgentPageProps {
 }
 
 const UserAgentPage = ({ tab }: UserAgentPageProps) => {
-  const [type, setType] = useState('none')
+  const [userAgentType, setUserAgentType] = useState('none')
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
   const [userAgent, setUserAgent] = useState('')
 
   useEffect(() => {
     chrome.storage.local.get(
-      ['type', 'operatingSystem', 'browser', 'userAgent'],
+      ['userAgentType', 'operatingSystem', 'browser', 'userAgent'],
       (storage) => {
-        storage.type && setType(storage.type)
+        storage.userAgentType && setUserAgentType(storage.userAgentType)
         storage.operatingSystem && setOperatingSystem(storage.operatingSystem)
         storage.browser && setBrowser(storage.browser)
         storage.userAgent && setUserAgent(storage.userAgent)
@@ -25,44 +26,57 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
     )
   }, [])
 
-  useEffect(() => {
-    detachDebugger()
-    chrome.storage.local.set({ userAgent })
-  }, [userAgent])
-
-  useEffect(() => {
-    type === 'preloaded' && setUserAgent(userAgents[operatingSystem][browser])
-  }, [operatingSystem, browser, type])
-
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
-    e.target.value === 'none' && setUserAgent('')
+    setUserAgentType(e.target.value)
-    chrome.storage.local.set({ type: e.target.value })
+    chrome.storage.local.set({ userAgentType: e.target.value })
-    setType(e.target.value)
+
+    if (e.target.value === 'none') {
+      setUserAgent('')
+      chrome.storage.local.set({
+        userAgent: '',
+      })
+    } else if (e.target.value === 'preloaded') {
+      setUserAgent(userAgents[operatingSystem][browser])
+      chrome.storage.local.set({
+        userAgent: userAgents[operatingSystem][browser],
+      })
+    }
   }
 
   const changeOperatingSystem = (e: ChangeEvent<HTMLSelectElement>) => {
-    chrome.storage.local.set({ operatingSystem: e.target.value })
+    detachDebugger()
     setOperatingSystem(e.target.value)
+    setUserAgent(userAgents[e.target.value][browser])
+    chrome.storage.local.set({
+      userAgent: userAgents[e.target.value][browser],
+      operatingSystem: e.target.value,
+    })
   }
 
   const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
-    chrome.storage.local.set({ browser: e.target.value })
+    detachDebugger()
     setBrowser(e.target.value)
+    setUserAgent(userAgents[operatingSystem][e.target.value])
+    chrome.storage.local.set({
+      userAgent: userAgents[operatingSystem][e.target.value],
+      browser: e.target.value,
+    })
   }
 
-  const changeUserAgent = (e: ChangeEvent<HTMLInputElement>) => {
+  const changeUserAgent = () => {
-    detachDebugger()
+    if (userAgentType !== 'custom') {
-    chrome.storage.local.set({ userAgent: e.target.value })
+      setUserAgentType('custom')
-    chrome.storage.local.set({ type: 'custom' })
+      chrome.storage.local.set({
-    setUserAgent(e.target.value)
+        userAgentType: 'custom',
-    setType('custom')
+      })
+    }
   }
 
   return (
     <Box
       sx={{
-        display: tab === 'useragent' ? 'block' : 'none',
+        display: tab === 'userAgent' ? 'block' : 'none',
       }}
     >
       <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
@@ -76,33 +90,33 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
       >
         <Label>
           <Radio
-            name="type"
+            name="userAgentType"
             value="none"
             onChange={changeType}
-            checked={type === 'none'}
+            checked={userAgentType === 'none'}
           />
           None
         </Label>
         <Label>
           <Radio
-            name="type"
+            name="userAgentType"
             value="preloaded"
             onChange={changeType}
-            checked={type === 'preloaded'}
+            checked={userAgentType === 'preloaded'}
           />
           Preloaded
         </Label>
         <Label>
           <Radio
-            name="type"
+            name="userAgentType"
             value="custom"
             onChange={changeType}
-            checked={type === 'custom'}
+            checked={userAgentType === 'custom'}
           />
           Custom
         </Label>
       </Flex>
-      {type === 'preloaded' && (
+      {userAgentType === 'preloaded' && (
         <Flex sx={{ gap: '16px' }}>
           <Box sx={{ width: '100%' }}>
             <Label htmlFor="operatingSystem">Operating System</Label>
@@ -113,7 +127,6 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
               onChange={changeOperatingSystem}
               mb={'8px'}
             >
-              <option sx={{ display: 'none' }}></option>
               {Object.keys(userAgents).map((key) => (
                 <option value={key} key={key}>
                   {key}
@@ -139,8 +152,13 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
           </Box>
         </Flex>
       )}
-      <Label htmlFor="userAgent">User Agent</Label>
+      <DebouncedInput
-      <Input name="userAgent" value={userAgent} onChange={changeUserAgent} />
+        name="userAgent"
+        title="User Agent"
+        value={userAgent}
+        setValue={setUserAgent}
+        onChange={changeUserAgent}
+      />
     </Box>
   )
 }

src/Popup/Popup.tsx

@@ -23,7 +23,7 @@ import '../assets/global.css'
 import OtherOptionsPage from './Pages/OtherOptionsPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('webRtc')
+  const [tab, setTab] = useState('userAgent')
   const [ipData, setIpData] = useState<ipData | undefined>(undefined)
 
   useEffect(() => {
@@ -70,8 +70,8 @@ const Popup = () => {
           />
           <TabItem
             Icon={Globe}
-            active={tab === 'useragent'}
+            active={tab === 'userAgent'}
-            onClick={() => setTab('useragent')}
+            onClick={() => setTab('userAgent')}
           />
           <TabItem
             Icon={Sliders}