Refactor

grammyjs · Mar 21, 2024 · faf0361 · faf0361
1 parent 3200214
commit faf0361
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 81 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -20,10 +20,10 @@ import * as $Confirmation from "./islands/Confirmation.tsx";
 import * as $ConnectivityTest from "./islands/ConnectivityTest.tsx";
 import * as $Disclaimer from "./islands/Disclaimer.tsx";
 import * as $Dots from "./islands/Dots.tsx";
-import * as $Error from "./islands/Error.tsx";
 import * as $FileIdAnalyzer from "./islands/FileIdAnalyzer.tsx";
 import * as $FilterQueryBrowser from "./islands/FilterQueryBrowser.tsx";
 import * as $InlineMessageIdUnpacker from "./islands/InlineMessageIdUnpacker.tsx";
+import * as $Modal from "./islands/Modal.tsx";
 import * as $Select from "./islands/Select.tsx";
 import * as $SessionStringAnalyzer from "./islands/SessionStringAnalyzer.tsx";
 import * as $SessionStringGenerator from "./islands/SessionStringGenerator.tsx";
@@ -53,10 +53,10 @@ const manifest = {
     "./islands/ConnectivityTest.tsx": $ConnectivityTest,
     "./islands/Disclaimer.tsx": $Disclaimer,
     "./islands/Dots.tsx": $Dots,
-    "./islands/Error.tsx": $Error,
     "./islands/FileIdAnalyzer.tsx": $FileIdAnalyzer,
     "./islands/FilterQueryBrowser.tsx": $FilterQueryBrowser,
     "./islands/InlineMessageIdUnpacker.tsx": $InlineMessageIdUnpacker,
+    "./islands/Modal.tsx": $Modal,
     "./islands/Select.tsx": $Select,
     "./islands/SessionStringAnalyzer.tsx": $SessionStringAnalyzer,
     "./islands/SessionStringGenerator.tsx": $SessionStringGenerator,

diff --git a/islands/Disclaimer.tsx b/islands/Disclaimer.tsx
@@ -1,10 +1,10 @@
-import { error } from "./Error.tsx";
+import { setModalContent } from "./Modal.tsx";
 
 export function Disclaimer() {
   return (
     <button
       onClick={() => {
-        error.value = (
+        setModalContent(
           <ul class="flex flex-col list-disc pl-5 gap-1.5">
             <li>telegram.tools is not affiliated with Telegram.</li>
             <li>
@@ -21,7 +21,7 @@ export function Disclaimer() {
               potentially sign into using the Telegram API app credentials
               provided by them.
             </li>
-          </ul>
+          </ul>,
         );
       }}
     >

diff --git a/islands/Error.tsx → islands/Modal.tsx b/islands/Error.tsx → islands/Modal.tsx
@@ -5,43 +5,70 @@ import { effect, signal } from "@preact/signals";
 
 import { Button } from "../components/Button.tsx";
 
-export const error = signal<
-  null | ComponentChildren | (() => ComponentChildren)
->(null);
-export const showDismissButton = signal(true);
-export const autoDismiss = signal(true);
+export type ModalContent = null | ComponentChildren | (() => ComponentChildren);
+
+const content = signal<ModalContent>(null);
+const showDismissButton = signal(true);
+const autoDismiss = signal(true);
 
 IS_BROWSER && effect(() => {
-  if (error.value == null) {
+  if (content.value == null) {
     showDismissButton.value = true;
     autoDismiss.value = true;
   }
 });
 
 IS_BROWSER && effect(() => {
-  if (error.value != null) {
+  if (content.value != null) {
     document.body.style.overflow = "hidden";
   } else {
     document.body.style.overflow = "";
   }
 });
 
-export function Error({ onDismiss }: { onDismiss?: () => void }) {
+export function isModalVisible() {
+  return content.value != null;
+}
+
+export function setModalContent(
+  content_: ModalContent,
+  autoDismiss_?: boolean,
+  showDismissButton_?: boolean,
+) {
+  if (content_ == null) {
+    showDismissButton.value = true;
+    autoDismiss.value = true;
+  } else {
+    if (typeof autoDismiss_ === "boolean") {
+      autoDismiss.value = autoDismiss_;
+    }
+    if (typeof showDismissButton_ === "boolean") {
+      showDismissButton.value = showDismissButton_;
+    }
+  }
+  content.value = content_;
+}
+
+export function hideModal() {
+  setModalContent(null);
+}
+
+export function Modal({ onDismiss }: { onDismiss?: () => void }) {
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      e.key == "Escape" && (error.value = null);
+      e.key == "Escape" && (content.value = null);
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, []);
-  if (!error.value) {
+  if (!content.value) {
     return null;
   }
   function dismiss() {
     if (onDismiss) {
       onDismiss();
     } else {
-      error.value = null;
+      content.value = null;
     }
   }
   return (
@@ -52,15 +79,15 @@ export function Error({ onDismiss }: { onDismiss?: () => void }) {
     >
       <div class="w-full max-w-lg p-5 bg-background rounded-xl flex flex-col gap-5 justify-between shadow-sm">
         <div class="flex flex-col gap-4">
-          {typeof error.value === "string"
+          {typeof content.value === "string"
             ? (
               <p>
-                {error.value}
+                {content.value}
               </p>
             )
-            : typeof error.value === "function"
-            ? error.value()
-            : error.value}
+            : typeof content.value === "function"
+            ? content.value()
+            : content.value}
           {showDismissButton.value && (
             <Button
               onClick={dismiss}

diff --git a/islands/SessionStringGenerator.tsx b/islands/SessionStringGenerator.tsx
@@ -24,7 +24,7 @@ import { Label } from "../components/Label.tsx";
 import { Select } from "../components/Select.tsx";
 import { Spinner2 } from "../components/icons/Spinner.tsx";
 
-import { autoDismiss, Error, error, showDismissButton } from "./Error.tsx";
+import { hideModal, Modal, setModalContent } from "./Modal.tsx";
 
 const db = new Db();
 
@@ -112,15 +112,14 @@ const libraries = [
 async function generate(library: ValidLibrary) {
   const generate = () => {
     loading.value = true;
-    error.value = null;
+    hideModal();
     generateSessionString(library).finally(() => {
       loading.value = false;
     });
   };
   const string = await db.strings.get({ account: account.value });
   if (string && "string" in string) {
-    showDismissButton.value = false;
-    error.value = (
+    setModalContent(
       <>
         <p>
           A session string was recently generated for this account. Do you want
@@ -129,13 +128,15 @@ async function generate(library: ValidLibrary) {
         <Button
           onClick={() => {
             fromStorage(string.string, library);
-            error.value = null;
+            hideModal();
           }}
         >
           Yes
         </Button>
         <Button muted onClick={generate}>No, regenerate</Button>
-      </>
+      </>,
+      undefined,
+      false,
     );
     return;
   }
@@ -157,7 +158,7 @@ export function SessionStringGenerator() {
         <div class="gap-1.5 text-xs opacity-50 flex w-full items-center justify-center max-w-lg mx-auto">
           <Spinner2 size={10} /> <span>Generating session string</span>
         </div>
-        <Error />
+        <Modal />
       </>
     );
   }
@@ -179,14 +180,14 @@ export function SessionStringGenerator() {
           <Button
             onClick={() => {
               navigator.clipboard.writeText(sessionString.value).then(() => {
-                error.value = "Copied to clipboard.";
+                setModalContent("Copied to clipboard.");
               });
             }}
           >
             Copy
           </Button>
         </div>
-        <Error />
+        <Modal />
       </>
     );
   }
@@ -265,7 +266,7 @@ export function SessionStringGenerator() {
           </Caption>
         </Label>
       </form>
-      <Error />
+      <Modal />
     </>
   );
 }
@@ -329,7 +330,7 @@ async function fromStorage(
       );
       break;
     default:
-      error.value = "The chosen library is currently not supported.";
+      setModalContent("The chosen library is currently not supported.");
       return;
   }
 }
@@ -339,15 +340,15 @@ async function generateSessionString(library: ValidLibrary) { // TODO: report er
   const apiHash_ = apiHash.value;
   const account_ = account.value;
   if (isNaN(apiId_) || !apiId_ || !apiHash_) {
-    error.value = "Invalid API credentials.";
+    setModalContent("Invalid API credentials.");
     return;
   }
   if (!account_) {
-    error.value = "Invalid account details.";
+    setModalContent("Invalid account details.");
     return;
   }
   if (accountType.value != "Bot" && !account.value.startsWith("+")) {
-    error.value = "The phone number must start with a plus sign.";
+    setModalContent("The phone number must start with a plus sign.");
     return;
   }
 
@@ -356,8 +357,6 @@ async function generateSessionString(library: ValidLibrary) { // TODO: report er
     initialDc: environment.value == "Test" ? "2-test" : undefined,
   });
 
-  autoDismiss.value = false;
-  showDismissButton.value = false;
   let firstCodeAttempt_ = true;
   const firstCodeAttempt = signal(true);
   let firstPasswordAttempt_ = true;
@@ -370,20 +369,21 @@ async function generateSessionString(library: ValidLibrary) { // TODO: report er
           if (!firstCodeAttempt_ && firstCodeAttempt.value) {
             firstCodeAttempt.value = false;
           }
-          error.value = null;
-          autoDismiss.value = false;
-          showDismissButton.value = false;
-          error.value = () => (
-            <Code
-              first={firstCodeAttempt}
-              resolve={(code) => {
-                resolve(code);
-              }}
-              cancel={() => {
-                error.value = null;
-                reject();
-              }}
-            />
+          setModalContent(
+            () => (
+              <Code
+                first={firstCodeAttempt}
+                resolve={(code) => {
+                  resolve(code);
+                }}
+                cancel={() => {
+                  hideModal();
+                  reject();
+                }}
+              />
+            ),
+            false,
+            false,
           );
           firstCodeAttempt_ = false;
         }),
@@ -392,26 +392,28 @@ async function generateSessionString(library: ValidLibrary) { // TODO: report er
           if (!firstPasswordAttempt_ && firstPasswordAttempt.value) {
             firstPasswordAttempt.value = false;
           }
-          autoDismiss.value = false;
-          showDismissButton.value = false;
-          error.value = () => (
-            <Password
-              hint={hint}
-              first={firstPasswordAttempt}
-              resolve={(code) => {
-                resolve(code);
-              }}
-              cancel={() => {
-                error.value = null;
-                reject();
-              }}
-            />
+          setModalContent(
+            () => (
+              <Password
+                hint={hint}
+                first={firstPasswordAttempt}
+                resolve={(code) => {
+                  resolve(code);
+                }}
+                cancel={() => {
+                  hideModal();
+                  reject();
+                }}
+              />
+            ),
+            false,
+            false,
           );
           firstPasswordAttempt_ = false;
         }),
     },
   );
-  error.value = null;
+  hideModal();
 
   const dc = await client.storage.getDc();
   const authKey = await client.storage.getAuthKey();
@@ -457,7 +459,7 @@ async function generateSessionString(library: ValidLibrary) { // TODO: report er
       sessionString.value = await client.exportAuthString();
       break;
     default:
-      error.value = "The chosen library is currently not supported.";
+      setModalContent("The chosen library is currently not supported.");
       return;
   }
 

diff --git a/islands/UpdateExplorer.tsx b/islands/UpdateExplorer.tsx
@@ -18,7 +18,8 @@ import { Router, useHash } from "../components/Router.tsx";
 import { Spinner2 } from "../components/icons/Spinner.tsx";
 import { ClientOnly } from "../components/ClientOnly.tsx";
 
-import { Error, error } from "./Error.tsx";
+import { Modal, setModalContent } from "./Modal.tsx";
+import { isModalVisible } from "./Modal.tsx";
 
 const dbs = new Map<string, Db>();
 
@@ -147,7 +148,7 @@ function Explorer() {
           me.value = e.data.me;
           break;
         case "error":
-          error.value = e.data.error;
+          setModalContent(e.data.error);
           break;
         case "sound":
           sounds.value && new Audio("/update-explorer/pulse.wav").play();
@@ -321,7 +322,7 @@ function Explorer() {
       </main>
       <div class="flex gap-1 items-center justify-center fixed bottom-0 text-xs py-2 bg-background w-full">
         <div class="opacity-50 flex gap-1.5 items-center">
-          {!me.value && !error.value &&
+          {!me.value && !isModalVisible() &&
             (
               <>
                 <Spinner2 size={10} /> Authorizing
@@ -330,7 +331,7 @@ function Explorer() {
           {me.value && <>Authorized as @{me.value.username}</>}
         </div>
       </div>
-      <Error onDismiss={() => setHash("#")} />
+      <Modal onDismiss={() => setHash("#")} />
     </>
   );
 }