From 445e0b0acd55e26714bfa13cef8bffceb5837690 Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <motortruck1221@protonmail.com>
Date: Sat, 16 Mar 2024 00:03:34 -0600
Subject: [PATCH] Fix most of the bare client issue

---
 src/pages/Settings/Proxy.tsx             |  6 +-
 src/pages/Settings/transportDropdown.tsx | 76 ++++++++++++++++++++++++
 src/routes.tsx                           |  2 +
 src/util/SWHelper.js                     |  3 +
 src/util/transports.ts                   | 35 ++++++++---
 5 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Settings/transportDropdown.tsx

diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index 451eb0b..5e8b904 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -4,8 +4,8 @@ import Dropdown from "./Dropdown";
 import BareInput from "./BareInput";
 import WispInput from "./WispInput";
 import ProxyInput from "./ProxyInput";
-import { changeTransport } from "../../util/transports";
 import { useTranslation } from "react-i18next";
+import TransportDropdown from "./transportDropdown";
 
 const Proxy = ({ id, active }) => {
   const { t } = useTranslation();
@@ -118,10 +118,10 @@ const Proxy = ({ id, active }) => {
           <div className="text-md p-4 font-bold text-input-text">
             Select the transport to use
           </div>
-          <Dropdown
+          <TransportDropdown
             storageKey="transport"
             options={transports}
-            refresh={true}
+            refresh={false}
           />
         </div>
       </motion.div>
diff --git a/src/pages/Settings/transportDropdown.tsx b/src/pages/Settings/transportDropdown.tsx
new file mode 100644
index 0000000..34e80e3
--- /dev/null
+++ b/src/pages/Settings/transportDropdown.tsx
@@ -0,0 +1,76 @@
+import { FaAngleDown } from "react-icons/fa";
+import { useState, useEffect } from "preact/hooks"
+import { changeTransport } from "../../util/transports.ts";
+const wispUrl = localStorage.getItem("wispUrl") || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
+
+interface Option {
+  id: string;
+  label: string; // Translations CAN be passed
+}
+
+const TransportDropdown = ({
+  storageKey,
+  options,
+  refresh
+}: {
+  storageKey: string;
+  options: Option[];
+  refresh: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [choice, setChoice] = useState(() => {
+    return localStorage.getItem(storageKey) || options[0]?.id || "";
+  });
+
+  // update on localstorage change
+  useEffect(() => {
+    setChoice(localStorage.getItem(storageKey) || options[0]?.id || "");
+  }, [storageKey, options]);
+
+  return (
+    <div className="relative text-center">
+      <div
+        className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
+          isOpen ? "rounded-t-2xl" : "rounded-2xl"
+        }`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex h-full w-full select-none flex-row items-center">
+          <div className="h-full w-1/4"></div>
+          <div className="flex w-2/4 flex-col items-center text-input-text">
+            {options.find((o) => o.id === choice)?.label}
+          </div>
+          <div className="flex w-1/4 flex-col items-center text-input-text">
+            <FaAngleDown />
+          </div>
+        </div>
+        {isOpen && (
+          <div className="absolute top-full w-full">
+            {options.map((option, index) => (
+              <div
+                key={option.id}
+                className={`border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
+                  index === options.length - 1 ? "rounded-b-2xl" : ""
+                }`}
+                onClick={() => {
+                  setIsOpen(false);
+                  setChoice(option.id);
+                  localStorage.setItem(storageKey, option.id);
+                  changeTransport(option.id, wispUrl);
+                  if (refresh === true) {
+                    window.location.reload();
+                  }
+                }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransportDropdown;
diff --git a/src/routes.tsx b/src/routes.tsx
index df9bc6c..da89116 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -7,6 +7,7 @@ import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
 import { Faq } from "./pages/Faq";
+import { setTransport } from "./util/transports";
 
 import "./style.css";
 import "./i18n";
@@ -20,6 +21,7 @@ export default function Routes() {
         })
         .then(() => {
           console.log("Service worker registered successfully");
+          setTransport();
         });
     });
   }
diff --git a/src/util/SWHelper.js b/src/util/SWHelper.js
index b79b849..651f16a 100644
--- a/src/util/SWHelper.js
+++ b/src/util/SWHelper.js
@@ -16,4 +16,7 @@ function uninstallServiceWorkers() {
   });
 }
 
+function reInitServiceWorkers() {
+}
+
 export { updateServiceWorkers, uninstallServiceWorkers };
diff --git a/src/util/transports.ts b/src/util/transports.ts
index b58302d..48cf10b 100644
--- a/src/util/transports.ts
+++ b/src/util/transports.ts
@@ -2,6 +2,7 @@ import {
   SetTransport,
   registerRemoteListener
 } from "@mercuryworkshop/bare-mux";
+//import { isIOS } from "./IosDetector";
 
 function changeTransport(transport: string, wispUrl: string) {
   switch (transport) {
@@ -15,7 +16,7 @@ function changeTransport(transport: string, wispUrl: string) {
       console.log("Setting transport to Libcurl");
       SetTransport("CurlMod.LibcurlClient", {
         wisp: wispUrl,
-        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.2/libcurl.wasm"
+        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.3/libcurl.wasm"
       });
       break;
     case "bare":
@@ -29,7 +30,7 @@ function changeTransport(transport: string, wispUrl: string) {
     default:
       SetTransport("CurlMod.LibcurlClient", {
         wisp: wispUrl,
-        wasm: "/libcurl.wasm"
+        wasm: "https://cdn.jsdelivr.net/npm/libcurl.js@v0.5.3/libcurl.wasm"
       });
       break;
   }
@@ -45,10 +46,30 @@ const wispUrl =
   "/wisp/";
 registerRemoteListener(navigator.serviceWorker.controller!);
 
+//if (isIOS) {
+//  console.log("iOS device detected. Bare will be used.");
+//  changeTransport(
+//    localStorage.getItem("transport") || "libcurl",
+//    localStorage.getItem("wispUrl") || wispUrl
+//  );
+//} else {
+//  changeTransport(
+//   localStorage.getItem("transport") || "bare",
+//   localStorage.getItem("wispUrl") || wispUrl
+//  );
+//}
 
-changeTransport(
-  localStorage.getItem("transport") || "libcurl",
-  localStorage.getItem("wispUrl") || wispUrl
-);
+//changeTransport(
+//    localStorage.getItem("transport") || "libcurl",
+//    localStorage.getItem("wispUrl") || wispUrl 
+//);
 
-export { changeTransport, getTransport };
+// helper function for  ../routes.tsx
+function setTransport() {
+  changeTransport(
+    localStorage.getItem("transport") || "libcurl",
+    localStorage.getItem("wispUrl") || wispUrl
+  );
+}
+
+export { changeTransport, getTransport, setTransport };