Fix tab syncing race condition — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Fix tab syncing race condition

Merged rudolfs opened 2 years ago

2 files changed +43 -20 d7521a46 → 841f1a4e

modified src/lib/httpd.ts

@@ -64,6 +64,9 @@ export async function authenticate(params: {

   signature: string;
   publicKey: string;
 }): Promise<boolean> {
   if (!get(experimental)) {
     return false;
   }
   stateMutex.cancel();
   return stateMutex.runExclusive(async () => {
     try {

@@ -136,6 +139,7 @@ async function checkState() {

       httpdState = JSON.parse(rawHttpdState);
     } catch (error) {
       console.error(error);
       return;
     }
   }

@@ -150,19 +154,6 @@ async function checkState() {

           scope: config?.scope,
         };
         // Return quickly and avoid additional fetches
         // if experimental settings aren't updated
         if (!get(experimental)) {
           update({
             state: "running",
             node,
           });
         }
         if (httpdState && httpdState.state !== "stopped") {
           httpdState.node = node;
         }
         if (httpdState && httpdState.state === "authenticated") {
           const sess = await api.session.getById(httpdState.session.id);
           const unixTimeInSeconds = Math.floor(Date.now() / 1000);

@@ -175,7 +166,7 @@ async function checkState() {

               node,
             });
           } else {
             update(httpdState);
             update({ ...httpdState, node });
           }
         } else {
           update({

@@ -216,14 +207,28 @@ function pollSession() {

 }
 export async function initialize() {
   if (!get(experimental)) {
     return;
   }
   // Sync session state changes with other open tabs and windows.
   addEventListener("storage", event => {
     if (
       (event.key === HTTPD_STATE_STORAGE_KEY &&
         event.oldValue !== event.newValue) ||
       (event.key === HTTPD_CUSTOM_PORT_KEY && event.oldValue !== event.newValue)
       event.key === HTTPD_STATE_STORAGE_KEY &&
       event.oldValue !== event.newValue
     ) {
       void checkState();
       if (!event.newValue) {
         throw new Error("event.newValue was not set");
       }
       const httpdState: HttpdState = JSON.parse(event.newValue);
       store.set(httpdState);
     }
     if (
       event.key === HTTPD_CUSTOM_PORT_KEY &&
       event.oldValue !== event.newValue
     ) {
       api.changePort(Number(event.newValue));
     }
   });

modified src/views/session/Index.svelte

@@ -3,14 +3,16 @@

   import { onMount } from "svelte";
   import * as httpd from "@app/lib/httpd";
   import * as modal from "@app/lib/modal";
   import * as router from "@app/lib/router";
   import * as httpd from "@app/lib/httpd";
   import { experimental } from "@app/lib/appearance";
   import AppLayout from "@app/App/AppLayout.svelte";
   import Loading from "@app/components/Loading.svelte";
   import AuthenticationErrorModal from "@app/modals/AuthenticationErrorModal.svelte";
   import ErrorModal from "@app/modals/ErrorModal.svelte";
   export let activeRoute: SessionRoute;

@@ -21,12 +23,28 @@

     }
     const isAuthenticated = await httpd.authenticate(activeRoute.params);
     if (!isAuthenticated) {
     if (!isAuthenticated && !$experimental) {
       modal.show({
         component: ErrorModal,
         props: {
           title: "Authentication failed",
           subtitle: [
             "Authentication only works in experimental mode.",
             "Go to Settings, set experimental mode to On and try again.",
           ],
           error: {
             message: "Can't authenticate in read-only mode.",
             stack: undefined,
           },
         },
       });
     } else if (!isAuthenticated) {
       modal.show({
         component: AuthenticationErrorModal,
         props: {},
       });
     }
     void router.navigateToUrl(
       "push",
       new URL(activeRoute.params.path || "", window.location.origin),