Renamed from location to system

src/Popup/Components/CheckBox.tsx

@@ -1,12 +1,12 @@
 import { Label, Checkbox } from 'theme-ui'
 
-interface LocationPageProps {
+interface SystemPageProps {
   title: string
   onChange?: () => void
   checked?: boolean
 }
 
-const CheckBox = ({ title, onChange, checked }: LocationPageProps) => {
+const CheckBox = ({ title, onChange, checked }: SystemPageProps) => {
   return (
     <Label sx={{ mb: '8px' }}>
       <Checkbox onChange={onChange} checked={checked} />

src/Popup/Pages/AutofillPage/index.tsx

@@ -3,11 +3,11 @@ import { Box } from 'theme-ui'
 
 import getIP from '../../../utils/getIp'
 
-interface LocationPageProps {
+interface SystemPageProps {
   tab: string
 }
 
-const AutofillPage = ({ tab }: LocationPageProps) => {
+const AutofillPage = ({ tab }: SystemPageProps) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
 

src/Popup/Pages/CurrentPage/index.tsx

@@ -0,0 +1,36 @@
+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')
+
+  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
+      sx={{
+        display: tab === 'current' ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Current Info</Box>
+    </Box>
+  )
+}
+
+export default AutofillPage

src/Popup/Pages/SettingsPage/SettingsCheckBox.tsx

@@ -1,12 +1,12 @@
 import { Label, Checkbox } from 'theme-ui'
 
-interface LocationPageProps {
+interface SystemPageProps {
   title: string
   onChange?: () => void
   checked?: boolean
 }
 
-const SettingsCheckBox = ({ title, onChange, checked }: LocationPageProps) => {
+const SettingsCheckBox = ({ title, onChange, checked }: SystemPageProps) => {
   return (
     <Label sx={{ mb: '8px' }}>
       <Checkbox onChange={onChange} checked={checked} />

src/Popup/Pages/SettingsPage/index.tsx

@@ -3,11 +3,11 @@ import { Box, Label, Select } from 'theme-ui'
 import setWebRtcPolicy from '../WebRtcPage/handleWebRtcPolicy'
 import SettingsCheckBox from './SettingsCheckBox'
 
-interface LocationPageProps {
+interface SystemPageProps {
   tab: string
 }
 
-const SettingsPage = ({ tab }: LocationPageProps) => {
+const SettingsPage = ({ tab }: SystemPageProps) => {
   const [isWebRtcDisabled, setIsWebRtcDisabled] = useState(false)
 
   useEffect(() => {

src/Popup/Pages/SystemPage/IpData.tsx

@@ -19,16 +19,29 @@ interface IPDataProps {
 
 const IpData = ({ ip, setIp }: IPDataProps) => {
   return (
-    <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+    <Flex sx={{}}>
-      <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
+      <Flex
-      <Button
+        sx={{
-        onClick={() => {
+          justifyContent: 'space-between',
-          Promise.resolve(getIp()).then((ipData) => setIp(ipData))
+          alignItems: 'center',
-          detachDebugger()
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'grey',
+          borderRadius: '4px',
+          pl: '8px',
+          width: '100%',
         }}
       >
-        Reload
+        <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
-      </Button>
+        {/* <Button
+          onClick={() => {
+            Promise.resolve(getIp()).then((ipData) => setIp(ipData))
+            detachDebugger()
+          }}
+        >
+          Reload
+        </Button> */}
+      </Flex>
     </Flex>
   )
 }

src/Popup/Pages/SystemPage/index.tsx

@@ -9,11 +9,11 @@ import countryLocales from '../../../utils/countryLocales'
 import { ipData } from '../../../types'
 import configurations from '../../../utils/configurations'
 
-interface LocationPageProps {
+interface SystemPageProps {
   tab: string
 }
 
-const LocationPage = ({ tab }: LocationPageProps) => {
+const SystemPage = ({ tab }: SystemPageProps) => {
   const [type, setType] = useState('default')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
@@ -64,15 +64,6 @@ const LocationPage = ({ tab }: LocationPageProps) => {
           longitude: configurations[configuration].lon,
         })
       }
-      // setLocale(countryLocales[ip.countryCode].locale)
-      // setLatitude(`${ip.lat}`)
-      // setLongitude(`${ip.lon}`)
-      // chrome.storage.local.set({
-      //   timezone: ip.timezone,
-      //   locale: countryLocales[ip.countryCode].locale,
-      //   latitude: ip.lat,
-      //   longitude: ip.lon,
-      // })
     }
   }, [configuration, ip, type])
 
@@ -86,10 +77,10 @@ const LocationPage = ({ tab }: LocationPageProps) => {
   return (
     <Box
       sx={{
-        display: tab === 'location' ? 'block' : 'none',
+        display: tab === 'system' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>Location Data</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>System Data</Box>
       <Flex
         sx={{
           justifyContent: 'space-between',
@@ -98,7 +89,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
       >
         <Label>
           <Radio
-            name="locationType"
+            name="systemType"
             value="default"
             onChange={changeType}
             checked={type === 'default'}
@@ -107,7 +98,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
         </Label>
         <Label>
           <Radio
-            name="locationType"
+            name="systemType"
             value="matchIp"
             onChange={changeType}
             checked={type === 'matchIp'}
@@ -116,7 +107,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
         </Label>
         <Label>
           <Radio
-            name="locationType"
+            name="systemType"
             value="custom"
             onChange={changeType}
             checked={type === 'custom'}
@@ -124,7 +115,6 @@ const LocationPage = ({ tab }: LocationPageProps) => {
           Custom
         </Label>
       </Flex>
-      {type === 'matchIp' && <IpData ip={ip} setIp={setIp} />}
       {type === 'custom' && (
         <ConfigurationSelect
           configuration={configuration}
@@ -159,4 +149,4 @@ const LocationPage = ({ tab }: LocationPageProps) => {
   )
 }
 
-export default LocationPage
+export default SystemPage

src/Popup/Pages/WebRtcPage/index.tsx

@@ -3,11 +3,11 @@ import { Box, Button, Select } from 'theme-ui'
 import getWebRTCData from './getWebRTCData'
 import handleWebRtcPolicy from './handleWebRtcPolicy'
 
-interface LocationPageProps {
+interface SystemPageProps {
   tab: string
 }
 
-const WebRtcPage = ({ tab }: LocationPageProps) => {
+const WebRtcPage = ({ tab }: SystemPageProps) => {
   const [webRtcPolicy, setWebRtcPolicy] = useState('default')
   const [webRtcIp, setWebRtcIp] = useState([])
 

src/Popup/Popup.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
 import { theme } from '../theme'
 import {
-  Home,
   MapPin,
+  HardDrive,
   FileText,
   MessageSquare,
   Sliders,
@@ -11,14 +11,15 @@ import {
   ExternalLink,
 } from 'react-feather'
 import TabItem from './TabItem'
-import LocationPage from './Pages/LocationPage'
+import SystemPage from './Pages/SystemPage'
 import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
 import AutofillPage from './Pages/AutofillPage'
 import WebRtcPage from './Pages/WebRtcPage'
+import CurrentPage from './Pages/CurrentPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('location')
+  const [tab, setTab] = useState('system')
 
   return (
     <ThemeProvider theme={theme}>
@@ -38,8 +39,13 @@ const Popup = () => {
         >
           <TabItem
             Icon={MapPin}
-            active={tab === 'location'}
+            active={tab === 'current'}
-            onClick={() => setTab('location')}
+            onClick={() => setTab('current')}
+          />
+          <TabItem
+            Icon={HardDrive}
+            active={tab === 'system'}
+            onClick={() => setTab('system')}
           />
           <TabItem
             Icon={FileText}
@@ -67,7 +73,8 @@ const Popup = () => {
           />
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
-          <LocationPage tab={tab} />
+          <CurrentPage tab={tab} />
+          <SystemPage tab={tab} />
           <AutofillPage tab={tab} />
           <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />