152 lines
4.1 KiB
TypeScript
152 lines
4.1 KiB
TypeScript
import { useState, useEffect, ChangeEvent } from 'react'
|
|
import { Box, Flex, Label, Radio } from 'theme-ui'
|
|
import LocationInput from './LocationInput'
|
|
import ConfigurationSelect from './ConfigurationSelect'
|
|
import IpData from './IpData'
|
|
import getIp from '../../../utils/getIp'
|
|
import detachDebugger from '../../../utils/detachDebugger'
|
|
import countryLocales from '../../../utils/countryLocales'
|
|
import { ipData } from '../../../types'
|
|
import configurations from '../../../utils/configurations'
|
|
|
|
interface SystemPageProps {
|
|
tab: string
|
|
}
|
|
|
|
const SystemPage = ({ tab }: SystemPageProps) => {
|
|
const [type, setType] = useState('default')
|
|
const [timezone, setTimezone] = useState('')
|
|
const [locale, setLocale] = useState('')
|
|
const [latitude, setLatitude] = useState('')
|
|
const [longitude, setLongitude] = useState('')
|
|
const [ip, setIp] = useState<ipData | undefined>(undefined)
|
|
const [configuration, setConfiguration] = useState('custom')
|
|
|
|
useEffect(() => {
|
|
Promise.resolve(getIp()).then((ipData) => setIp(ipData))
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (type === 'default') {
|
|
setTimezone('')
|
|
setLocale('')
|
|
setLatitude('')
|
|
setLongitude('')
|
|
chrome.storage.local.set({
|
|
timezone: '',
|
|
locale: '',
|
|
latitude: '',
|
|
longitude: '',
|
|
})
|
|
} else if (type === 'matchIp') {
|
|
if (ip) {
|
|
setTimezone(ip.timezone)
|
|
setLocale(countryLocales[ip.countryCode].locale)
|
|
setLatitude(`${ip.lat}`)
|
|
setLongitude(`${ip.lon}`)
|
|
chrome.storage.local.set({
|
|
timezone: ip.timezone,
|
|
locale: countryLocales[ip.countryCode].locale,
|
|
latitude: ip.lat,
|
|
longitude: ip.lon,
|
|
})
|
|
}
|
|
} else if (type === 'custom') {
|
|
if (configuration !== 'custom') {
|
|
setTimezone(configurations[configuration].timezone)
|
|
setLocale(configurations[configuration].locale)
|
|
setLatitude(configurations[configuration].lat)
|
|
setLongitude(configurations[configuration].lon)
|
|
chrome.storage.local.set({
|
|
timezone: configurations[configuration].timezone,
|
|
locale: configurations[configuration].locale,
|
|
latitude: configurations[configuration].lat,
|
|
longitude: configurations[configuration].lon,
|
|
})
|
|
}
|
|
}
|
|
}, [configuration, ip, type])
|
|
|
|
const changeType = (e: ChangeEvent<HTMLInputElement>) => {
|
|
// detachDebugger()
|
|
// e.target.value === 'none' && setUserAgent('')
|
|
// chrome.storage.local.set({ type: e.target.value })
|
|
setType(e.target.value)
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: tab === 'system' ? 'block' : 'none',
|
|
}}
|
|
>
|
|
<Box sx={{ fontSize: '20px', mb: '12px' }}>System Data</Box>
|
|
<Flex
|
|
sx={{
|
|
justifyContent: 'space-between',
|
|
mb: '8px',
|
|
}}
|
|
>
|
|
<Label>
|
|
<Radio
|
|
name="systemType"
|
|
value="default"
|
|
onChange={changeType}
|
|
checked={type === 'default'}
|
|
/>
|
|
Default
|
|
</Label>
|
|
<Label>
|
|
<Radio
|
|
name="systemType"
|
|
value="matchIp"
|
|
onChange={changeType}
|
|
checked={type === 'matchIp'}
|
|
/>
|
|
Match IP
|
|
</Label>
|
|
<Label>
|
|
<Radio
|
|
name="systemType"
|
|
value="custom"
|
|
onChange={changeType}
|
|
checked={type === 'custom'}
|
|
/>
|
|
Custom
|
|
</Label>
|
|
</Flex>
|
|
{type === 'custom' && (
|
|
<ConfigurationSelect
|
|
configuration={configuration}
|
|
setConfiguration={setConfiguration}
|
|
/>
|
|
)}
|
|
<LocationInput
|
|
name="timezone"
|
|
title="Timezone"
|
|
value={timezone}
|
|
setValue={setTimezone}
|
|
/>
|
|
<LocationInput
|
|
name="locale"
|
|
title="Locale"
|
|
value={locale}
|
|
setValue={setLocale}
|
|
/>
|
|
<LocationInput
|
|
name="lat"
|
|
title="Latitude"
|
|
value={latitude}
|
|
setValue={setLatitude}
|
|
/>
|
|
<LocationInput
|
|
name="lon"
|
|
title="Longitude"
|
|
value={longitude}
|
|
setValue={setLongitude}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default SystemPage
|