User agent tab setup

src/pages/Popup/HomePage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
-import DataInput from './DataInput'
+import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
 import getIP from '../../utils/getIP'
@@ -33,28 +33,28 @@ const LocationPage = () => {
         setConfiguration={setConfiguration}
       />
       {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      <DataInput
+      <LocationInput
         type="timezone"
         title="Timezone"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="locale"
         title="Locale"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="lat"
         title="Latitude"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="lon"
         title="Longitude"
         ip={ip}

src/pages/Popup/LocationInput.tsx

@@ -4,7 +4,7 @@ import countryLocales from '../../utils/countryLocales'
 import detachDebugger from '../../utils/detachDebugger'
 import { Label, Input } from 'theme-ui'
 
-interface DataInputProps {
+interface LocationInputProps {
   type: string
   title: string
   ip: any
@@ -12,13 +12,13 @@ interface DataInputProps {
   setConfiguration: Dispatch<SetStateAction<string>>
 }
 
-const DataInput = ({
+const LocationInput = ({
   type,
   title,
   ip,
   configuration,
   setConfiguration,
-}: DataInputProps) => {
+}: LocationInputProps) => {
   const [value, setValue] = useState('')
 
   useEffect(() => {
@@ -58,4 +58,4 @@ const DataInput = ({
   )
 }
 
-export default DataInput
+export default LocationInput

src/pages/Popup/LocationPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
-import DataInput from './DataInput'
+import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
 import getIP from '../../utils/getIP'
@@ -33,28 +33,28 @@ const LocationPage = () => {
         setConfiguration={setConfiguration}
       />
       {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      <DataInput
+      <LocationInput
         type="timezone"
         title="Timezone"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="locale"
         title="Locale"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="lat"
         title="Latitude"
         ip={ip}
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
+      <LocationInput
         type="lon"
         title="Longitude"
         ip={ip}

src/pages/Popup/Main.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
 import IPData from './IPData'
 import ProfileSelect from './ConfigurationSelect'
-import DebugSettings from './DataInput'
+import DebugSettings from './LocationInput'
 import UserAgentSettings from './UserAgentSettings'
 
 const getIP = () =>

src/pages/Popup/Popup.tsx

@@ -1,21 +1,19 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { ThemeProvider, Flex } from 'theme-ui'
 import { theme } from '../../theme'
-import { Home, MapPin, Globe, Users, List } from 'react-feather'
+import { Home, MapPin, Globe, Command, List } from 'react-feather'
 import TabItem from './TabItem'
 import Page from './Page'
 
 const Popup = () => {
-  const [tab, setTab] = useState(0)
-  useEffect(() => {
-    console.log(tab)
-  }, [tab])
+  const [tab, setTab] = useState(2)
+
   return (
     <ThemeProvider theme={theme}>
       <Flex
         sx={{
           width: '350px',
-          height: '365px',
+          height: '368px',
         }}
       >
         <Flex
@@ -29,8 +27,8 @@ const Popup = () => {
           <TabItem Icon={Home} onClick={() => setTab(0)} />
           <TabItem Icon={MapPin} onClick={() => setTab(1)} />
           <TabItem Icon={Globe} onClick={() => setTab(2)} />
-          <TabItem Icon={List} onClick={() => setTab(3)} />
-          <TabItem Icon={Users} onClick={() => setTab(4)} />
+          <TabItem Icon={Command} onClick={() => setTab(3)} />
+          <TabItem Icon={List} onClick={() => setTab(4)} />
         </Flex>
         <Page tab={tab} />
       </Flex>

src/pages/Popup/UserAgentPage.tsx

@@ -1,24 +1,34 @@
 import React, { useState, useEffect } from 'react'
-import { Box } from 'theme-ui'
-import DataInput from './DataInput'
-import ConfigurationSelect from './ConfigurationSelect'
-import getIP from '../../utils/getIP'
+import { Box, Label, Radio, Flex, Input } from 'theme-ui'
+import userAgents from '../../utils/userAgents'
+import detachDebugger from '../../utils/detachDebugger'
 
 const LocationPage = () => {
-  const [ip, setIP] = useState(null)
-  const [configuration, setConfiguration] = useState('default')
+  const [type, setType] = useState('desktop')
+  const [userAgent, setUserAgent] = useState('')
+  // const [configuration, setConfiguration] = useState('default')
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
-      result.configuration && setConfiguration(result.configuration)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
+    chrome.storage.sync.get(['type', 'userAgent'], (result) => {
+      result.type && setType(result.type)
+      result.userAgent && setUserAgent(result.userAgent)
     })
   }, [])
 
+  const changeType = (e: any) => {
+    detachDebugger()
+    chrome.storage.sync.set({ type: e.target.value })
+    setType(e.target.value)
+  }
+
+  const changeUserAgent = (e: any) => {
+    detachDebugger()
+    chrome.storage.sync.set({ userAgent: e.target.value })
+    chrome.storage.sync.set({ type: 'custom' })
+    setUserAgent(e.target.value)
+    setType('custom')
+  }
+
   return (
     <Box
       sx={{
@@ -27,38 +37,54 @@ const LocationPage = () => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
-      <ConfigurationSelect
+      <Flex mt={'12px'} mb={'8px'}>
+        <Label>
+          <Radio
+            name="type"
+            value="desktop"
+            onChange={changeType}
+            checked={type === 'desktop'}
+          />{' '}
+          Desktop
+        </Label>
+        <Label>
+          <Radio
+            name="type"
+            value="mobile"
+            onChange={changeType}
+            checked={type === 'mobile'}
+          />{' '}
+          Mobile
+        </Label>
+        <Label>
+          <Radio
+            name="type"
+            value="custom"
+            onChange={changeType}
+            checked={type === 'custom'}
+          />{' '}
+          Custom
+        </Label>
+      </Flex>
+      {/* <UserAgentSelect
+        title="Operating System"
         configuration={configuration}
         setConfiguration={setConfiguration}
       />
-      <DataInput
-        type="timezone"
-        title="Timezone"
+      <UserAgentSelect
+        title="Browser"
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      /> */}
+      {/* <LocationInput
+        type="userAgent"
+        title="User Agent"
         ip={ip}
         configuration={configuration}
         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}
-      />
+      /> */}
+      <Label htmlFor="userAgent">User Agent</Label>
+      <Input name="userAgent" value={userAgent} onChange={changeUserAgent} />
     </Box>
   )
 }

src/pages/Popup/UserAgentSelect.tsx

@@ -0,0 +1,50 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import { Label, Select } from 'theme-ui'
+import configurations from '../../utils/configurations'
+import detachDebugger from '../../utils/detachDebugger'
+
+interface ConfigurationSelectProps {
+  title: string
+  configuration: string
+  setConfiguration: Dispatch<SetStateAction<string>>
+}
+
+const ConfigurationSelect = ({
+  title,
+  configuration,
+  setConfiguration,
+}: ConfigurationSelectProps) => {
+  const changeConfiguration = (e: any) => {
+    detachDebugger()
+    chrome.storage.sync.set({
+      configuration: e.target.value,
+    })
+    setConfiguration(e.target.value)
+  }
+
+  return (
+    <>
+      <Label htmlFor="configuration">{title}</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/theme.ts

@@ -36,6 +36,9 @@ export const theme: Theme = {
         outline: 'none',
       },
     },
+    // radio: {
+    //   userSelect: 'none',
+    // },
   },
   buttons: {
     primary: {