From 5cc3fee217200ab4bd9c1dfc7280c5bd981524f3 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Sun, 26 Nov 2023 13:25:27 +1100
Subject: [PATCH] Refactor React to use routing

---
 interface/package.json                      |  3 ++-
 interface/src/{App.tsx => SettingsPage.tsx} | 20 +++++--------------
 interface/src/main.tsx                      | 22 +++++++++++++--------
 public/{popup => interface}/popup.css       |  0
 public/manifest.json                        |  2 +-
 public/popup/info.html                      | 15 --------------
 src/SEQTA.js                                |  4 ++--
 7 files changed, 24 insertions(+), 42 deletions(-)
 rename interface/src/{App.tsx => SettingsPage.tsx} (67%)
 rename public/{popup => interface}/popup.css (100%)
 delete mode 100644 public/popup/info.html

diff --git a/interface/package.json b/interface/package.json
index d49a90a9..b54a223e 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -14,7 +14,8 @@
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^2.2.24",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/interface/src/App.tsx b/interface/src/SettingsPage.tsx
similarity index 67%
rename from interface/src/App.tsx
rename to interface/src/SettingsPage.tsx
index 3499d785..ee3f1f95 100644
--- a/interface/src/App.tsx
+++ b/interface/src/SettingsPage.tsx
@@ -1,26 +1,16 @@
-import React, { useEffect } from 'react';
 import TabbedContainer from './components/TabbedContainer';
 import Settings from './pages/Settings';
 import logo from './assets/betterseqta-dark-full.png';
 import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
-import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
-//import About from './pages/About';
-//import About from './pages/About';
 
-const App: React.FC = () => {
-  const { standalone, setStandalone } = useSettingsContext();
-
-  useEffect(() => {
-    // if body has class standalone
-    if (document.body.classList.contains('standalone')) {
-      // set settingsContext standalone to true
-      setStandalone(true);
-    }
-  })
+interface SettingsPage {
+  standalone: boolean;
+}
 
+const SettingsPage = ({ standalone }: SettingsPage) => {
   const tabs = [
     {
       title: 'Settings',
@@ -48,4 +38,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
\ No newline at end of file
+export default SettingsPage;
\ No newline at end of file
diff --git a/interface/src/main.tsx b/interface/src/main.tsx
index e932a711..1e38f4da 100644
--- a/interface/src/main.tsx
+++ b/interface/src/main.tsx
@@ -1,11 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.js'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter, Routes, Route } from 'react-router-dom';
+import './index.css';
 import { SettingsContextProvider } from './SettingsContext.js';
-
-const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
-
+import SettingsPage from './SettingsPage.js';
 const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
@@ -19,10 +17,18 @@ style.innerHTML = `
 }`;
 document.head.appendChild(style);
 
+
+const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
+
 root.render(
   <React.StrictMode>
     <SettingsContextProvider>
-      <App />
+      <HashRouter>
+        <Routes>
+          <Route path="/settings" element={<SettingsPage standalone={true} />} />
+          <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
+        </Routes>
+      </HashRouter>
     </SettingsContextProvider>
   </React.StrictMode>,
 );
\ No newline at end of file
diff --git a/public/popup/popup.css b/public/interface/popup.css
similarity index 100%
rename from public/popup/popup.css
rename to public/interface/popup.css
diff --git a/public/manifest.json b/public/manifest.json
index 8a631baf..540df20e 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -10,7 +10,7 @@
   },
   "action": {
     "browser_style": true,
-    "default_popup": "popup/info.html",
+    "default_popup": "interface/index.html#settings",
     "default_icon": {
       "32": "icons/icon-32.png",
       "48": "icons/icon-48.png",
diff --git a/public/popup/info.html b/public/popup/info.html
deleted file mode 100644
index 824b448a..00000000
--- a/public/popup/info.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/client/public/client.js"></script>
-    <link rel="stylesheet" href="/client/rsc/css/index.css">
-  </head>
-  <body class="standalone">
-    <div id="ExtensionPopup"></div>
-    
-  </body>
-</html>
diff --git a/src/SEQTA.js b/src/SEQTA.js
index 8b66bf01..311e360e 100644
--- a/src/SEQTA.js
+++ b/src/SEQTA.js
@@ -820,7 +820,7 @@ export function closeSettings() {
 
 function addExtensionSettings() {
   const link = document.createElement('link');
-  link.href = chrome.runtime.getURL('popup/popup.css');
+  link.href = chrome.runtime.getURL('interface/popup.css');
   link.type = 'text/css';
   link.rel = 'stylesheet';
   document.querySelector('html').appendChild(link);
@@ -831,7 +831,7 @@ function addExtensionSettings() {
   document.body.appendChild(extensionPopup);
 
   const extensionIframe = document.createElement('iframe');
-  extensionIframe.src = chrome.runtime.getURL('interface/index.html');
+  extensionIframe.src = `${chrome.runtime.getURL('interface/index.html')}#settings/embedded`;
   extensionIframe.id = 'ExtensionIframe';
   extensionIframe.allowTransparency = true;
   extensionIframe.style.width = '384px';