Skip to content

Commit

Permalink
Restructured location page
Browse files Browse the repository at this point in the history
  • Loading branch information
@z0ccc
z0ccc committed Dec 30, 2022
1 parent 0765375 commit d6fff31
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 173 deletions.
6 changes: 3 additions & 3 deletions src/Popup/Components/DebouncedInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
import { Label, Input } from 'theme-ui'
import { Label, Input, Box } from 'theme-ui'
import detachDebugger from '../../utils/detachDebugger'
import debounce from 'lodash.debounce'

Expand Down Expand Up @@ -36,10 +36,10 @@ const DebouncedInput = ({
}

return (
<>
<Box>
<Label htmlFor={name}>{title}</Label>
<Input name={name} value={value} onChange={changeInputText} mb={mb} />
</>
</Box>
)
}

Expand Down
215 changes: 92 additions & 123 deletions src/Popup/Pages/LocationPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState, useEffect, ChangeEvent, useCallback } from 'react'
import { Box, Button, Flex, Label, Radio, Select } from 'theme-ui'
import Page from '../../Components/Page'
import Checkbox from '../../Components/CheckBox'
import DebouncedInput from '../../Components/DebouncedInput'
import detachDebugger from '../../../utils/detachDebugger'
import countryLocales from '../../../utils/countryLocales'
Expand All @@ -15,9 +16,9 @@ interface LocationPageProps {
}

const LocationPage = ({ tab, setTab }: LocationPageProps) => {
const [browserDefault, setBrowserDefault] = useState(true)
const [ipData, setIpData] = useState<ipData>()
const [ipInfo, setIpInfo] = useState('loading...')
const [locationType, setLocationType] = useState('')
const [timezone, setTimezone] = useState('')
const [locale, setLocale] = useState('')
const [lat, setLatitude] = useState('')
Expand All @@ -42,9 +43,19 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {

useEffect(() => {
chrome.storage.local.get(
['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
[
'locationBrowserDefault',
'configuration',
'timezone',
'locale',
'lat',
'lon',
],
(storage) => {
if (storage.locationType === 'matchIp' && ipData) {
storage.configuration && setConfiguration(storage.configuration)
storage.locationBrowserDefault !== undefined &&
setBrowserDefault(storage.locationBrowserDefault)
if (storage.configuration === 'matchIp' && ipData) {
setTimezone(ipData.timezone)
setLocale(countryLocales[ipData.countryCode].locale)
setLatitude(`${ipData.lat}`)
Expand All @@ -55,37 +66,31 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
lat: ipData.lat,
lon: ipData.lon,
})
} else if (storage.locationType === 'custom') {
storage.configuration && setConfiguration(storage.configuration)
} else {
storage.timezone && setTimezone(storage.timezone)
storage.locale && setLocale(storage.locale)
storage.lat && setLatitude(storage.lat)
storage.lon && setLongitude(storage.lon)
}
storage.locationType
? setLocationType(storage.locationType)
: setLocationType('default')
}
)
}, [ipData])

const changeType = (e: ChangeEvent<HTMLInputElement>) => {
const changeBrowserDefault = () => {
detachDebugger()
setLocationType(e.target.value)
chrome.storage.local.set({ locationType: e.target.value })
chrome.storage.local.set({
locationBrowserDefault: !browserDefault,
})
setBrowserDefault(!browserDefault)
}

if (e.target.value === 'default') {
setTimezone('')
setLocale('')
setLatitude('')
setLongitude('')
chrome.storage.local.set({
timezone: '',
locale: '',
lat: '',
lon: '',
})
} else if (e.target.value === 'matchIp') {
const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
detachDebugger()
setConfiguration(e.target.value)
chrome.storage.local.set({
configuration: e.target.value,
})
if (e.target.value === 'matchIp') {
if (ipData) {
setTimezone(ipData.timezone)
setLocale(countryLocales[ipData.countryCode].locale)
Expand All @@ -99,28 +104,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
})
}
} else if (e.target.value === '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,
lat: configurations[configuration].lat,
lon: configurations[configuration].lon,
})
}
}
}

