me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DataInput component

Browse source
This commit is contained in:
z0ccc 2022-07-11 23:08:00 -04:00
parent b59ee27438
commit d333a961f3
4 changed files with 67 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/pages/Popup/DataInput.tsx Normal file
View file

@ -0,0 +1,61 @@
import React, { useState, useEffect } from 'react'
// import profiles from '../../utils/profiles'
// import countryLocales from '../../utils/countryLocales'
// import detachDebugger from '../../utils/detachDebugger'
import { Box, Label, Input, Select } from 'theme-ui'
interface DataInputProps {
type: string
title: string
ip?: string
profile?: string
setProfile?: string
}
const DataInput = ({
type,
title,
ip,
profile,
setProfile,
}: DataInputProps) => {
// const [value, setValue] = useState('')
// useEffect(() => {
// if (profile === 'none') {
// setValue('')
// chrome.storage.sync.set({ [type]: '' })
// } else if (profile === 'match') {
// if (ip) {
// const ipTypeValue =
// type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
// setValue(ipTypeValue)
// chrome.storage.sync.set({ [type]: ipTypeValue })
// }
// } else if (profile === 'custom') {
// chrome.storage.sync.get([type], (result) => {
// result[type] && setValue(result[type])
// })
// } else if (profile !== 'default') {
// setValue(profiles[profile][type])
// chrome.storage.sync.set({ [type]: profiles[profile][type] })
// }
// }, [ip, profile, type, value])
// const changeTextValue = (e) => {
// detachDebugger()
// chrome.storage.sync.set({ [type]: e.target.value })
// setValue(e.target.value)
// chrome.storage.sync.set({ profile: 'custom' })
// setProfile('custom')
// }
return (
<>
<Label htmlFor={type}>{title}</Label>
<Input name={type} />
</>
)
}
export default DataInput

59
src/pages/Popup/DebugSettings.js
View file

@ -1,59 +0,0 @@
import React, { useState, useEffect } from 'react'
import profiles from '../../utils/profiles'
import countryLocales from '../../utils/countryLocales'
import detachDebugger from '../../utils/detachDebugger'
const DebugSettings = ({ type, title, ip, profile, setProfile }) => {
const [value, setValue] = useState('')
useEffect(() => {
if (profile === 'none') {
setValue('')
chrome.storage.sync.set({ [type]: '' })
} else if (profile === 'match') {
if (ip) {
const ipTypeValue =
type === 'locale' ? countryLocales[ip.countryCode].locale : ip[type]
setValue(ipTypeValue)
chrome.storage.sync.set({ [type]: ipTypeValue })
}
} else if (profile === 'custom') {
chrome.storage.sync.get([type], (result) => {
result[type] && setValue(result[type])
})
} else if (profile !== 'default') {
setValue(profiles[profile][type])
chrome.storage.sync.set({ [type]: profiles[profile][type] })
}
}, [ip, profile, type, value])
const changeTextValue = (e) => {
detachDebugger()
chrome.storage.sync.set({ [type]: e.target.value })
setValue(e.target.value)
chrome.storage.sync.set({ profile: 'custom' })
setProfile('custom')
}
return (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
margin: '12px 0 0 0',
}}
>
<input
type="text"
value={value}
onChange={changeTextValue}
style={{
width: '206px',
}}
/>
<label>{title}</label>
</div>
)
}
export default DebugSettings

13
src/pages/Popup/LocationPage.tsx
View file

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { Box, Label, Input, Select } from 'theme-ui'
import DataInput from './DataInput'
const LocationPage = () => {
return (
@ -16,14 +17,10 @@ const LocationPage = () => {
<option>Custom</option>
<option>Match IP</option>
</Select>
<Label htmlFor="timezone">Timezone</Label>
<Input name="timezone" id="username" />
<Label htmlFor="locale">Locale</Label>
<Input name="locale" id="locale" />
<Label htmlFor="latitude">Latitude</Label>
<Input name="latitude" id="latitude" />
<Label htmlFor="longitude">Longitude</Label>
<Input name="longitude" id="longitude" />
<DataInput type="timezone" title="Timezone" />
<DataInput type="locale" title="Locale" />
<DataInput type="lat" title="Latitude" />
<DataInput type="lon" title="Longitude" />
</div>
)
}

2
src/pages/Popup/Main.jsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import Navbar from './Navbar'
import IpSettings from './IpSettings'
import ProfileSelect from './ProfileSelect'
import DebugSettings from './DebugSettings'
import DebugSettings from './DataInput'
import UserAgentSettings from './UserAgentSettings'
const getIP = () =>