From f0a8b1fb6c553bd0b13e21ae018020194128383d Mon Sep 17 00:00:00 2001 From: z0ccc Date: Thu, 6 Oct 2022 01:49:18 -0400 Subject: [PATCH] Fixed issues with system data inputs --- package.json | 2 + src/Popup/Pages/AutofillPage/index.tsx | 30 ++-- src/Popup/Pages/CurrentPage/index.tsx | 25 +-- .../Pages/SystemPage/ConfigurationSelect.tsx | 44 ------ src/Popup/Pages/SystemPage/IpData.tsx | 49 ------ src/Popup/Pages/SystemPage/LocationInput.tsx | 57 +++---- src/Popup/Pages/SystemPage/index.tsx | 144 ++++++++++++------ src/Popup/Pages/UserAgentPage/index.tsx | 66 ++++---- src/Popup/Popup.tsx | 17 ++- src/theme.ts | 4 + yarn.lock | 14 +- 11 files changed, 202 insertions(+), 250 deletions(-) delete mode 100644 src/Popup/Pages/SystemPage/ConfigurationSelect.tsx delete mode 100644 src/Popup/Pages/SystemPage/IpData.tsx 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"