New tab navigation setup

src/pages/Popup/LocationPage.tsx

@@ -5,7 +5,7 @@ import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
 import getIP from '../../utils/getIP'
 
-const LocationPage = () => {
+const LocationPage = ({ tab }: any) => {
   const [ip, setIP] = useState(null)
   const [configuration, setConfiguration] = useState('default')
 
@@ -25,6 +25,7 @@ const LocationPage = () => {
       sx={{
         m: '12px',
         width: '100%',
+        display: tab === 'location' ? 'block' : 'none',
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>

src/pages/Popup/Page.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import HomePage from './HomePage'
-import LocationPage from './LocationPage'
-import UserAgentPage from './UserAgentPage'
-
-interface PageProps {
-  tab: number
-}
-
-const Page = ({ tab }: PageProps) => {
-  switch (tab) {
-    case 0:
-      return <HomePage />
-    case 1:
-      return <LocationPage />
-    case 2:
-      return <UserAgentPage />
-    case 3:
-      return <HomePage />
-    case 4:
-      return <HomePage />
-    default:
-      return <HomePage />
-  }
-}
-
-export default Page

src/pages/Popup/Popup.tsx

@@ -3,10 +3,12 @@ import { ThemeProvider, Flex } from 'theme-ui'
 import { theme } from '../../theme'
 import { Home, MapPin, Globe, Command, List, ExternalLink } from 'react-feather'
 import TabItem from './TabItem'
-import Page from './Page'
+import LocationPage from './LocationPage'
+import UserAgentPage from './UserAgentPage'
+import WhitelistPage from './WhitelistPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState(1)
+  const [tab, setTab] = useState('location')
 
   return (
     <ThemeProvider theme={theme}>
@@ -25,16 +27,18 @@ const Popup = () => {
           }}
         >
           {/* <TabItem Icon={Home} onClick={() => setTab(0)} /> */}
-          <TabItem Icon={MapPin} onClick={() => setTab(1)} />
-          <TabItem Icon={Globe} onClick={() => setTab(2)} />
+          <TabItem Icon={MapPin} onClick={() => setTab('location')} />
+          <TabItem Icon={Globe} onClick={() => setTab('useragent')} />
           {/* <TabItem Icon={Command} onClick={() => setTab(3)} /> */}
-          <TabItem Icon={List} onClick={() => setTab(3)} />
+          <TabItem Icon={List} onClick={() => setTab('whitelist')} />
           <TabItem
             Icon={ExternalLink}
             onClick={() => window.open('https://vytal.io')}
           />
         </Flex>
-        <Page tab={tab} />
+        <LocationPage tab={tab} />
+        <UserAgentPage tab={tab} />
+        <WhitelistPage tab={tab} />
       </Flex>
     </ThemeProvider>
   )

src/pages/Popup/UserAgentPage.tsx

@@ -3,7 +3,7 @@ import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
 import userAgents from '../../utils/userAgents'
 import detachDebugger from '../../utils/detachDebugger'
 
-const LocationPage = () => {
+const UserAgentPage = ({ tab }: any) => {
   const [type, setType] = useState('None')
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
@@ -62,6 +62,7 @@ const LocationPage = () => {
       sx={{
         m: '12px',
         width: '100%',
+        display: tab === 'useragent' ? 'block' : 'none',
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
@@ -141,4 +142,4 @@ const LocationPage = () => {
   )
 }
 
-export default LocationPage
+export default UserAgentPage

src/pages/Popup/WhitelistPage.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react'
+import { Box } from 'theme-ui'
+import LocationInput from './LocationInput'
+import ConfigurationSelect from './ConfigurationSelect'
+import IPData from './IPData'
+import getIP from '../../utils/getIP'
+
+const WhitelistPage = ({ tab }: any) => {
+  const [ip, setIP] = useState(null)
+  const [configuration, setConfiguration] = useState('default')
+
+  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))
+      }
+    })
+  }, [])
+
+  return (
+    <Box
+      sx={{
+        m: '12px',
+        width: '100%',
+        display: tab === 'whitelist' ? 'block' : 'none',
+      }}
+    >
+      <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}
+      />
+    </Box>
+  )
+}
+
+export default WhitelistPage