61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'
|
|
import configurations from '../../utils/configurations'
|
|
import countryLocales from '../../utils/countryLocales'
|
|
import detachDebugger from '../../utils/detachDebugger'
|
|
import { Label, Input } from 'theme-ui'
|
|
|
|
interface DataInputProps {
|
|
type: string
|
|
title: string
|
|
ip: any
|
|
configuration: string
|
|
setConfiguration: Dispatch<SetStateAction<string>>
|
|
}
|
|
|
|
const DataInput = ({
|
|
type,
|
|
title,
|
|
ip,
|
|
configuration,
|
|
setConfiguration,
|
|
}: DataInputProps) => {
|
|
const [value, setValue] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (configuration === 'none') {
|
|
setValue('')
|
|
chrome.storage.sync.set({ [type]: '' })
|
|
} else if (configuration === 'match') {
|
|
if (ip) {
|
|
const ipTypeValue =
|
|
type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
|
|
setValue(ipTypeValue)
|
|
chrome.storage.sync.set({ [type]: ipTypeValue })
|
|
}
|
|
} else if (configuration === 'custom') {
|
|
chrome.storage.sync.get([type], (result) => {
|
|
result[type] && setValue(result[type])
|
|
})
|
|
} else if (configuration !== 'default') {
|
|
setValue(configurations[configuration][type])
|
|
chrome.storage.sync.set({ [type]: configurations[configuration][type] })
|
|
}
|
|
}, [ip, configuration, type, value])
|
|
|
|
const changeTextValue = (e: any) => {
|
|
detachDebugger()
|
|
chrome.storage.sync.set({ [type]: e.target.value })
|
|
setValue(e.target.value)
|
|
chrome.storage.sync.set({ configuration: 'custom' })
|
|
setConfiguration('custom')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Label htmlFor={type}>{title}</Label>
|
|
<Input name={type} value={value} onChange={changeTextValue} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DataInput
|