127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
|
|
import userAgents from '../../utils/userAgents'
|
|
import detachDebugger from '../../utils/detachDebugger'
|
|
import UserAgentSelect from './UserAgentSelect'
|
|
|
|
const LocationPage = () => {
|
|
const [type, setType] = useState('desktop')
|
|
const [operatingSystem, setOperatingSystem] = useState('linux')
|
|
const [browser, setBrowser] = useState('')
|
|
const [userAgent, setUserAgent] = useState('')
|
|
|
|
useEffect(() => {
|
|
chrome.storage.sync.get(['type', 'userAgent'], (result) => {
|
|
result.type && setType(result.type)
|
|
result.userAgent && setUserAgent(result.userAgent)
|
|
})
|
|
}, [])
|
|
|
|
const changeType = (e: any) => {
|
|
detachDebugger()
|
|
chrome.storage.sync.set({ type: e.target.value })
|
|
setType(e.target.value)
|
|
}
|
|
|
|
const changeOperatingSystem = (e: any) => {
|
|
// detachDebugger()
|
|
// chrome.storage.sync.set({ userAgent: e.target.value })
|
|
// chrome.storage.sync.set({ type: 'custom' })
|
|
// setUserAgent(e.target.value)
|
|
// setType('custom')
|
|
}
|
|
|
|
const changeUserAgent = (e: any) => {
|
|
detachDebugger()
|
|
chrome.storage.sync.set({ userAgent: e.target.value })
|
|
chrome.storage.sync.set({ type: 'custom' })
|
|
setUserAgent(e.target.value)
|
|
setType('custom')
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
m: '12px',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
|
|
<Flex mt={'12px'} mb={'8px'}>
|
|
<Label>
|
|
<Radio
|
|
name="type"
|
|
value="desktop"
|
|
onChange={changeType}
|
|
checked={type === 'desktop'}
|
|
/>{' '}
|
|
Desktop
|
|
</Label>
|
|
<Label>
|
|
<Radio
|
|
name="type"
|
|
value="mobile"
|
|
onChange={changeType}
|
|
checked={type === 'mobile'}
|
|
/>{' '}
|
|
Mobile
|
|
</Label>
|
|
<Label>
|
|
<Radio
|
|
name="type"
|
|
value="custom"
|
|
onChange={changeType}
|
|
checked={type === 'custom'}
|
|
/>{' '}
|
|
Custom
|
|
</Label>
|
|
</Flex>
|
|
{(type === 'desktop' || type === 'mobile') && (
|
|
<>
|
|
<Label htmlFor="operatingSystem">Operating System</Label>
|
|
<Select
|
|
name="operatingSystem"
|
|
id="operatingSystem"
|
|
value={operatingSystem}
|
|
onChange={changeOperatingSystem}
|
|
mb={'8px'}
|
|
>
|
|
{Object.keys(userAgents[type]).map((key) => (
|
|
<option value={key} key={key}>
|
|
{key}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<Label htmlFor="browser">Browser</Label>
|
|
<Select
|
|
name="browser"
|
|
id="browser"
|
|
// value={operatingSystem}
|
|
// onChange={changeOperatingSystem}
|
|
mb={'8px'}
|
|
>
|
|
{Object.keys(userAgents[type][operatingSystem]).map((key) => (
|
|
<option value={key} key={key}>
|
|
{key}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
{/* <UserAgentSelect
|
|
title="Operating System"
|
|
configuration={operatingSystem}
|
|
setConfiguration={setOperatingSystem}
|
|
/>
|
|
<UserAgentSelect
|
|
title="Browser"
|
|
configuration={browser}
|
|
setConfiguration={setBrowser}
|
|
/> */}
|
|
</>
|
|
)}
|
|
<Label htmlFor="userAgent">User Agent</Label>
|
|
<Input name="userAgent" value={userAgent} onChange={changeUserAgent} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default LocationPage
|