fix: Routing fixes so that the ext can be displayed accordingly

gusmagnago · May 10, 2024 · b056b00 · b056b00
1 parent 191c0ab
commit b056b00
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 181 deletions.
diff --git a/dist/assets/index-D6VxyCy7.js b/dist/assets/index-D6VxyCy7.js
diff --git a/dist/assets/index-DRvGgHSr.js b/dist/assets/index-DRvGgHSr.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Device Toggle Chrome Extension</title>
-    <script type="module" crossorigin src="/assets/index-D6VxyCy7.js"></script>
+    <script type="module" crossorigin src="/assets/index-DRvGgHSr.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Dt8Y0VaS.css">
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,94 @@
-import { Routes, Route } from 'react-router-dom';
-import PrivacyPolicy from './pages/privacy-policy';
-import ExtensionView from './pages/ExtensionView';
+import { useState } from 'react';
+import { Box, Link, Switch, Typography } from '@mui/material';
 
 function App() {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [hasError, setHasError] = useState<boolean>(false);
+
+  const emulateDevice = async () => {
+    try {
+      const queryOptions = { active: true, currentWindow: true };
+      const [tab] = await chrome.tabs.query(queryOptions);
+
+      if (tab && typeof tab.id === 'number') {
+        if (!isMobile) {
+          await chrome.debugger.attach({ tabId: tab.id }, '1.3');
+          await chrome.debugger.sendCommand(
+            { tabId: tab.id },
+            'Emulation.setDeviceMetricsOverride',
+            {
+              width: 375,
+              height: 812,
+              deviceScaleFactor: 3,
+              mobile: true,
+              fitWindow: true,
+            }
+          );
+          setIsMobile(true);
+        } else {
+          await chrome.debugger.sendCommand(
+            { tabId: tab.id },
+            'Emulation.clearDeviceMetricsOverride',
+            {}
+          );
+          setIsMobile(false);
+          await chrome.debugger.detach({ tabId: tab.id });
+        }
+      } else {
+        throw new Error('Could not proceed, try again later');
+      }
+    } catch (error) {
+      setHasError(true);
+      console.error('Erro emulateDevice:', error);
+    }
+  };
+
   return (
-    <Routes>
-      <Route path='/' element={<ExtensionView />} />
-      <Route path='/privacy-policy' element={<PrivacyPolicy />} />
-    </Routes>
+    <Box width={160} height='auto' p={2}>
+      <div>
+        <Typography variant='h4'>Toggle Device</Typography>
+      </div>
+      <Box display='flex' flexDirection='column' alignItems='center'>
+        <Switch
+          checked={isMobile}
+          name='toggleDevice'
+          onChange={emulateDevice}
+        />
+        {hasError ? (
+          <Typography variant='caption' color='#fe2c96'>
+            Something went wrong, please try again later
+          </Typography>
+        ) : null}
+        <Box display='flex' flexDirection='column' alignItems='center' gap={1}>
+          <Typography variant='body1' textAlign='left'>
+            Switch between Desktop and Mobile view
+          </Typography>
+          <Box display='flex' flexDirection='column' alignItems='center'>
+            <Typography variant='caption' align='left' fontSize={10}>
+              Please read our
+              <Link
+                href='https://github.com/gusmagnago/device-toggle-chrome-ext/blob/main/privacyPolicy.md'
+                target='_blank'
+                px={1}
+              >
+                Privacy Policy
+              </Link>
+              to learn why we access your tab ID.
+            </Typography>
+            <Typography variant='overline'>
+              Find me
+              <Link
+                href='https://github.com/gusmagnago'
+                target='_blank'
+                px={0.5}
+              >
+                here
+              </Link>
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 }
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { HashRouter as Router } from 'react-router-dom';
-
 import { ThemeProvider } from '@mui/material/styles';
 import App from './App.tsx';
 import './index.css';
@@ -10,9 +8,7 @@ import theme from './theme.ts';
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
-      <Router>
-        <App />
-      </Router>
+      <App />
     </ThemeProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/ExtensionView.tsx b/src/pages/ExtensionView.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Box, Link, Switch, Typography } from '@mui/material';
 
+
+// Page not in use
 function ExtensionView() {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);

diff --git a/src/pages/privacy-policy/index.tsx → src/pages/privacy-policy/PrivacyPolicy.tsx b/src/pages/privacy-policy/index.tsx → src/pages/privacy-policy/PrivacyPolicy.tsx
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
 
 import { Container } from '@mui/material';
 
+// Page not in use
 function PrivacyPolicy() {
   const [policyText, setPolicyText] = useState('');