Fixed controlled component issues

This commit is contained in:
z0ccc 2022-04-16 20:22:09 -04:00
parent fa799daf05
commit d47664b167
3 changed files with 30 additions and 47 deletions

View file

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

View file

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

View file

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