const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
detachDebugger()
setConfiguration(e.target.value)
chrome.storage.local.set({
configuration: e.target.value,
})
if (e.target.value !== 'custom') {
setTimezone('')
setLocale('')
setLatitude('')
setLongitude('')
chrome.storage.local.set({
timezone: '',
locale: '',
lat: '',
lon: '',
})
} else {
setTimezone(configurations[e.target.value].timezone)
setLocale(configurations[e.target.value].locale)
setLatitude(configurations[e.target.value].lat)
Expand All @@ -135,12 +129,10 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
}

const changeInputText = () => {
if (locationType !== 'custom' || configuration !== 'custom') {
if (configuration !== 'custom') {
setConfiguration('custom')
setLocationType('custom')
chrome.storage.local.set({
configuration: 'custom',
locationType: 'custom',
})
}
}
Expand All @@ -155,41 +147,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {

return (
<Page isCurrentTab={tab === 'location'} title={'Location Data'}>
<Flex
<Checkbox
title="Use browser default"
onChange={changeBrowserDefault}
checked={browserDefault}
/>
<Box
sx={{
justifyContent: 'space-between',
mb: '8px',
opacity: browserDefault ? '0.5' : '1',
pointerEvents: browserDefault ? 'none' : 'auto',
}}
>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="default"
onChange={changeType}
checked={locationType === 'default'}
/>
Default
</Label>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="matchIp"
onChange={changeType}
checked={locationType === 'matchIp'}
/>
Match IP
</Label>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="custom"
onChange={changeType}
checked={locationType === 'custom'}
/>
Custom
</Label>
</Flex>
{locationType === 'matchIp' && (
<Flex
sx={{
border: '1px solid',
Expand Down Expand Up @@ -225,54 +193,55 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
}}
/>
</Flex>
)}
{locationType === 'custom' && (
<>
<Label htmlFor="configuration">Configuration</Label>
<Select
name="configuration"
value={configuration}
onChange={changeConfiguration}
mb={'8px'}
>
<option value="custom">Custom</option>
<Label htmlFor="configuration">Configuration</Label>
<Select
name="configuration"
value={configuration}
onChange={changeConfiguration}
mb={'8px'}
>
<option value="matchIp">Match IP Address</option>
<option value="custom">Custom</option>
<optgroup label="Locations">
{Object.keys(configurations).map((key) => (
<option value={key} key={key}>
{configurations[key].name}
</option>
))}
</Select>
</>
)}
<DebouncedInput
name="timezone"
title="Timezone"
value={timezone}
setValue={setTimezone}
onChange={changeInputText}
/>
<DebouncedInput
name="locale"
title="Locale"
value={locale}
setValue={setLocale}
onChange={changeInputText}
/>
<DebouncedInput
name="lat"
title="Latitude"
value={lat}
setValue={setLatitude}
onChange={changeInputText}
/>
<DebouncedInput
name="lon"
title="Longitude"
value={lon}
setValue={setLongitude}
onChange={changeInputText}
mb="12px"
/>
</optgroup>
</Select>
<DebouncedInput
name="timezone"
title="Timezone"
value={timezone}
setValue={setTimezone}
onChange={changeInputText}
/>
<DebouncedInput
name="locale"
title="Locale"
value={locale}
setValue={setLocale}
onChange={changeInputText}
/>
<Flex sx={{ gap: '12px' }}>
<DebouncedInput
name="lat"
title="Latitude"
value={lat}
setValue={setLatitude}
onChange={changeInputText}
/>
<DebouncedInput
name="lon"
title="Longitude"
value={lon}
setValue={setLongitude}
onChange={changeInputText}
mb="12px"
/>
</Flex>
</Box>
<Box
sx={{
color: 'text',
Expand Down
6 changes: 1 addition & 5 deletions src/Popup/Pages/UserAgentPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
}, [])

const changeBrowserDefault = () => {
if (!browserDefault) {
detachDebugger()
}

detachDebugger()
chrome.storage.local.set({
userAgentBrowserDefault: !browserDefault,
})
Expand Down Expand Up @@ -74,7 +71,6 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
onChange={changeBrowserDefault}
checked={browserDefault}
/>

<Box
sx={{
opacity: browserDefault ? '0.5' : '1',
Expand Down
Loading

0 comments on commit d6fff31

Please sign in to comment.