Fixed issues with system data inputs

package.json

@@ -16,8 +16,10 @@
     "@emotion/react": "^11.9.3",
     "@hot-loader/react-dom": "^17.0.2",
     "@mdx-js/react": "^2.1.2",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/webpack-env": "^1.18.0",
     "@types/webrtc": "^0.0.33",
+    "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.10",

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,26 +1,24 @@
-import { useState, useEffect } from 'react'
+// import { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
 
-import getIP from '../../../utils/getIp'
-
 interface SystemPageProps {
   tab: string
 }
 
 const AutofillPage = ({ tab }: SystemPageProps) => {
-  const [ip, setIP] = useState(null)
+  // const [ip, setIP] = useState(null)
-  const [configuration, setConfiguration] = useState('default')
+  // const [configuration, setConfiguration] = useState('default')
 
-  useEffect(() => {
+  // useEffect(() => {
-    chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
+  //   chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
-      storage.configuration && setConfiguration(storage.configuration)
+  //     storage.configuration && setConfiguration(storage.configuration)
-      if (storage.ipData) {
+  //     if (storage.ipData) {
-        setIP(storage.ipData)
+  //       setIP(storage.ipData)
-      } else {
+  //     } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+  //       Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
+  //     }
-    })
+  //   })
-  }, [])
+  // }, [])
 
   return (
     <Box
@@ -28,7 +26,7 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
         display: tab === 'autofill' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Autofill Values</Box>
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Autofill Options</Box>
     </Box>
   )
 }

src/Popup/Pages/CurrentPage/index.tsx

