Set true default values for system data

src/Popup/Pages/AutofillPage/index.tsx

@@ -9,10 +9,10 @@ import TableRow from '../../Components/TableRow'
 interface AutofillPageProps {
   tab: string
   ipData?: ipData
-  reverseGeocoding: any
+  // reverseGeocoding: any
 }
 
-const AutofillPage = ({ tab, ipData, reverseGeocoding }: AutofillPageProps) => {
+const AutofillPage = ({ tab, ipData }: AutofillPageProps) => {
   const [country, setCountry] = useState('')
   const [city, setCity] = useState('')
   const [region, setRegion] = useState('')
@@ -67,25 +67,25 @@ const AutofillPage = ({ tab, ipData, reverseGeocoding }: AutofillPageProps) => {
     // })
   }, [ipData, setCity, setPostCode, setRegion])
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (!postCode && reverseGeocoding?.postcode) {
+  //   if (!postCode && reverseGeocoding?.postcode) {
-      setPostCode(reverseGeocoding?.postcode)
+  //     setPostCode(reverseGeocoding?.postcode)
-      chrome.storage.local.set({
+  //     chrome.storage.local.set({
-        postCode: reverseGeocoding?.postcode,
+  //       postCode: reverseGeocoding?.postcode,
-      })
+  //     })
-    }
+  //   }
-    if (reverseGeocoding?.house_number && reverseGeocoding?.road) {
+  //   if (reverseGeocoding?.house_number && reverseGeocoding?.road) {
-      setAddress(`${reverseGeocoding.house_number} ${reverseGeocoding.road}`)
+  //     setAddress(`${reverseGeocoding.house_number} ${reverseGeocoding.road}`)
-      chrome.storage.local.set({
+  //     chrome.storage.local.set({
-        address: `${reverseGeocoding.house_number} ${reverseGeocoding.road}`,
+  //       address: `${reverseGeocoding.house_number} ${reverseGeocoding.road}`,
-      })
+  //     })
-    } else if (reverseGeocoding?.road) {
+  //   } else if (reverseGeocoding?.road) {
-      setAddress(reverseGeocoding.road)
+  //     setAddress(reverseGeocoding.road)
-      chrome.storage.local.set({
+  //     chrome.storage.local.set({
-        address: reverseGeocoding.road,
+  //       address: reverseGeocoding.road,
-      })
+  //     })
-    }
+  //   }
-  }, [postCode, reverseGeocoding, setAddress])
+  // }, [postCode, reverseGeocoding, setAddress])
 
   // const changeUserAgent = () => {
   //   // if (userAgentType !== 'custom') {

src/Popup/Pages/SystemPage/index.tsx

@@ -11,9 +11,10 @@ import CheckBox from '../../Components/CheckBox'
 interface SystemPageProps {
   tab: string
   ipData?: ipData
+  geolocation?: GeolocationCoordinates
 }
 
-const SystemPage = ({ tab, ipData }: SystemPageProps) => {
+const SystemPage = ({ tab, ipData, geolocation }: SystemPageProps) => {
   const [systemType, setSystemType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
@@ -21,22 +22,33 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
   const [lon, setLongitude] = useState('')
   const [configuration, setConfiguration] = useState('custom')
 
+  // console.log(geolocation)
+
   useEffect(() => {
     chrome.storage.local.get(
       ['systemType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
       (storage) => {
-        console.log(ipData)
+        if (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,
           })
+        }
+        if (!storage.systemType || storage.systemType === 'default') {
+          setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+          setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
+          if (geolocation) {
+            setLatitude(`${geolocation.latitude}`)
+            setLongitude(`${geolocation.longitude}`)
+          }
+        }
+        if (storage.systemType === 'matchIp' && ipData) {
+          setTimezone(ipData.timezone)
+          setLocale(countryLocales[ipData.countryCode].locale)
+          setLatitude(`${ipData.lat}`)
+          setLongitude(`${ipData.lon}`)
         } else if (storage.systemType === 'custom') {
           storage.configuration && setConfiguration(storage.configuration)
           storage.timezone && setTimezone(storage.timezone)
@@ -49,7 +61,7 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
           : setSystemType('default')
       }
     )
-  }, [ipData])
+  }, [geolocation, ipData])
 
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
@@ -57,10 +69,12 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
     chrome.storage.local.set({ systemType: e.target.value })
 
     if (e.target.value === 'default') {
-      setTimezone('')
+      setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
-      setLocale('')
+      setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
-      setLatitude('')
+      if (geolocation) {
-      setLongitude('')
+        setLatitude(`${geolocation.latitude}`)
+        setLongitude(`${geolocation.longitude}`)
+      }
       chrome.storage.local.set({
         timezone: '',
         locale: '',

src/Popup/Popup.tsx

@@ -18,27 +18,36 @@ import WebRtcPage from './Pages/WebRtcPage'
 import ConnectionPage from './Pages/ConnectionPage'
 import { ipData } from '../types'
 import getIp from '../utils/getIp'
-import getReverseGeocoding from '../utils/getReverseGeocoding'
+// 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<ipData | undefined>(undefined)
+  const [ipData, setIpData] = useState<ipData>()
-  const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
+  // const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
+  const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
 
   useEffect(() => {
     getIp().then((ipDataRes) => {
       setIpData(ipDataRes)
-      if (ipDataRes.lat && ipDataRes.lon) {
+      // if (ipDataRes.lat && ipDataRes.lon) {
-        getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
+      //   getReverseGeocoding(ipDataRes.lat, ipDataRes.lon).then(
-          (reverseGeocodingRes) => {
+      //     (reverseGeocodingRes) => {
-            setReverseGeocoding(reverseGeocodingRes)
+      //       setReverseGeocoding(reverseGeocodingRes)
-            console.log(reverseGeocodingRes)
+      //       console.log(reverseGeocodingRes)
+      //     }
+      //   )
+      // }
+    })
+    navigator.geolocation.getCurrentPosition(
+      (pos) => setGeolocation(pos.coords),
+      (err) => console.warn(`ERROR(${err.code}): ${err.message}`),
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
       }
     )
-      }
-    })
   }, [])
 
   return (
@@ -99,11 +108,11 @@ const Popup = () => {
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <ConnectionPage tab={tab} ipData={ipData} />
-          <SystemPage tab={tab} ipData={ipData} />
+          <SystemPage tab={tab} ipData={ipData} geolocation={geolocation} />
           <AutofillPage
             tab={tab}
             ipData={ipData}
-            reverseGeocoding={reverseGeocoding}
+            // reverseGeocoding={reverseGeocoding}
           />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />