Fixed issues with system data inputs

2022-10-06 01:49:18 -04:00 · 2022-10-06 01:49:18 -04:00 · f0a8b1fb6c
commit f0a8b1fb6c
parent 1077e8d4b1
11 changed files with 202 additions and 250 deletions
--- a/package.json
+++ b/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",
--- a/src/Popup/Pages/AutofillPage/index.tsx
+++ b/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 [configuration, setConfiguration] = useState('default')
+  // 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))
-      }
-    })
-  }, [])
+  // 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
@ -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>
  )
 }
--- a/src/Popup/Pages/CurrentPage/index.tsx
+++ b/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 SystemPageProps {
+interface CurrentPageProps {
  tab: string
 }

-const AutofillPage = ({ tab }: SystemPageProps) => {
-  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))
-      }
-    })
-  }, [])
-
+const CurrentPage = ({ tab }: CurrentPageProps) => {
  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
--- a/src/Popup/Pages/SystemPage/ConfigurationSelect.tsx
+++ b/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
--- a/src/Popup/Pages/SystemPage/IpData.tsx
+++ b/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
--- a/src/Popup/Pages/SystemPage/LocationInput.tsx
+++ b/src/Popup/Pages/SystemPage/LocationInput.tsx
@ -1,65 +1,42 @@
-import {
-  useState,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-  ChangeEvent,
-} from 'react'
-import configurations from '../../../utils/configurations'
-import countryLocales from '../../../utils/countryLocales'
-import detachDebugger from '../../../utils/detachDebugger'
+import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
 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(() => {
-  //   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 })
+  const changeInputText = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
-    // chrome.storage.local.set({ configuration: 'custom' })
-    // setConfiguration('custom')
+    onChange()
+    debouncedChangeHandler(e)
  }

  return (
    <>
      <Label htmlFor={name}>{title}</Label>
-      <Input name={name} value={value} onChange={changeTextValue} />
+      <Input name={name} value={value} onChange={changeInputText} />
    </>
  )
 }
--- a/src/Popup/Pages/SystemPage/index.tsx
+++ b/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 [type, setType] = useState('default')
+const SystemPage = ({ tab, ipData }: SystemPageProps) => {
+  const [systemType, setSystemType] = useState('')
  const [timezone, setTimezone] = useState('')
  const [locale, setLocale] = useState('')
-  const [latitude, setLatitude] = useState('')
-  const [longitude, setLongitude] = useState('')
-  const [ip, setIp] = useState<ipData | undefined>(undefined)
+  const [lat, setLatitude] = useState('')
+  const [lon, setLongitude] = useState('')
  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(() => {
-    if (type === 'default') {
+  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
+    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: '',
-        longitude: '',
+        lat: '',
+        lon: '',
      })
-    } else if (type === 'matchIp') {
-      if (ip) {
-        setTimezone(ip.timezone)
-        setLocale(countryLocales[ip.countryCode].locale)
-        setLatitude(`${ip.lat}`)
-        setLongitude(`${ip.lon}`)
+    } else if (e.target.value === 'matchIp') {
+      if (ipData) {
+        setTimezone(ipData.timezone)
+        setLocale(countryLocales[ipData.countryCode].locale)
+        setLatitude(`${ipData.lat}`)
+        setLongitude(`${ipData.lon}`)
        chrome.storage.local.set({
-          timezone: ip.timezone,
-          locale: countryLocales[ip.countryCode].locale,
-          latitude: ip.lat,
-          longitude: ip.lon,
+          timezone: ipData.timezone,
+          locale: countryLocales[ipData.countryCode].locale,
+          lat: ipData.lat,
+          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,
-          longitude: configurations[configuration].lon,
+          lat: configurations[configuration].lat,
+          lon: configurations[configuration].lon,
        })
      }
-    }
-  }, [configuration, ip, type])
+  }

-  const changeType = (e: ChangeEvent<HTMLInputElement>) => {
-    // detachDebugger()
-    // e.target.value === 'none' && setUserAgent('')
-    // chrome.storage.local.set({ type: e.target.value })
-    setType(e.target.value)
+  const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
+    detachDebugger()
+    setConfiguration(e.target.value)
+    chrome.storage.local.set({
+      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' && (
-        <ConfigurationSelect
-          configuration={configuration}
-          setConfiguration={setConfiguration}
-        />
+      {systemType === 'custom' && (
+        <>
+          <Label htmlFor="configuration">Configuration</Label>
+          <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>
  )
--- a/src/Popup/Pages/UserAgentPage/index.tsx
+++ b/src/Popup/Pages/UserAgentPage/index.tsx
@ -101,37 +101,41 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
        </Label>
      </Flex>
      {type === 'preloaded' && (
-        <>
-          <Label htmlFor="operatingSystem">Operating System</Label>
-          <Select
-            name="operatingSystem"
-            id="operatingSystem"
-            value={operatingSystem}
-            onChange={changeOperatingSystem}
-            mb={'8px'}
-          >
-            <option sx={{ display: 'none' }}></option>
-            {Object.keys(userAgents).map((key) => (
-              <option value={key} key={key}>
-                {key}
-              </option>
-            ))}
-          </Select>
-          <Label htmlFor="browser">Browser</Label>
-          <Select
-            name="browser"
-            id="browser"
-            value={browser}
-            onChange={changeBrowser}
-            mb={'8px'}
-          >
-            {Object.keys(userAgents[operatingSystem]).map((key) => (
-              <option value={key} key={key}>
-                {key}
-              </option>
-            ))}
-          </Select>
-        </>
+        <Flex sx={{ gap: '16px' }}>
+          <Box sx={{ width: '100%' }}>
+            <Label htmlFor="operatingSystem">Operating System</Label>
+            <Select
+              name="operatingSystem"
+              id="operatingSystem"
+              value={operatingSystem}
+              onChange={changeOperatingSystem}
+              mb={'8px'}
+            >
+              <option sx={{ display: 'none' }}></option>
+              {Object.keys(userAgents).map((key) => (
+                <option value={key} key={key}>
+                  {key}
+                </option>
+              ))}
+            </Select>
+          </Box>
+          <Box sx={{ width: '100%' }}>
+            <Label htmlFor="browser">Browser</Label>
+            <Select
+              name="browser"
+              id="browser"
+              value={browser}
+              onChange={changeBrowser}
+              mb={'8px'}
+            >
+              {Object.keys(userAgents[operatingSystem]).map((key) => (
+                <option value={key} key={key}>
+                  {key}
+                </option>
+              ))}
+            </Select>
+          </Box>
+        </Flex>
      )}
      <Label htmlFor="userAgent">User Agent</Label>
      <Input name="userAgent" value={userAgent} onChange={changeUserAgent} />
--- a/src/Popup/Popup.tsx
+++ b/src/Popup/Popup.tsx
@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
+import { useState, useEffect } from 'react'
+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} />
--- a/src/theme.ts
+++ b/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: {
--- a/yarn.lock
+++ b/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"