Finished location page functionality

src/pages/Popup/ConfigurationSelect.tsx

@@ -0,0 +1,49 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import { Label, Select } from 'theme-ui'
+import configurations from '../../utils/configurations'
+import detachDebugger from '../../utils/detachDebugger'
+
+interface ConfigurationSelectProps {
+  configuration: string
+  setConfiguration: Dispatch<SetStateAction<string>>
+}
+
+const ConfigurationSelect = ({
+  configuration,
+  setConfiguration,
+}: ConfigurationSelectProps) => {
+  const changeConfiguration = (e: any) => {
+    detachDebugger()
+    console.log(e.target.value)
+    chrome.storage.sync.set({
+      configuration: e.target.value,
+    })
+    setConfiguration(e.target.value)
+  }
+
+  return (
+    <>
+      <Label htmlFor="configuration">Configuration</Label>
+      <Select
+        name="configuration"
+        id="configuration"
+        value={configuration}
+        onChange={changeConfiguration}
+        mb={'8px'}
+      >
+        <option value="none">None</option>
+        <option value="match">Match IP</option>
+        <option value="custom">Custom</option>
+        <optgroup label="Locations">
+          {Object.keys(configurations).map((key) => (
+            <option value={key} key={key}>
+              {configurations[key].name}
+            </option>
+          ))}
+        </optgroup>
+      </Select>
+    </>
+  )
+}
+
+export default ConfigurationSelect

src/pages/Popup/DataInput.tsx

@@ -1,59 +1,59 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'
-// import profiles from '../../utils/profiles'
+import configurations from '../../utils/configurations'
-// import countryLocales from '../../utils/countryLocales'
+import countryLocales from '../../utils/countryLocales'
-// import detachDebugger from '../../utils/detachDebugger'
+import detachDebugger from '../../utils/detachDebugger'
-import { Box, Label, Input, Select } from 'theme-ui'
+import { Label, Input } from 'theme-ui'
 
 interface DataInputProps {
   type: string
   title: string
-  ip?: string
+  ip: any
-  profile?: string
+  configuration: string
-  setProfile?: string
+  setConfiguration: Dispatch<SetStateAction<string>>
 }
 
 const DataInput = ({
   type,
   title,
   ip,
-  profile,
+  configuration,
-  setProfile,
+  setConfiguration,
 }: DataInputProps) => {
-  // const [value, setValue] = useState('')
+  const [value, setValue] = useState('')
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (profile === 'none') {
+    if (configuration === 'none') {
-  //     setValue('')
+      setValue('')
-  //     chrome.storage.sync.set({ [type]: '' })
+      chrome.storage.sync.set({ [type]: '' })
-  //   } else if (profile === 'match') {
+    } else if (configuration === 'match') {
-  //     if (ip) {
+      if (ip) {
-  //       const ipTypeValue =
+        const ipTypeValue =
-  //         type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
+          type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
-  //       setValue(ipTypeValue)
+        setValue(ipTypeValue)
-  //       chrome.storage.sync.set({ [type]: ipTypeValue })
+        chrome.storage.sync.set({ [type]: ipTypeValue })
-  //     }
+      }
-  //   } else if (profile === 'custom') {
+    } else if (configuration === 'custom') {
-  //     chrome.storage.sync.get([type], (result) => {
+      chrome.storage.sync.get([type], (result) => {
-  //       result[type] && setValue(result[type])
+        result[type] && setValue(result[type])
-  //     })
+      })
-  //   } else if (profile !== 'default') {
+    } else if (configuration !== 'default') {
-  //     setValue(profiles[profile][type])
+      setValue(configurations[configuration][type])
-  //     chrome.storage.sync.set({ [type]: profiles[profile][type] })
+      chrome.storage.sync.set({ [type]: configurations[configuration][type] })
-  //   }
+    }
-  // }, [ip, profile, type, value])
+  }, [ip, configuration, type, value])
 
