diff --git a/package.json b/package.json
index 49ef7a1..fbd8459 100755
--- 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",
diff --git a/src/Popup/Pages/AutofillPage/index.tsx b/src/Popup/Pages/AutofillPage/index.tsx
index 8c94ba6..f1afa6a 100644
--- 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 (
{
display: tab === 'autofill' ? 'block' : 'none',
}}
>
- Autofill Values
+ Autofill Options
)
}
diff --git a/src/Popup/Pages/CurrentPage/index.tsx b/src/Popup/Pages/CurrentPage/index.tsx
index 01e80b8..2f16f0f 100644
--- 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 (
- Current Info
+ Current Info
)
}
-export default AutofillPage
+export default CurrentPage
diff --git a/src/Popup/Pages/SystemPage/ConfigurationSelect.tsx b/src/Popup/Pages/SystemPage/ConfigurationSelect.tsx
deleted file mode 100644
index 0b19ce2..0000000
--- a/src/Popup/Pages/SystemPage/ConfigurationSelect.tsx
+++ /dev/null
@@ -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>
-}
-
-const ConfigurationSelect = ({
- configuration,
- setConfiguration,
-}: ConfigurationSelectProps) => {
- const changeConfiguration = (e: ChangeEvent) => {
- detachDebugger()
- chrome.storage.local.set({
- configuration: e.target.value,
- })
- setConfiguration(e.target.value)
- }
-
- return (
- <>
-
-
-
- )
-}
-
-export default ConfigurationSelect
diff --git a/src/Popup/Pages/SystemPage/IpData.tsx b/src/Popup/Pages/SystemPage/IpData.tsx
deleted file mode 100644
index 3cb34d4..0000000
--- a/src/Popup/Pages/SystemPage/IpData.tsx
+++ /dev/null
@@ -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>
-}
-
-const IpData = ({ ip, setIp }: IPDataProps) => {
- return (
-
-
- {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}
- {/* */}
-
-
- )
-}
-
-export default IpData
diff --git a/src/Popup/Pages/SystemPage/LocationInput.tsx b/src/Popup/Pages/SystemPage/LocationInput.tsx
index b29b701..4315fd6 100644
--- 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>
+ 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) => {
- // detachDebugger()
- // chrome.storage.local.set({ [type]: e.target.value })
+ const changeInputText = (e: ChangeEvent) => {
setValue(e.target.value)
- // chrome.storage.local.set({ configuration: 'custom' })
- // setConfiguration('custom')
+ onChange()
+ debouncedChangeHandler(e)
}
return (
<>
-
+
)
}
diff --git a/src/Popup/Pages/SystemPage/index.tsx b/src/Popup/Pages/SystemPage/index.tsx
index 7c0197e..e555efa 100644
--- 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(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) => {
+ 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) => {
- // detachDebugger()
- // e.target.value === 'none' && setUserAgent('')
- // chrome.storage.local.set({ type: e.target.value })
- setType(e.target.value)
+ const changeConfiguration = (e: ChangeEvent) => {
+ 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
@@ -101,7 +141,7 @@ const SystemPage = ({ tab }: SystemPageProps) => {
name="systemType"
value="matchIp"
onChange={changeType}
- checked={type === 'matchIp'}
+ checked={systemType === 'matchIp'}
/>
Match IP
@@ -110,40 +150,56 @@ const SystemPage = ({ tab }: SystemPageProps) => {
name="systemType"
value="custom"
onChange={changeType}
- checked={type === 'custom'}
+ checked={systemType === 'custom'}
/>
Custom
- {type === 'custom' && (
-
+ {systemType === 'custom' && (
+ <>
+
+
+
)}
)
diff --git a/src/Popup/Pages/UserAgentPage/index.tsx b/src/Popup/Pages/UserAgentPage/index.tsx
index bcbdf8a..7f8a1fd 100644
--- a/src/Popup/Pages/UserAgentPage/index.tsx
+++ b/src/Popup/Pages/UserAgentPage/index.tsx
@@ -101,37 +101,41 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
{type === 'preloaded' && (
- <>
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
)}
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index 536562e..9c7b214 100644
--- 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(undefined)
+
+ useEffect(() => {
+ Promise.resolve(getIp()).then((data) => {
+ setIpData(data)
+ })
+ }, [])
return (
@@ -74,7 +83,7 @@ const Popup = () => {
-
+
diff --git a/src/theme.ts b/src/theme.ts
index a0e58d6..1790fee 100644
--- 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: {
diff --git a/yarn.lock b/yarn.lock
index 996df06..3801550 100644
--- 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"