Added locale settings for popup

src/pages/Background/index.js

@@ -1,4 +1,5 @@
-import countryLocales from './countryLocales'
+import countryLocales from '../../utils/countryLocales'
+
 
 const attachTab = (tabId, ipData) => {
   chrome.storage.sync.get(

src/pages/Popup/DebugSettings.js

@@ -10,19 +10,13 @@ const detachDebugger = () => {
   })
 }
 
-const DebugSettings = ({ type, ip }) => {
+const DebugSettings = ({ type, title, ip }) => {
   const [value, setValue] = useState('')
   const [matchIP, setMatchIP] = useState(false)
   const matchIPStorage = `${type}MatchIP`
 
-  // useEffect(() => {
-  //   console.log(value, matchIP)
-  // }, [value, matchIP])
-
   useEffect(() => {
     chrome.storage.sync.get([type, matchIPStorage], (result) => {
-      console.log(1, result)
-
       setMatchIP(result[matchIPStorage])
 
       if (result[matchIPStorage]) {
@@ -39,6 +33,8 @@ const DebugSettings = ({ type, ip }) => {
 
         //   result[type] && setValue(ip[type])
         // }
+      } else {
+        setValue(result[type])
       }
     })
   }, [ip, matchIPStorage, type])
@@ -63,7 +59,7 @@ const DebugSettings = ({ type, ip }) => {
       style={{
         display: 'flex',
         justifyContent: 'space-between',
-        margin: '10px 0 0 0',
+        margin: '12px 0 0 0',
       }}
     >
       <label>
@@ -76,7 +72,7 @@ const DebugSettings = ({ type, ip }) => {
             margin: '0 5px 0 0',
           }}
         />
-        {type}
+        {title}
       </label>
       <label>
         <input

src/pages/Popup/LocaleSettings.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from 'react'
+import countryLocales from '../../utils/countryLocales'
+
+const detachDebugger = () => {
+  chrome.debugger.getTargets((tabs) => {
+    for (const tab in tabs) {
+      if (tabs[tab].attached && tabs[tab].tabId) {
+        chrome.debugger.detach({ tabId: tabs[tab].tabId })
+      }
+    }
+  })
+}
+
+const LocaleSettings = ({ ip }) => {
+  const [value, setValue] = useState('')
+  const [matchIP, setMatchIP] = useState(false)
+  const locale = useRef(null)
+
+  useEffect(() => {
+    if (ip) {
+      locale.current = countryLocales[ip.countryCode].locale
+
+      chrome.storage.sync.get(['locale', 'localeMathIP'], (result) => {
+        setMatchIP(result.localeMathIP)
+
+        if (result.localeMathIP) {
+          setValue(locale.current)
+          chrome.storage.sync.set({ locale: locale.current })
+        } else {
+          setValue(result.locale)
+        }
+      })
+    }
+  }, [ip])
+
+  const toggleMatchIP = () => {
+    chrome.storage.sync.set({ localeMathIP: !matchIP })
+    !matchIP && setValue(locale.current)
+    setMatchIP(!matchIP)
+  }
+
+  const changeTextValue = (e) => {
+    chrome.storage.sync.set({ locale: e.target.value })
+    setValue(e.target.value)
+    if (matchIP) {
+      chrome.storage.sync.set({ localeMathIP: !matchIP })
+      setMatchIP(!matchIP)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '12px 0 0 0',
+      }}
+    >
+      <label>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => changeTextValue(e)}
+          style={{
+            width: '120px',
+            margin: '0 5px 0 0',
+          }}
+        />
+        Locale
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={matchIP}
+          onChange={() => toggleMatchIP()}
+        />
+        Match IP
+      </label>
+    </div>
+  )
+}
+
+export default LocaleSettings

src/pages/Popup/Popup.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
 import IpSettings from './IpSettings'
 import DebugSettings from './DebugSettings'
+import LocaleSettings from './LocaleSettings'
 
 const getIP = () =>
   fetch('http://ip-api.com/json/')
@@ -29,13 +30,14 @@ const Popup = () => {
       <Navbar />
       <div
         style={{
-          padding: '10px',
+          padding: '12px',
         }}
       >
         <IpSettings ip={ip} getIP={getIP} setIP={setIP} />
-        <DebugSettings type="timezone" ip={ip} />
-        <DebugSettings type="lat" ip={ip} />
-        <DebugSettings type="lon" ip={ip} />
+        <DebugSettings type="timezone" title="Timezone" ip={ip} />
+        <DebugSettings type="lat" title="Latitude" ip={ip} />
+        <DebugSettings type="lon" title="Longitude" ip={ip} />
+        <LocaleSettings ip={ip} />
       </div>
     </div>
   )

src/pages/Popup/index.css

@@ -13,7 +13,7 @@ body {
   background-color: var(--background);
   font-size: 13px;
   line-height: 22px;
-  width: 300px;
+  width: 320px;
   height: 300px;
   margin: 0;
   font-family: 'Segoe UI', Tahoma, sans-serif;