-  // const changeTextValue = (e) => {
+  const changeTextValue = (e: any) => {
-  //   detachDebugger()
+    detachDebugger()
-  //   chrome.storage.sync.set({ [type]: e.target.value })
+    chrome.storage.sync.set({ [type]: e.target.value })
-  //   setValue(e.target.value)
+    setValue(e.target.value)
-  //   chrome.storage.sync.set({ profile: 'custom' })
+    chrome.storage.sync.set({ configuration: 'custom' })
-  //   setProfile('custom')
+    setConfiguration('custom')
-  // }
+  }
 
   return (
     <>
       <Label htmlFor={type}>{title}</Label>
-      <Input name={type} />
+      <Input name={type} value={value} onChange={changeTextValue} />
     </>
   )
 }

src/pages/Popup/IPData.tsx

@@ -0,0 +1,35 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import { Flex, Button, Text } from 'theme-ui'
+import detachDebugger from '../../utils/detachDebugger'
+import getIP from '../../utils/getIP'
+
+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<SetStateAction<null>>
+}
+
+const IPData = ({ ip, setIP }: IPDataProps) => {
+  return (
+    <Flex style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <Text>{ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}</Text>
+      <Button
+        onClick={() => {
+          Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+          detachDebugger()
+        }}
+      >
+        Reload
+      </Button>
+    </Flex>
+  )
+}
+
+export default IPData

src/pages/Popup/IpSettings.js

@@ -1,31 +0,0 @@
-import React from 'react'
-import detachDebugger from '../../utils/detachDebugger'
-
-const getFlagEmoji = (countryCode) => {
-  const codePoints = countryCode
-    .toUpperCase()
-    .split('')
-    .map((char) => 127397 + char.charCodeAt())
-  return String.fromCodePoint(...codePoints)
-}
-
-const IpSettings = ({ ip, getIP, setIP }) => {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div>
-        Current IP: {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}
-      </div>
-      <button
-        type="button"
-        onClick={() => {
-          Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-          detachDebugger()
-        }}
-      >
-        Reload
-      </button>
-    </div>
-  )
-}
-
-export default IpSettings

src/pages/Popup/LocationPage.tsx

@@ -1,27 +1,68 @@
 import React, { useState, useEffect } from 'react'
-import { Box, Label, Input, Select } from 'theme-ui'
+import { Box } from 'theme-ui'
 import DataInput from './DataInput'
+import ConfigurationSelect from './ConfigurationSelect'
+import IPData from './IPData'
+import getIP from '../../utils/getIP'
 
 const LocationPage = () => {
+  const [ip, setIP] = useState(null)
+  const [configuration, setConfiguration] = useState('default')
+
+  useEffect(() => {
+    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+      console.log(result.configuration)
+      result.configuration && setConfiguration(result.configuration)
+      if (result.ipData) {
+        setIP(result.ipData)
+      } else {
+        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+      }
+    })
+  }, [])
+
   return (
-    <div
+    <Box
       sx={{
         m: '12px',
         width: '100%',
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>
-      <Label htmlFor="configuration">Configuration</Label>
+      <ConfigurationSelect
-      <Select name="configuration" id="configuration" mb={'8px'}>
+        configuration={configuration}
-        <option>None</option>
+        setConfiguration={setConfiguration}
-        <option>Custom</option>
+      />
-        <option>Match IP</option>
+      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      </Select>
+      <DataInput
-      <DataInput type="timezone" title="Timezone" />
+        type="timezone"
-      <DataInput type="locale" title="Locale" />
+        title="Timezone"
-      <DataInput type="lat" title="Latitude" />
+        ip={ip}
-      <DataInput type="lon" title="Longitude" />
+        configuration={configuration}
-    </div>
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="locale"
+        title="Locale"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lat"
+        title="Latitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lon"
+        title="Longitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+    </Box>
   )
 }
 

src/pages/Popup/Main.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
-import IpSettings from './IpSettings'
+import IPData from './IPData'
-import ProfileSelect from './ProfileSelect'
+import ProfileSelect from './ConfigurationSelect'
 import DebugSettings from './DataInput'
 import UserAgentSettings from './UserAgentSettings'
 
@@ -36,7 +36,7 @@ const Popup = () => {
           padding: '12px',
         }}
       >
-        <IpSettings ip={ip} getIP={getIP} setIP={setIP} />
+        <IPData ip={ip} getIP={getIP} setIP={setIP} />
         <ProfileSelect profile={profile} setProfile={setProfile} />
         <DebugSettings
           type="timezone"

