Fixed controlled component issues

src/pages/Popup/DebugSettings.js

@@ -16,35 +16,20 @@ const DebugSettings = ({ type, title, ip }) => {
   const matchIPStorage = `${type}MatchIP`
 
   useEffect(() => {
-    chrome.storage.sync.get([type, matchIPStorage], (result) => {
-      setMatchIP(result[matchIPStorage])
+    if (ip) {
+      chrome.storage.sync.get([type, matchIPStorage], (result) => {
+        result[matchIPStorage] && setMatchIP(result[matchIPStorage])
 
-      if (result[matchIPStorage]) {
-        setValue(ip[type])
-        chrome.storage.sync.set({ [type]: ip[type] })
-        // if (!result[type]) {
-        //   console.log(2, result)
-
-        //   setValue(ip[type])
-        //   chrome.storage.sync.set({ [type]: ip[type] })
-        // } else {
-        //   console.log(3, result[type])
-        //   chrome.storage.sync.set({ [type]: ip[type] })
-
-        //   result[type] && setValue(ip[type])
-        // }
-      } else {
-        setValue(result[type])
-      }
-    })
+        if (result[matchIPStorage]) {
+          setValue(ip[type])
+          chrome.storage.sync.set({ [type]: ip[type] })
+        } else if (result[type]) {
+          setValue(result[type])
+        }
+      })
+    }
   }, [ip, matchIPStorage, type])
 
-  const toggleMatchIP = () => {
-    chrome.storage.sync.set({ [matchIPStorage]: !matchIP })
-    !matchIP && setValue(ip[type])
-    setMatchIP(!matchIP)
-  }
-
   const changeTextValue = (e) => {
     chrome.storage.sync.set({ [type]: e.target.value })
     setValue(e.target.value)
@@ -54,6 +39,12 @@ const DebugSettings = ({ type, title, ip }) => {
     }
   }
 
+  const toggleMatchIP = (e) => {
+    chrome.storage.sync.set({ [matchIPStorage]: !matchIP })
+    !matchIP && setValue(ip[type])
+    setMatchIP(e.target.checked)
+  }
+
   return (
     <div
       style={{
@@ -66,7 +57,7 @@ const DebugSettings = ({ type, title, ip }) => {
         <input
           type="text"
           value={value}
-          onChange={(e) => changeTextValue(e)}
+          onChange={changeTextValue}
           style={{
             width: '120px',
             margin: '0 5px 0 0',
@@ -75,11 +66,7 @@ const DebugSettings = ({ type, title, ip }) => {
         {title}
       </label>
       <label>
-        <input
-          type="checkbox"
-          checked={matchIP}
-          onChange={() => toggleMatchIP()}
-        />
+        <input type="checkbox" checked={matchIP} onChange={toggleMatchIP} />
         Match IP
       </label>
     </div>

src/pages/Popup/LocaleSettings.js

@@ -21,24 +21,18 @@ const LocaleSettings = ({ ip }) => {
       locale.current = countryLocales[ip.countryCode].locale
 
       chrome.storage.sync.get(['locale', 'localeMathIP'], (result) => {
-        setMatchIP(result.localeMathIP)
+        result.localeMathIP && setMatchIP(result.localeMathIP)
 
         if (result.localeMathIP) {
           setValue(locale.current)
           chrome.storage.sync.set({ locale: locale.current })
-        } else {
+        } else if (result.locale) {
           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)
@@ -48,6 +42,12 @@ const LocaleSettings = ({ ip }) => {
     }
   }
 
+  const toggleMatchIP = (e) => {
+    chrome.storage.sync.set({ localeMathIP: !matchIP })
+    !matchIP && setValue(locale.current)
+    setMatchIP(e.target.value)
+  }
+
   return (
     <div
       style={{
@@ -60,7 +60,7 @@ const LocaleSettings = ({ ip }) => {
         <input
           type="text"
           value={value}
-          onChange={(e) => changeTextValue(e)}
+          onChange={changeTextValue}
           style={{
             width: '120px',
             margin: '0 5px 0 0',
@@ -69,11 +69,7 @@ const LocaleSettings = ({ ip }) => {
         Locale
       </label>
       <label>
-        <input
-          type="checkbox"
-          checked={matchIP}
-          onChange={() => toggleMatchIP()}
-        />
+        <input type="checkbox" checked={matchIP} onChange={toggleMatchIP} />
         Match IP
       </label>
     </div>

src/pages/Popup/Popup.jsx

@@ -13,7 +13,7 @@ const getIP = () =>
     })
 
 const Popup = () => {
-  const [ip, setIP] = useState('')
+  const [ip, setIP] = useState(null)
 
   useEffect(() => {
     chrome.storage.sync.get(['ipData'], (result) => {