@@ -1,36 +1,19 @@
-import { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
 
-import getIP from '../../../utils/getIp'
+interface CurrentPageProps {
-
-interface SystemPageProps {
   tab: string
 }
 
-const AutofillPage = ({ tab }: SystemPageProps) => {
+const CurrentPage = ({ tab }: CurrentPageProps) => {
-  const [ip, setIP] = useState(null)
-  const [configuration, setConfiguration] = useState('default')
-
-  useEffect(() => {
-    chrome.storage.local.get(['configuration', 'ipData'], (storage) => {
-      storage.configuration && setConfiguration(storage.configuration)
-      if (storage.ipData) {
-        setIP(storage.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
-  }, [])
-
   return (
     <Box
       sx={{
         display: tab === 'current' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Current Info</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>Current Info</Box>
     </Box>
   )
 }
 
-export default AutofillPage
+export default CurrentPage

src/Popup/Pages/SystemPage/ConfigurationSelect.tsx

@@ -1,44 +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 {
-  configuration: string
-  setConfiguration: Dispatch<SetStateAction<string>>
-}
-
-const ConfigurationSelect = ({
-  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">Configuration</Label>
-      <Select
-        name="configuration"
-        id="configuration"
-        value={configuration}
-        onChange={changeConfiguration}
-        mb={'8px'}
-      >
-        <option value="custom">Custom</option>
-        {Object.keys(configurations).map((key) => (
-          <option value={key} key={key}>
-            {configurations[key].name}
-          </option>
-        ))}
-      </Select>
-    </>
-  )
-}
-
-export default ConfigurationSelect

src/Popup/Pages/SystemPage/IpData.tsx

@@ -1,49 +0,0 @@
-import { Dispatch, SetStateAction } from 'react'
-import { Flex, Button, Text } from 'theme-ui'
-import detachDebugger from '../../../utils/detachDebugger'
-import getIp from '../../../utils/getIp'
-import { ipData } from '../../../types'
-
-const getFlagEmoji = (countryCode: string) => {
-  const codePoints = countryCode
-    .toUpperCase()
-    .split('')
-    .map((char) => 127397 + char.charCodeAt(0))
-  return String.fromCodePoint(...codePoints)
-}
-
-interface IPDataProps {
-  ip: any
-  setIp: Dispatch<SetStateAction<ipData | undefined>>
-}
-
-const IpData = ({ ip, setIp }: IPDataProps) => {
-  return (
-    <Flex sx={{}}>
-      <Flex
-        sx={{
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: 'grey',
-          borderRadius: '4px',
-          pl: '8px',
-          width: '100%',
-        }}
-      >
-        <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
-        {/* <Button
-          onClick={() => {
-            Promise.resolve(getIp()).then((ipData) => setIp(ipData))
-            detachDebugger()
-          }}
-        >
-          Reload
-        </Button> */}
-      </Flex>
-    </Flex>
-  )
-}
-
-export default IpData

src/Popup/Pages/SystemPage/LocationInput.tsx

@@ -1,65 +1,42 @@
-import {
+import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
-  useState,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-  ChangeEvent,
-} from 'react'
-import configurations from '../../../utils/configurations'
-import countryLocales from '../../../utils/countryLocales'
-import detachDebugger from '../../../utils/detachDebugger'
 import { Label, Input } from 'theme-ui'
+import detachDebugger from '../../../utils/detachDebugger'
+import debounce from 'lodash.debounce'
 
 interface LocationInputProps {
   name: string
   title: string
-  // ip: any
   value: string
   setValue: Dispatch<SetStateAction<string>>
+  onChange: () => void
 }
 
 const LocationInput = ({
   name,
   title,
-  // ip,
   value,
   setValue,
+  onChange,
 }: LocationInputProps) => {
-  // const [value, setValue] = useState('')
+  const debouncedChangeHandler = useMemo(
+    () =>
+      debounce((e) => {
+        detachDebugger()
+        chrome.storage.local.set({ [name]: e.target.value })
+      }, 300),
+    [name]
+  )
 
-  // useEffect(() => {
+  const changeInputText = (e: ChangeEvent<HTMLInputElement>) => {
-  //   if (configuration === 'none') {
-  //     setValue('')
-  //     chrome.storage.local.set({ [type]: '' })
-  //   } else if (configuration === 'match') {
-  //     if (ip) {
-  //       const ipTypeValue =
-  //         type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
-  //       setValue(ipTypeValue)
-  //       chrome.storage.local.set({ [type]: ipTypeValue })
-  //     }
-  //   } else if (configuration === 'custom') {
-  //     chrome.storage.local.get([type], (storage) => {
-  //       storage[type] && setValue(storage[type])
-  //     })
-  //   } else if (configuration !== 'default') {
-  //     setValue(configurations[configuration][type])
-  //     chrome.storage.local.set({ [type]: configurations[configuration][type] })
-  //   }
-  // }, [name, value])
-
-  const changeTextValue = (e: ChangeEvent<HTMLInputElement>) => {
-    // detachDebugger()
-    // chrome.storage.local.set({ [type]: e.target.value })
     setValue(e.target.value)
-    // chrome.storage.local.set({ configuration: 'custom' })
+    onChange()
-    // setConfiguration('custom')
+    debouncedChangeHandler(e)
   }
 
   return (
     <>
       <Label htmlFor={name}>{title}</Label>
-      <Input name={name} value={value} onChange={changeTextValue} />
+      <Input name={name} value={value} onChange={changeInputText} />
     </>
   )
 }

src/Popup/Pages/SystemPage/index.tsx

@@ -1,9 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Flex, Label, Radio } from 'theme-ui'
+import { Box, Flex, Label, Radio, Select } from 'theme-ui'
 import LocationInput from './LocationInput'
-import ConfigurationSelect from './ConfigurationSelect'
-import IpData from './IpData'
-import getIp from '../../../utils/getIp'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
@@ -11,23 +8,42 @@ import configurations from '../../../utils/configurations'
 
 interface SystemPageProps {
   tab: string
+  ipData?: ipData
 }
 
-const SystemPage = ({ tab }: SystemPageProps) => {
+const SystemPage = ({ tab, ipData }: SystemPageProps) => {
-  const [type, setType] = useState('default')
+  const [systemType, setSystemType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
-  const [latitude, setLatitude] = useState('')
+  const [lat, setLatitude] = useState('')
-  const [longitude, setLongitude] = useState('')
+  const [lon, setLongitude] = useState('')
-  const [ip, setIp] = useState<ipData | undefined>(undefined)
   const [configuration, setConfiguration] = useState('custom')
 
   useEffect(() => {
-    Promise.resolve(getIp()).then((ipData) => setIp(ipData))
+    chrome.storage.local.get(
+      ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
+      (storage) => {
+        if (storage.systemType === 'custom') {
+          console.log(storage.configuration)
+          storage.configuration && setConfiguration(storage.configuration)
+          storage.timezone && setTimezone(storage.timezone)
+          storage.locale && setLocale(storage.locale)
+          storage.lat && setLatitude(storage.lat)
+          storage.lon && setLongitude(storage.lon)
+        }
+        storage.systemType
+          ? setSystemType(storage.systemType)
+          : setSystemType('default')
+      }
+    )
   }, [])
 
-  useEffect(() => {
+  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
-    if (type === 'default') {
+    detachDebugger()
+    setSystemType(e.target.value)
+    chrome.storage.local.set({ systemType: e.target.value })
+
+    if (e.target.value === 'default') {
       setTimezone('')
       setLocale('')
       setLatitude('')
@@ -35,23 +51,23 @@ const SystemPage = ({ tab }: SystemPageProps) => {
       chrome.storage.local.set({
         timezone: '',
         locale: '',
-        latitude: '',
+        lat: '',
-        longitude: '',
+        lon: '',
       })
-    } else if (type === 'matchIp') {
+    } else if (e.target.value === 'matchIp') {
-      if (ip) {
+      if (ipData) {
-        setTimezone(ip.timezone)
+        setTimezone(ipData.timezone)
-        setLocale(countryLocales[ip.countryCode].locale)
+        setLocale(countryLocales[ipData.countryCode].locale)
-        setLatitude(`${ip.lat}`)
+        setLatitude(`${ipData.lat}`)
-        setLongitude(`${ip.lon}`)
+        setLongitude(`${ipData.lon}`)
         chrome.storage.local.set({
-          timezone: ip.timezone,
+          timezone: ipData.timezone,
-          locale: countryLocales[ip.countryCode].locale,
+          locale: countryLocales[ipData.countryCode].locale,
-          latitude: ip.lat,
+          lat: ipData.lat,
-          longitude: ip.lon,
+          lon: ipData.lon,
         })
       }
-    } else if (type === 'custom') {
+    } else if (e.target.value === 'custom')
       if (configuration !== 'custom') {
         setTimezone(configurations[configuration].timezone)
         setLocale(configurations[configuration].locale)
@@ -60,18 +76,42 @@ const SystemPage = ({ tab }: SystemPageProps) => {
         chrome.storage.local.set({
           timezone: configurations[configuration].timezone,
           locale: configurations[configuration].locale,
-          latitude: configurations[configuration].lat,
+          lat: configurations[configuration].lat,
-          longitude: configurations[configuration].lon,
+          lon: configurations[configuration].lon,
         })
       }
-    }
+  }
-  }, [configuration, ip, type])
 
-  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
+  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
-    // detachDebugger()
+    detachDebugger()
-    // e.target.value === 'none' && setUserAgent('')
+    setConfiguration(e.target.value)
-    // chrome.storage.local.set({ type: e.target.value })
+    chrome.storage.local.set({
-    setType(e.target.value)
+      configuration: e.target.value,
+    })
+    if (e.target.value !== 'custom') {
+      setTimezone(configurations[e.target.value].timezone)
+      setLocale(configurations[e.target.value].locale)
+      setLatitude(configurations[e.target.value].lat)
+      setLongitude(configurations[e.target.value].lon)
+      chrome.storage.local.set({
+        timezone: configurations[e.target.value].timezone,
+        locale: configurations[e.target.value].locale,
+        lat: configurations[e.target.value].lat,
+        lon: configurations[e.target.value].lon,
+      })
+    }
+  }
+
+  const changeInputText = () => {
+    if (systemType !== 'custom' || configuration !== 'custom') {
+      console.log(2)
+      setConfiguration('custom')
+      setSystemType('custom')
+      chrome.storage.local.set({
+        configuration: 'custom',
+        systemType: 'custom',
+      })
+    }
   }
 
   return (
@@ -92,7 +132,7 @@ const SystemPage = ({ tab }: SystemPageProps) => {
             name="systemType"
             value="default"
             onChange={changeType}
-            checked={type === 'default'}
+            checked={systemType === 'default'}
           />
           Default
         </Label>
@@ -101,7 +141,7 @@ const SystemPage = ({ tab }: SystemPageProps) => {
             name="systemType"
             value="matchIp"
             onChange={changeType}
-            checked={type === 'matchIp'}
+            checked={systemType === 'matchIp'}
           />
           Match IP
         </Label>
@@ -110,40 +150,56 @@ const SystemPage = ({ tab }: SystemPageProps) => {
             name="systemType"
             value="custom"
             onChange={changeType}
-            checked={type === 'custom'}
+            checked={systemType === 'custom'}
           />
           Custom
         </Label>
       </Flex>
-      {type === 'custom' && (
+      {systemType === 'custom' && (
-        <ConfigurationSelect
+        <>
-          configuration={configuration}
+          <Label htmlFor="configuration">Configuration</Label>
-          setConfiguration={setConfiguration}
+          <Select
-        />
+            name="configuration"
+            value={configuration}
+            onChange={changeConfiguration}
+            mb={'8px'}
+          >
+            <option value="custom">Custom</option>
+            {Object.keys(configurations).map((key) => (
+              <option value={key} key={key}>
+                {configurations[key].name}
+              </option>
+            ))}
+          </Select>
+        </>
       )}
       <LocationInput
         name="timezone"
         title="Timezone"
         value={timezone}
         setValue={setTimezone}
+        onChange={changeInputText}
       />
       <LocationInput
         name="locale"
         title="Locale"
         value={locale}
         setValue={setLocale}
+        onChange={changeInputText}
       />
       <LocationInput
         name="lat"
         title="Latitude"
-        value={latitude}
+        value={lat}
         setValue={setLatitude}
+        onChange={changeInputText}
       />
       <LocationInput
         name="lon"
         title="Longitude"
-        value={longitude}
+        value={lon}
         setValue={setLongitude}
+        onChange={changeInputText}
       />
     </Box>
   )

src/Popup/Pages/UserAgentPage/index.tsx

@@ -101,37 +101,41 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         </Label>
       </Flex>
       {type === 'preloaded' && (
-        <>
+        <Flex sx={{ gap: '16px' }}>
-          <Label htmlFor="operatingSystem">Operating System</Label>
+          <Box sx={{ width: '100%' }}>
-          <Select
+            <Label htmlFor="operatingSystem">Operating System</Label>
-            name="operatingSystem"
+            <Select
-            id="operatingSystem"
+              name="operatingSystem"
-            value={operatingSystem}
+              id="operatingSystem"
-            onChange={changeOperatingSystem}
+              value={operatingSystem}
-            mb={'8px'}
+              onChange={changeOperatingSystem}
-          >
+              mb={'8px'}
-            <option sx={{ display: 'none' }}></option>
+            >
-            {Object.keys(userAgents).map((key) => (
+              <option sx={{ display: 'none' }}></option>
-              <option value={key} key={key}>
+              {Object.keys(userAgents).map((key) => (
-                {key}
+                <option value={key} key={key}>
-              </option>
+                  {key}
-            ))}
+                </option>
-          </Select>
+              ))}
-          <Label htmlFor="browser">Browser</Label>
+            </Select>
-          <Select
+          </Box>
-            name="browser"
+          <Box sx={{ width: '100%' }}>
-            id="browser"
+            <Label htmlFor="browser">Browser</Label>
-            value={browser}
+            <Select
-            onChange={changeBrowser}
+              name="browser"
-            mb={'8px'}
+              id="browser"
-          >
+              value={browser}
-            {Object.keys(userAgents[operatingSystem]).map((key) => (
+              onChange={changeBrowser}
-              <option value={key} key={key}>
+              mb={'8px'}
-                {key}
+            >
-              </option>
+              {Object.keys(userAgents[operatingSystem]).map((key) => (
-            ))}
+                <option value={key} key={key}>
-          </Select>
+                  {key}
-        </>
+                </option>
+              ))}
+            </Select>
+          </Box>
+        </Flex>
       )}
       <Label htmlFor="userAgent">User Agent</Label>
       <Input name="userAgent" value={userAgent} onChange={changeUserAgent} />

src/Popup/Popup.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
+import { useState, useEffect } from 'react'
-import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
+import { ThemeProvider, Flex, Box } from 'theme-ui'
 import { theme } from '../theme'
 import {
   MapPin,
@@ -17,9 +17,18 @@ import SettingsPage from './Pages/SettingsPage'
 import AutofillPage from './Pages/AutofillPage'
 import WebRtcPage from './Pages/WebRtcPage'
 import CurrentPage from './Pages/CurrentPage'
+import { ipData } from '../types'
+import getIp from '../utils/getIp'
 
 const Popup = () => {
-  const [tab, setTab] = useState('system')
+  const [tab, setTab] = useState('current')
+  const [ipData, setIpData] = useState<ipData | undefined>(undefined)
+
+  useEffect(() => {
+    Promise.resolve(getIp()).then((data) => {
+      setIpData(data)
+    })
+  }, [])
 
   return (
     <ThemeProvider theme={theme}>
@@ -74,7 +83,7 @@ const Popup = () => {
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <CurrentPage tab={tab} />
-          <SystemPage tab={tab} />
+          <SystemPage tab={tab} ipData={ipData} />
           <AutofillPage tab={tab} />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />

src/theme.ts

@@ -35,6 +35,7 @@ export const theme: Theme = {
       },
     },
     select: {
+      cursor: 'pointer',
       p: '2px 8px',
       borderColor: 'grey',
       '&:focus': {
@@ -42,6 +43,9 @@ export const theme: Theme = {
         outline: 'none',
       },
     },
+    radio: {
+      cursor: 'pointer',
+    },
   },
   buttons: {
     primary: {

yarn.lock

@@ -1526,6 +1526,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.debounce@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
+  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.186"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
+  integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
+
 "@types/mdx@^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.2.tgz#64be19baddba4323ae7893e077e98759316fe279"
@@ -4455,7 +4467,7 @@ locate-path@^5.0.0:
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
 lodash.merge@^4.6.2:
   version "4.6.2"