page component

src/Popup/Components/Page.tsx

@@ -0,0 +1,24 @@
+import { Box } from 'theme-ui'
+
+interface PageProps {
+  isCurrentTab: boolean
+  title: string
+  children: React.ReactNode
+}
+
+const Page = ({ isCurrentTab, title, children }: PageProps) => {
+  return (
+    <Box
+      sx={{
+        display: isCurrentTab ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
+        {title}
+      </Box>
+      {children}
+    </Box>
+  )
+}
+
+export default Page

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,5 +1,6 @@
 // import { useState, useEffect } from 'react'
-import { Box } from 'theme-ui'
+// import { Box } from 'theme-ui'
+import Page from '../../Components/Page'
 
 interface SystemPageProps {
   tab: string
@@ -21,15 +22,9 @@ const AutofillPage = ({ tab }: SystemPageProps) => {
   // }, [])
 
   return (
-    <Box
-      sx={{
-        display: tab === 'autofill' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        Autofill Options
-      </Box>
-    </Box>
+    <Page isCurrentTab={tab === 'autofill'} title={'Autofill Options'}>
+      hello
+    </Page>
   )
 }
 

src/Popup/Pages/CurrentPage/index.tsx

@@ -1,4 +1,5 @@
-import { Box } from 'theme-ui'
+// import { Box } from 'theme-ui'
+import Page from '../../Components/Page'
 
 interface CurrentPageProps {
   tab: string
@@ -6,15 +7,9 @@ interface CurrentPageProps {
 
 const CurrentPage = ({ tab }: CurrentPageProps) => {
   return (
-    <Box
-      sx={{
-        display: tab === 'current' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        Current Info
-      </Box>
-    </Box>
+    <Page isCurrentTab={tab === 'current'} title={'Current Info'}>
+      hello
+    </Page>
   )
 }
 

src/Popup/Pages/OtherOptionsPage/index.tsx

@@ -1,8 +1,5 @@
-import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Label, Radio, Flex, Input, Select, Divider } from 'theme-ui'
-import userAgents from '../../../utils/userAgents'
-import detachDebugger from '../../../utils/detachDebugger'
 import SettingsCheckBox from '../SettingsPage/SettingsCheckBox'
+import Page from '../../Components/Page'
 
 interface OtherOptionsPageProps {
   tab: string
@@ -10,14 +7,7 @@ interface OtherOptionsPageProps {
 
 const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => {
   return (
-    <Box
-      sx={{
-        display: tab === 'otherOptions' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        Other Options
-      </Box>
+    <Page isCurrentTab={tab === 'otherOptions'} title={'Other Options'}>
       <SettingsCheckBox title={'Network Prediction Enabled'} />
       <SettingsCheckBox title={'Alternate Error Pages Enabled'} />
       <SettingsCheckBox title={'Safe Browsing Reporting Enabled'} />
@@ -27,7 +17,7 @@ const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => {
       <SettingsCheckBox title={'Hyperlink Auditing Enabled'} />
       <SettingsCheckBox title={'Referrers Enabled'} />
       <SettingsCheckBox title={'Third Party Cookies Allowed'} />
-    </Box>
+    </Page>
   )
 }
 

src/Popup/Pages/SettingsPage/index.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect } from 'react'
-import { Box, Label, Select } from 'theme-ui'
-import setWebRtcPolicy from '../WebRtcPage/handleWebRtcPolicy'
+import { Label, Select } from 'theme-ui'
+import Page from '../../Components/Page'
 import SettingsCheckBox from './SettingsCheckBox'
 
 interface SystemPageProps {
@@ -8,38 +7,8 @@ interface SystemPageProps {
 }
 
 const SettingsPage = ({ tab }: SystemPageProps) => {
-  const [isWebRtcDisabled, setIsWebRtcDisabled] = useState(false)
-
-  useEffect(() => {
-    chrome.storage.local.get(['isWebRtcDisabled'], (storage) => {
-      storage.isWebRtcDisabled && setIsWebRtcDisabled(storage.isWebRtcDisabled)
-    })
-  }, [])
-
-  chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function (
-    details
-  ) {
-    if (details.value === 'disable_non_proxied_udp') {
-      setIsWebRtcDisabled(true)
-    } else {
-      setIsWebRtcDisabled(false)
-    }
-  })
-
   return (
-    <Box
-      sx={{
-        display: tab === 'settings' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        Settings
-      </Box>
-      {/* <SettingsCheckBox
-        title={'Disable WebRTC'}
-        onChange={setWebRtcPolicy}
-        checked={isWebRtcDisabled}
-      /> */}
+    <Page isCurrentTab={tab === 'settings'} title={'Settings'}>
       <SettingsCheckBox title={'Disable Address Autofill'} />
       <SettingsCheckBox title={'Dark Mode'} />
       <Label htmlFor="configuration">Language</Label>
@@ -63,7 +32,7 @@ const SettingsPage = ({ tab }: SystemPageProps) => {
             </option>
           ))} */}
       </Select>
-    </Box>
+    </Page>
   )
 }
 

src/Popup/Pages/SystemPage/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Flex, Label, Radio, Select } from 'theme-ui'
+import { Flex, Label, Radio, Select } from 'theme-ui'
+import Page from '../../Components/Page'
 import DebouncedInput from '../../Components/DebouncedInput'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
@@ -113,14 +114,7 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
   }
 
   return (
-    <Box
-      sx={{
-        display: tab === 'system' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        System Data
-      </Box>
+    <Page isCurrentTab={tab === 'system'} title={'System Data'}>
       <Flex
         sx={{
           justifyContent: 'space-between',
@@ -201,7 +195,7 @@ const SystemPage = ({ tab, ipData }: SystemPageProps) => {
         setValue={setLongitude}
         onChange={changeInputText}
       />
-    </Box>
+    </Page>
   )
 }
 

src/Popup/Pages/UserAgentPage/index.tsx

@@ -3,6 +3,7 @@ import { Box, Label, Radio, Flex, Select } from 'theme-ui'
 import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
+import Page from '../../Components/Page'
 
 interface UserAgentPageProps {
   tab: string
@@ -74,14 +75,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   }
 
   return (
-    <Box
-      sx={{
-        display: tab === 'userAgent' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        User Agent
-      </Box>
+    <Page isCurrentTab={tab === 'userAgent'} title={'User Agent'}>
       <Flex
         sx={{
           justifyContent: 'space-between',
@@ -159,7 +153,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         setValue={setUserAgent}
         onChange={changeUserAgent}
       />
-    </Box>
+    </Page>
   )
 }
 

src/Popup/Pages/WebRtcPage/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Box } from 'theme-ui'
+import Page from '../../Components/Page'
 import handleWebRtcPolicy from './handleWebRtcPolicy'
 import RadioButton from './RadioButton'
 
@@ -22,14 +22,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
   }
 
   return (
-    <Box
-      sx={{
-        display: tab === 'webRtc' ? 'block' : 'none',
-      }}
-    >
-      <Box sx={{ fontSize: '21px', mb: '12px', fontWeight: '600' }}>
-        WebRTC Policy
-      </Box>
+    <Page isCurrentTab={tab === 'webRtc'} title={'WebRTC Policy'}>
       <RadioButton
         value={'default'}
         name={'Default'}
@@ -66,7 +59,7 @@ const WebRtcPage = ({ tab }: SystemPageProps) => {
         webRtcPolicy={webRtcPolicy}
         onChange={changeRadioValue}
       />
-    </Box>
+    </Page>
   )
 }