DataInput component

src/pages/Popup/DataInput.tsx

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

src/pages/Popup/DebugSettings.js

@@ -1,59 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import profiles from '../../utils/profiles'
-import countryLocales from '../../utils/countryLocales'
-import detachDebugger from '../../utils/detachDebugger'
-
-const DebugSettings = ({ type, title, ip, profile, setProfile }) => {
-  const [value, setValue] = useState('')
-
-  useEffect(() => {
-    if (profile === 'none') {
-      setValue('')
-      chrome.storage.sync.set({ [type]: '' })
-    } else if (profile === 'match') {
-      if (ip) {
-        const ipTypeValue =
-          type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
-        setValue(ipTypeValue)
-        chrome.storage.sync.set({ [type]: ipTypeValue })
-      }
-    } else if (profile === 'custom') {
-      chrome.storage.sync.get([type], (result) => {
-        result[type] && setValue(result[type])
-      })
-    } else if (profile !== 'default') {
-      setValue(profiles[profile][type])
-      chrome.storage.sync.set({ [type]: profiles[profile][type] })
-    }
-  }, [ip, profile, type, value])
-
-  const changeTextValue = (e) => {
-    detachDebugger()
-    chrome.storage.sync.set({ [type]: e.target.value })
-    setValue(e.target.value)
-    chrome.storage.sync.set({ profile: 'custom' })
-    setProfile('custom')
-  }
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        margin: '12px 0 0 0',
-      }}
-    >
-      <input
-        type="text"
-        value={value}
-        onChange={changeTextValue}
-        style={{
-          width: '206px',
-        }}
-      />
-      <label>{title}</label>
-    </div>
-  )
-}
-
-export default DebugSettings

src/pages/Popup/LocationPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Label, Input, Select } from 'theme-ui'
+import DataInput from './DataInput'
 
 const LocationPage = () => {
   return (
@@ -16,14 +17,10 @@ const LocationPage = () => {
         <option>Custom</option>
         <option>Match IP</option>
       </Select>
-      <Label htmlFor="timezone">Timezone</Label>
+      <DataInput type="timezone" title="Timezone" />
-      <Input name="timezone" id="username" />
+      <DataInput type="locale" title="Locale" />
-      <Label htmlFor="locale">Locale</Label>
+      <DataInput type="lat" title="Latitude" />
-      <Input name="locale" id="locale" />
+      <DataInput type="lon" title="Longitude" />
-      <Label htmlFor="latitude">Latitude</Label>
-      <Input name="latitude" id="latitude" />
-      <Label htmlFor="longitude">Longitude</Label>
-      <Input name="longitude" id="longitude" />
     </div>
   )
 }

src/pages/Popup/Main.jsx

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