From 2a550d3d591f7502142a45d2c078d111e565fde1 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@protonmail.com>
Date: Sat, 23 Jul 2022 00:47:54 -0400
Subject: [PATCH] Added whitelist url input

---
 src/pages/Popup/Popup.tsx         | 20 ++++++++---
 src/pages/Popup/TabItem.tsx       |  4 ++-
 src/pages/Popup/WhitelistPage.tsx | 58 +++++++++----------------------
 3 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
index f2d954e..d4ad874 100644
--- a/src/pages/Popup/Popup.tsx
+++ b/src/pages/Popup/Popup.tsx
@@ -8,7 +8,7 @@ import UserAgentPage from './UserAgentPage'
 import WhitelistPage from './WhitelistPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('location')
+  const [tab, setTab] = useState('whitelist')
 
   return (
     <ThemeProvider theme={theme}>
@@ -27,10 +27,22 @@ const Popup = () => {
           }}
         >
           {/* <TabItem Icon={Home} onClick={() => setTab(0)} /> */}
-          <TabItem Icon={MapPin} onClick={() => setTab('location')} />
-          <TabItem Icon={Globe} onClick={() => setTab('useragent')} />
+          <TabItem
+            Icon={MapPin}
+            active={tab === 'location'}
+            onClick={() => setTab('location')}
+          />
+          <TabItem
+            Icon={Globe}
+            active={tab === 'useragent'}
+            onClick={() => setTab('useragent')}
+          />
           {/* <TabItem Icon={Command} onClick={() => setTab(3)} /> */}
-          <TabItem Icon={List} onClick={() => setTab('whitelist')} />
+          <TabItem
+            Icon={List}
+            active={tab === 'whitelist'}
+            onClick={() => setTab('whitelist')}
+          />
           <TabItem
             Icon={ExternalLink}
             onClick={() => window.open('https://vytal.io')}
diff --git a/src/pages/Popup/TabItem.tsx b/src/pages/Popup/TabItem.tsx
index ff54809..ef7fbcd 100644
--- a/src/pages/Popup/TabItem.tsx
+++ b/src/pages/Popup/TabItem.tsx
@@ -2,10 +2,11 @@ import React from 'react'
 
 interface IconProps {
   Icon: React.ElementType
+  active?: boolean
   onClick: () => void
 }
 
-const TabItem = ({ Icon, onClick }: IconProps) => {
+const TabItem = ({ Icon, onClick, active }: IconProps) => {
   return (
     <div
       sx={{
@@ -16,6 +17,7 @@ const TabItem = ({ Icon, onClick }: IconProps) => {
         alignItems: 'center',
         justifyContent: 'center',
         color: 'background',
+        backgroundColor: active ? 'primaryDark' : 'primary',
         ':hover': {
           backgroundColor: 'primaryDark',
         },
diff --git a/src/pages/Popup/WhitelistPage.tsx b/src/pages/Popup/WhitelistPage.tsx
index 08bc692..bed1d62 100644
--- a/src/pages/Popup/WhitelistPage.tsx
+++ b/src/pages/Popup/WhitelistPage.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Box } from 'theme-ui'
+import { Box, Label, Input, Flex } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
@@ -8,16 +8,20 @@ import getIP from '../../utils/getIP'
 const WhitelistPage = ({ tab }: any) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
+  const [currentUrl, setCurrentUrl] = useState('')
+
+  const getCurrentUrl = async () => {
+    let queryOptions = { active: true, lastFocusedWindow: true }
+    // `tab` will either be a `tabs.Tab` instance or `undefined`.
+    let [tab] = await chrome.tabs.query(queryOptions)
+    if (tab.url) {
+      let domain = new URL(tab.url)
+      setCurrentUrl(domain.hostname.replace('www.', ''))
+    }
+  }
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
-      result.configuration && setConfiguration(result.configuration)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
+    getCurrentUrl()
   }, [])
 
   return (
@@ -29,39 +33,9 @@ const WhitelistPage = ({ tab }: any) => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>Whitelist</Box>
-      <ConfigurationSelect
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
-      <LocationInput
-        type="timezone"
-        title="Timezone"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="locale"
-        title="Locale"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lat"
-        title="Latitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
-      <LocationInput
-        type="lon"
-        title="Longitude"
-        ip={ip}
-        configuration={configuration}
-        setConfiguration={setConfiguration}
-      />
+      <Flex>
+        <Input name="url" value={currentUrl} />
+      </Flex>
     </Box>
   )
 }