From 1f9d9a84e8963cc76cc6f11e1134303c4d4cea02 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Wed, 12 Oct 2022 22:58:37 -0400 Subject: [PATCH] Update system data when ip changes --- src/Popup/Pages/AutofillPage/index.tsx | 28 +++++++++++++++++-------- src/Popup/Pages/CurrentPage/index.tsx | 24 ++++++++++----------- src/Popup/Pages/SystemPage/index.tsx | 16 ++++++++++++-- src/Popup/Pages/UserAgentPage/index.tsx | 3 +++ src/Popup/Popup.tsx | 17 ++++++++++++--- src/theme.ts | 2 ++ src/utils/getIp.ts | 1 + src/utils/getReverseGeocoding.ts | 12 +++++++++++ 8 files changed, 77 insertions(+), 26 deletions(-) create mode 100644 src/utils/getReverseGeocoding.ts diff --git a/src/Popup/Pages/AutofillPage/index.tsx b/src/Popup/Pages/AutofillPage/index.tsx index 5ecca33..d3f1b41 100644 --- a/src/Popup/Pages/AutofillPage/index.tsx +++ b/src/Popup/Pages/AutofillPage/index.tsx @@ -1,4 +1,4 @@ -// import { useState, useEffect } from 'react' +import { useState, useEffect } from 'react' // import { Box } from 'theme-ui' import Page from '../../Components/Page' import CheckBox from '../../Components/CheckBox' @@ -7,10 +7,11 @@ import { Box, Label, Select } from 'theme-ui' interface SystemPageProps { tab: string + reverseGeocoding: any } -const AutofillPage = ({ tab }: SystemPageProps) => { - // const [ip, setIP] = useState(null) +const AutofillPage = ({ tab, reverseGeocoding }: SystemPageProps) => { + const [city, setCity] = useState('') // const [configuration, setConfiguration] = useState('default') // useEffect(() => { @@ -24,6 +25,15 @@ const AutofillPage = ({ tab }: SystemPageProps) => { // }) // }, []) + const changeUserAgent = () => { + // if (userAgentType !== 'custom') { + // setUserAgentType('custom') + // chrome.storage.local.set({ + // userAgentType: 'custom', + // }) + // } + } + return ( @@ -43,13 +53,13 @@ const AutofillPage = ({ tab }: SystemPageProps) => { ))} */} - {/* */} + /> ) } diff --git a/src/Popup/Pages/CurrentPage/index.tsx b/src/Popup/Pages/CurrentPage/index.tsx index 76253a0..4f08575 100644 --- a/src/Popup/Pages/CurrentPage/index.tsx +++ b/src/Popup/Pages/CurrentPage/index.tsx @@ -6,26 +6,26 @@ interface CurrentPageProps { } const CurrentPage = ({ tab }: CurrentPageProps) => { - let options: any + // let options: any - function success(pos: any) { - var crd = pos.coords - console.log('Your current position is:') - console.log(`Latitude : ${crd.latitude}`) - console.log(`Longitude: ${crd.longitude}`) - console.log(`More or less ${crd.accuracy} meters.`) - } + // function success(pos: any) { + // var crd = pos.coords + // console.log('Your current position is:') + // console.log(`Latitude : ${crd.latitude}`) + // console.log(`Longitude: ${crd.longitude}`) + // console.log(`More or less ${crd.accuracy} meters.`) + // } - function error(err: any) { - console.error(`ERROR(${err.code}): ${err.message}`) - } + // function error(err: any) { + // console.error(`ERROR(${err.code}): ${err.message}`) + // } // options = { // enableHighAccuracy: false, // timeout: 5000, // maximumAge: 0, // } - navigator.geolocation.watchPosition(success, error) + // navigator.geolocation.watchPosition(success, error) return ( diff --git a/src/Popup/Pages/SystemPage/index.tsx b/src/Popup/Pages/SystemPage/index.tsx index 43dbcf8..03a41fd 100644 --- a/src/Popup/Pages/SystemPage/index.tsx +++ b/src/Popup/Pages/SystemPage/index.tsx @@ -25,7 +25,19 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => { chrome.storage.local.get( ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'], (storage) => { - if (storage.systemType !== 'default') { + console.log(ipData) + if (storage.systemType === 'matchIp' && ipData) { + setTimezone(ipData.timezone) + setLocale(countryLocales[ipData.countryCode].locale) + setLatitude(`${ipData.lat}`) + setLongitude(`${ipData.lon}`) + chrome.storage.local.set({ + timezone: ipData.timezone, + locale: countryLocales[ipData.countryCode].locale, + lat: ipData.lat, + lon: ipData.lon, + }) + } else if (storage.systemType === 'custom') { storage.configuration && setConfiguration(storage.configuration) storage.timezone && setTimezone(storage.timezone) storage.locale && setLocale(storage.locale) @@ -37,7 +49,7 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => { : setSystemType('default') } ) - }, []) + }, [ipData]) const changeType = (e: ChangeEvent) => { detachDebugger() diff --git a/src/Popup/Pages/UserAgentPage/index.tsx b/src/Popup/Pages/UserAgentPage/index.tsx index 384a7a3..9a39391 100644 --- a/src/Popup/Pages/UserAgentPage/index.tsx +++ b/src/Popup/Pages/UserAgentPage/index.tsx @@ -4,6 +4,7 @@ import DebouncedInput from '../../Components/DebouncedInput' import userAgents from '../../../utils/userAgents' import detachDebugger from '../../../utils/detachDebugger' import Page from '../../Components/Page' +import CheckBox from '../../Components/CheckBox' interface UserAgentPageProps { tab: string @@ -152,7 +153,9 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => { value={userAgent} setValue={setUserAgent} onChange={changeUserAgent} + mb="12px" /> + ) } diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx index c42e34d..5e9d019 100644 --- a/src/Popup/Popup.tsx +++ b/src/Popup/Popup.tsx @@ -19,16 +19,27 @@ import WebRtcPage from './Pages/WebRtcPage' import CurrentPage from './Pages/CurrentPage' import { ipData } from '../types' import getIp from '../utils/getIp' +import getReverseGeocoding from '../utils/getReverseGeocoding' import '../assets/global.css' import OtherOptionsPage from './Pages/OtherOptionsPage' const Popup = () => { const [tab, setTab] = useState('autofill') const [ipData, setIpData] = useState(undefined) + const [reverseGeocoding, setReverseGeocoding] = useState(undefined) useEffect(() => { - Promise.resolve(getIp()).then((data) => { - setIpData(data) + getIp().then((ipDataRes) => { + + setIpData(ipDataRes) + if (ipDataRes.lat && ipDataRes.lon) { + getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then( + (reverseGeocodingRes) => { + setReverseGeocoding(reverseGeocodingRes) + console.log(reverseGeocodingRes) + } + ) + } }) }, []) @@ -91,7 +102,7 @@ const Popup = () => { - + diff --git a/src/theme.ts b/src/theme.ts index 2e0e86c..2aa3eea 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -24,6 +24,7 @@ export const theme: Theme = { forms: { label: { width: 'auto', alignItems: 'center' }, input: { + // border: '2px solid', p: '2px 8px', mb: '8px', borderColor: 'grey', @@ -33,6 +34,7 @@ export const theme: Theme = { }, }, select: { + // border: '2px solid', cursor: 'pointer', p: '2px 8px', borderColor: 'grey', diff --git a/src/utils/getIp.ts b/src/utils/getIp.ts index e13ac1f..cb1852c 100644 --- a/src/utils/getIp.ts +++ b/src/utils/getIp.ts @@ -2,6 +2,7 @@ const getIp = () => fetch('http://ip-api.com/json/') .then((response) => response.json()) .then((ipData) => { + console.log(ipData) chrome.storage.local.set({ ipData }) return ipData }) diff --git a/src/utils/getReverseGeocoding.ts b/src/utils/getReverseGeocoding.ts new file mode 100644 index 0000000..d45d0f9 --- /dev/null +++ b/src/utils/getReverseGeocoding.ts @@ -0,0 +1,12 @@ +const getReverseGeocoding = (lat: number, lon: number) => + fetch( + `https://nominatim.openstreetmap.org/reverse?format=geojson&lat=${lat}&lon=${lon}` + ) + .then((response) => response.json()) + .then((data) => { + // chrome.storage.local.set({ ipData }) + console.log(data) + return data.features[0].properties.address + }) + +export default getReverseGeocoding