From 85e079465541f5823670cdcd2903ec5d5f754828 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Tue, 12 Jul 2022 17:49:36 -0400 Subject: [PATCH] Finished location page functionality --- src/pages/Popup/ConfigurationSelect.tsx | 49 ++++++++++++ src/pages/Popup/DataInput.tsx | 78 +++++++++---------- src/pages/Popup/IPData.tsx | 35 +++++++++ src/pages/Popup/IpSettings.js | 31 -------- src/pages/Popup/LocationPage.tsx | 67 ++++++++++++---- src/pages/Popup/Main.jsx | 6 +- src/pages/Popup/Popup.tsx | 10 +-- src/pages/Popup/ProfileSelect.jsx | 47 ----------- src/theme.ts | 12 +++ src/utils/attachDebugger.js | 9 --- src/utils/{profiles.js => configurations.ts} | 4 +- .../{countryLocales.js => countryLocales.ts} | 2 +- .../{detachDebugger.js => detachDebugger.ts} | 2 +- src/utils/getIP.ts | 9 +++ 14 files changed, 210 insertions(+), 151 deletions(-) create mode 100644 src/pages/Popup/ConfigurationSelect.tsx create mode 100644 src/pages/Popup/IPData.tsx delete mode 100644 src/pages/Popup/IpSettings.js delete mode 100644 src/pages/Popup/ProfileSelect.jsx rename src/utils/{profiles.js => configurations.ts} (98%) rename src/utils/{countryLocales.js => countryLocales.ts} (99%) rename src/utils/{detachDebugger.js => detachDebugger.ts} (86%) create mode 100644 src/utils/getIP.ts diff --git a/src/pages/Popup/ConfigurationSelect.tsx b/src/pages/Popup/ConfigurationSelect.tsx new file mode 100644 index 0000000..1f18395 --- /dev/null +++ b/src/pages/Popup/ConfigurationSelect.tsx @@ -0,0 +1,49 @@ +import React, { Dispatch, SetStateAction } from 'react' +import { Label, Select } from 'theme-ui' +import configurations from '../../utils/configurations' +import detachDebugger from '../../utils/detachDebugger' + +interface ConfigurationSelectProps { + configuration: string + setConfiguration: Dispatch> +} + +const ConfigurationSelect = ({ + configuration, + setConfiguration, +}: ConfigurationSelectProps) => { + const changeConfiguration = (e: any) => { + detachDebugger() + console.log(e.target.value) + chrome.storage.sync.set({ + configuration: e.target.value, + }) + setConfiguration(e.target.value) + } + + return ( + <> + + + + ) +} + +export default ConfigurationSelect diff --git a/src/pages/Popup/DataInput.tsx b/src/pages/Popup/DataInput.tsx index 6bb8433..4d78ece 100644 --- a/src/pages/Popup/DataInput.tsx +++ b/src/pages/Popup/DataInput.tsx @@ -1,59 +1,59 @@ -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' +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?: string - profile?: string - setProfile?: string + ip: any + configuration: string + setConfiguration: Dispatch> } const DataInput = ({ type, title, ip, - profile, - setProfile, + configuration, + setConfiguration, }: DataInputProps) => { - // const [value, setValue] = useState('') + 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]) + 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) => { - // detachDebugger() - // chrome.storage.sync.set({ [type]: e.target.value }) - // setValue(e.target.value) - // chrome.storage.sync.set({ profile: 'custom' }) - // setProfile('custom') - // } + 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 ( <> - + ) } diff --git a/src/pages/Popup/IPData.tsx b/src/pages/Popup/IPData.tsx new file mode 100644 index 0000000..3b64370 --- /dev/null +++ b/src/pages/Popup/IPData.tsx @@ -0,0 +1,35 @@ +import React, { Dispatch, SetStateAction } from 'react' +import { Flex, Button, Text } from 'theme-ui' +import detachDebugger from '../../utils/detachDebugger' +import getIP from '../../utils/getIP' + +const getFlagEmoji = (countryCode: string) => { + const codePoints = countryCode + .toUpperCase() + .split('') + .map((char) => 127397 + char.charCodeAt(0)) + return String.fromCodePoint(...codePoints) +} + +interface IPDataProps { + ip: any + setIP: Dispatch> +} + +const IPData = ({ ip, setIP }: IPDataProps) => { + return ( + + {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`} + + + ) +} + +export default IPData diff --git a/src/pages/Popup/IpSettings.js b/src/pages/Popup/IpSettings.js deleted file mode 100644 index a0e4c45..0000000 --- a/src/pages/Popup/IpSettings.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import detachDebugger from '../../utils/detachDebugger' - -const getFlagEmoji = (countryCode) => { - const codePoints = countryCode - .toUpperCase() - .split('') - .map((char) => 127397 + char.charCodeAt()) - return String.fromCodePoint(...codePoints) -} - -const IpSettings = ({ ip, getIP, setIP }) => { - return ( -
-
- Current IP: {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`} -
- -
- ) -} - -export default IpSettings diff --git a/src/pages/Popup/LocationPage.tsx b/src/pages/Popup/LocationPage.tsx index b33c3b0..03ed617 100644 --- a/src/pages/Popup/LocationPage.tsx +++ b/src/pages/Popup/LocationPage.tsx @@ -1,27 +1,68 @@ import React, { useState, useEffect } from 'react' -import { Box, Label, Input, Select } from 'theme-ui' +import { Box } from 'theme-ui' import DataInput from './DataInput' +import ConfigurationSelect from './ConfigurationSelect' +import IPData from './IPData' +import getIP from '../../utils/getIP' const LocationPage = () => { + const [ip, setIP] = useState(null) + const [configuration, setConfiguration] = useState('default') + + useEffect(() => { + chrome.storage.sync.get(['configuration', 'ipData'], (result) => { + console.log(result.configuration) + result.configuration && setConfiguration(result.configuration) + if (result.ipData) { + setIP(result.ipData) + } else { + Promise.resolve(getIP()).then((ipData) => setIP(ipData)) + } + }) + }, []) + return ( -
Location - - - - - - -
+ + {configuration === 'match' && } + + + + + ) } diff --git a/src/pages/Popup/Main.jsx b/src/pages/Popup/Main.jsx index 3953767..297e384 100644 --- a/src/pages/Popup/Main.jsx +++ b/src/pages/Popup/Main.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react' import Navbar from './Navbar' -import IpSettings from './IpSettings' -import ProfileSelect from './ProfileSelect' +import IPData from './IPData' +import ProfileSelect from './ConfigurationSelect' import DebugSettings from './DataInput' import UserAgentSettings from './UserAgentSettings' @@ -36,7 +36,7 @@ const Popup = () => { padding: '12px', }} > - + { - const [ip, setIP] = useState(null) - const [profile, setProfile] = useState('default') + // const [ip, setIP] = useState(null) + // const [profile, setProfile] = useState('default') - useEffect(() => {}, []) + // useEffect(() => {}, []) return ( { - const changeProfile = (e) => { - detachDebugger() - chrome.storage.sync.set({ - profile: e.target.value, - }) - setProfile(e.target.value) - } - - return ( -
- - -
- ) -} - -export default ProfileSelect diff --git a/src/theme.ts b/src/theme.ts index e266a84..c62c259 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -37,4 +37,16 @@ export const theme: Theme = { }, }, }, + buttons: { + primary: { + color: 'background', + bg: 'primary', + py: '3px', + px: '8px', + cursor: 'pointer', + '&:hover': { + bg: 'primaryDark', + }, + }, + }, } diff --git a/src/utils/attachDebugger.js b/src/utils/attachDebugger.js index 6d5626f..53f8c0c 100644 --- a/src/utils/attachDebugger.js +++ b/src/utils/attachDebugger.js @@ -22,15 +22,6 @@ const attachDebugger = (tabId) => { ) { chrome.debugger.attach({ tabId: tabId }, '1.3', () => { if (!chrome.runtime.lastError) { - chrome.debugger.sendCommand( - { tabId: tabId }, - 'Page.setAdBlockingEnabled', - { enabled: true }, - (res) => { - console.log(res) - } - ) - // chrome.debugger.sendCommand( // { tabId: tabId }, // 'Target.autoAttachRelated', diff --git a/src/utils/profiles.js b/src/utils/configurations.ts similarity index 98% rename from src/utils/profiles.js rename to src/utils/configurations.ts index 235715e..24e1324 100644 --- a/src/utils/profiles.js +++ b/src/utils/configurations.ts @@ -1,4 +1,4 @@ -const profiles = { +const configurations: any = { baghdad: { name: 'Baghdad', timezone: 'Asia/Baghdad', @@ -233,4 +233,4 @@ const profiles = { }, } -export default profiles +export default configurations diff --git a/src/utils/countryLocales.js b/src/utils/countryLocales.ts similarity index 99% rename from src/utils/countryLocales.js rename to src/utils/countryLocales.ts index b8b78c7..6e66f94 100644 --- a/src/utils/countryLocales.js +++ b/src/utils/countryLocales.ts @@ -1,4 +1,4 @@ -const countryLocales = { +const countryLocales: any = { AD: { locale: 'ca-AD' }, AE: { locale: 'ar-AE' }, AF: { locale: 'fa-AF' }, diff --git a/src/utils/detachDebugger.js b/src/utils/detachDebugger.ts similarity index 86% rename from src/utils/detachDebugger.js rename to src/utils/detachDebugger.ts index d62f743..75cf5ba 100644 --- a/src/utils/detachDebugger.js +++ b/src/utils/detachDebugger.ts @@ -1,4 +1,4 @@ -const detachDebugger = (attach) => { +const detachDebugger = () => { chrome.debugger.getTargets((tabs) => { for (const tab in tabs) { if (tabs[tab].attached && tabs[tab].tabId) { diff --git a/src/utils/getIP.ts b/src/utils/getIP.ts new file mode 100644 index 0000000..2b57d6e --- /dev/null +++ b/src/utils/getIP.ts @@ -0,0 +1,9 @@ +const getIP = () => + fetch('http://ip-api.com/json/') + .then((response) => response.json()) + .then((ipData) => { + chrome.storage.sync.set({ ipData }) + return ipData + }) + +export default getIP