src/pages/Popup/Popup.tsx

@@ -5,23 +5,23 @@ import { Home, MapPin, Globe, Users, List } from 'react-feather'
 import Icon from './Icon'
 import LocationPage from './LocationPage'
 // import Navbar from './Navbar'
-// import IpSettings from './IpSettings'
+// import IPData from './IPData'
 // import ProfileSelect from './ProfileSelect'
 // import DebugSettings from './DebugSettings'
 // import UserAgentSettings from './UserAgentSettings'
 
 const Popup = () => {
-  const [ip, setIP] = useState(null)
+  // const [ip, setIP] = useState(null)
-  const [profile, setProfile] = useState('default')
+  // const [profile, setProfile] = useState('default')
 
-  useEffect(() => {}, [])
+  // useEffect(() => {}, [])
 
   return (
     <ThemeProvider theme={theme}>
       <Flex
         sx={{
           width: '350px',
-          height: '350px',
+          height: '365px',
         }}
       >
         <Flex

src/pages/Popup/ProfileSelect.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import profiles from '../../utils/profiles'
-import detachDebugger from '../../utils/detachDebugger'
-
-const ProfileSelect = ({ profile, setProfile }) => {
-  const changeProfile = (e) => {
-    detachDebugger()
-    chrome.storage.sync.set({
-      profile: e.target.value,
-    })
-    setProfile(e.target.value)
-  }
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        margin: '12px 0 0 0',
-      }}
-    >
-      <select
-        name="profile"
-        id="profile"
-        value={profile}
-        onChange={changeProfile}
-        style={{
-          width: '214px',
-        }}
-      >
-        <option value="none">None</option>
-        <option value="match">Match IP</option>
-        <option value="custom">Custom</option>
-        <optgroup label="Locations">
-          {Object.keys(profiles).map((key) => (
-            <option value={key} key={key}>
-              {profiles[key].name}
-            </option>
-          ))}
-        </optgroup>
-      </select>
-      <label>Profile</label>
-    </div>
-  )
-}
-
-export default ProfileSelect

src/theme.ts

@@ -37,4 +37,16 @@ export const theme: Theme = {
       },
     },
   },
+  buttons: {
+    primary: {
+      color: 'background',
+      bg: 'primary',
+      py: '3px',
+      px: '8px',
+      cursor: 'pointer',
+      '&:hover': {
+        bg: 'primaryDark',
+      },
+    },
+  },
 }

src/utils/attachDebugger.js

@@ -22,15 +22,6 @@ const attachDebugger = (tabId) => {
       ) {
         chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
-            chrome.debugger.sendCommand(
-              { tabId: tabId },
-              'Page.setAdBlockingEnabled',
-              { enabled: true },
-              (res) => {
-                console.log(res)
-              }
-            )
-
             // chrome.debugger.sendCommand(
             //   { tabId: tabId },
             //   'Target.autoAttachRelated',

src/utils/configurations.ts

@@ -1,4 +1,4 @@
-const profiles = {
+const configurations: any = {
   baghdad: {
     name: 'Baghdad',
     timezone: 'Asia/Baghdad',
@@ -233,4 +233,4 @@ const profiles = {
   },
 }
 
-export default profiles
+export default configurations

src/utils/countryLocales.ts

@@ -1,4 +1,4 @@
-const countryLocales = {
+const countryLocales: any = {
   AD: { locale: 'ca-AD' },
   AE: { locale: 'ar-AE' },
   AF: { locale: 'fa-AF' },

src/utils/detachDebugger.ts

@@ -1,4 +1,4 @@
-const detachDebugger = (attach) => {
+const detachDebugger = () => {
   chrome.debugger.getTargets((tabs) => {
     for (const tab in tabs) {
       if (tabs[tab].attached && tabs[tab].tabId) {

src/utils/getIP.ts

@@ -0,0 +1,9 @@
+const getIP = () =>
+  fetch('http://ip-api.com/json/')
+    .then((response) => response.json())
+    .then((ipData) => {
+      chrome.storage.sync.set({ ipData })
+      return ipData
+    })
+
+export default getIP