refactor(client): circular dep: toast <-> ws

Author: eliandoran

apps/client/src/services/bundle.ts

@@ -1,6 +1,6 @@
 import ScriptContext from "./script_context.js";
 import server from "./server.js";
-import toastService from "./toast.js";
+import toastService, { showError } from "./toast.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
 import { t } from "./i18n.js";
@@ -37,7 +37,9 @@ async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $cont
     } catch (e: any) {
         const note = await froca.getNote(bundle.noteId);
 
-        toastService.showAndLogError(`Execution of JS note "${note?.title}" with ID ${bundle.noteId} failed with error: ${e?.message}`);
+        const message = `Execution of JS note "${note?.title}" with ID ${bundle.noteId} failed with error: ${e?.message}`;
+        showError(message);
+        logError(message);
     }
 }
 

apps/client/src/services/clipboard.ts

@@ -4,7 +4,7 @@ import froca from "./froca.js";
 import linkService from "./link.js";
 import utils from "./utils.js";
 import { t } from "./i18n.js";
-import toast from "./toast.js";
+import { throwError } from "./ws.js";
 
 let clipboardBranchIds: string[] = [];
 let clipboardMode: string | null = null;
@@ -37,7 +37,7 @@ async function pasteAfter(afterBranchId: string) {
 
         // copy will keep clipboardBranchIds and clipboardMode, so it's possible to paste into multiple places
     } else {
-        toastService.throwError(`Unrecognized clipboard mode=${clipboardMode}`);
+        throwError(`Unrecognized clipboard mode=${clipboardMode}`);
     }
 }
 
@@ -69,7 +69,7 @@ async function pasteInto(parentBranchId: string) {
 
         // copy will keep clipboardBranchIds and clipboardMode, so it's possible to paste into multiple places
     } else {
-        toastService.throwError(`Unrecognized clipboard mode=${clipboardMode}`);
+        throwError(`Unrecognized clipboard mode=${clipboardMode}`);
     }
 }
 

apps/client/src/services/image.ts

@@ -1,5 +1,5 @@
 import { t } from "./i18n.js";
-import toastService from "./toast.js";
+import toastService, { showError } from "./toast.js";
 
 function copyImageReferenceToClipboard($imageWrapper: JQuery<HTMLElement>) {
     try {
@@ -11,7 +11,9 @@ function copyImageReferenceToClipboard($imageWrapper: JQuery<HTMLElement>) {
         if (success) {
             toastService.showMessage(t("image.copied-to-clipboard"));
         } else {
-            toastService.showAndLogError(t("image.cannot-copy"));
+            const message = t("image.cannot-copy");
+            showError(message);
+            logError(message);
         }
     } finally {
         window.getSelection()?.removeAllRanges();

apps/client/src/services/server.ts

@@ -1,5 +1,6 @@
 import utils, { isShare } from "./utils.js";
 import ValidationError from "./validation_error.js";
+import { throwError } from "./ws.js";
 
 type Headers = Record<string, string | null | undefined>;
 
@@ -276,7 +277,7 @@ async function reportError(method: string, url: string, statusCode: number, resp
     } else {
         const title = `${statusCode} ${method} ${url}`;
         toastService.showErrorTitleAndMessage(title, messageStr);
-        toastService.throwError(`${title} - ${message}`);
+        throwError(`${title} - ${message}`);
     }
 }
 

apps/client/src/services/toast.ts

@@ -78,13 +78,7 @@ function showMessage(message: string, delay = 2000) {
     });
 }
 
-function showAndLogError(message: string, delay = 10000) {
-    showError(message, delay);
-
-    ws.logError(message);
-}
-
-function showError(message: string, delay = 10000) {
+export function showError(message: string, delay = 10000) {
     console.log(utils.now(), "error: ", message);
 
     toast({
@@ -108,18 +102,10 @@ function showErrorTitleAndMessage(title: string, message: string, delay = 10000)
     });
 }
 
-function throwError(message: string) {
-    ws.logError(message);
-
-    throw new Error(message);
-}
-
 export default {
     showMessage,
     showError,
     showErrorTitleAndMessage,
-    showAndLogError,
-    throwError,
     showPersistent,
     closePersistent
 };

apps/client/src/services/ws.ts

@@ -17,7 +17,7 @@ let lastProcessedEntityChangeId = window.glob.maxEntityChangeIdAtLoad;
 let lastPingTs: number;
 let frontendUpdateDataQueue: EntityChange[] = [];
 
-function logError(message: string) {
+export function logError(message: string) {
     console.error(utils.now(), message); // needs to be separate from .trace()
 
     if (ws && ws.readyState === 1) {
@@ -301,6 +301,12 @@ setTimeout(() => {
     setInterval(sendPing, 1000);
 }, 0);
 
+export function throwError(message: string) {
+    logError(message);
+
+    throw new Error(message);
+}
+
 export default {
     logError,
     subscribeToMessages,