whitelist add functionality and list

src/pages/Popup/WhitelistPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Box, Label, Input, Flex } from 'theme-ui'
+import { Box, Label, Input, Flex, Button } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
@@ -9,21 +9,31 @@ const WhitelistPage = ({ tab }: any) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
   const [currentUrl, setCurrentUrl] = useState('')
+  const [whitelist, setWhitelist] = useState<string[]>([])
 
   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)
+    const queryOptions = { active: true, lastFocusedWindow: true }
+    const [tab] = await chrome.tabs.query(queryOptions)
     if (tab.url) {
-      let domain = new URL(tab.url)
-      setCurrentUrl(domain.hostname.replace('www.', ''))
+      const domain = new URL(tab.url)
+      const hostname = domain.hostname.replace('www.', '')
+      if (hostname.includes('.')) {
+        setCurrentUrl(hostname)
+      }
     }
   }
 
   useEffect(() => {
     getCurrentUrl()
+    chrome.storage.sync.get(['whitelist'], (result) => {
+      result.whitelist && setWhitelist(result.whitelist)
+    })
   }, [])
 
+  useEffect(() => {
+    chrome.storage.sync.set({ whitelist })
+  }, [whitelist])
+
   return (
     <Box
       sx={{
@@ -34,8 +44,24 @@ const WhitelistPage = ({ tab }: any) => {
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>Whitelist</Box>
       <Flex>
-        <Input name="url" value={currentUrl} />
+        <Input name="url" value={currentUrl} spellCheck="false" />
+        <Button
+          onClick={() => {
+            setWhitelist((prevWhitelist) => [...prevWhitelist, currentUrl])
+            // detachDebugger()
+          }}
+          sx={{ height: '28px', flexShrink: 0, ml: '8px' }}
+        >
+          Add
+        </Button>
       </Flex>
+      {whitelist.map((element, index) => {
+        return (
+          <div key={index}>
+            <h2>{element}</h2>
+          </div>
+        )
+      })}
     </Box>
   )
 }