fix: display error msg (#89)

gui/src/machines/auth-machine.ts

@@ -1,10 +1,12 @@
 import { TRACKING_MACHINE } from "@/machines/tracking-machine";
 import { SelectGame } from "@@/go/core/CommandHandler";
+import { errorsx } from "@@/go/models";
 import { createActorContext } from "@xstate/react";
 import { setup, assign } from "xstate";
 
 type AuthMachineContext = {
-  game?: "sfv" | "sf6"
+  game?: "sfv" | "sf6";
+  error?: errorsx.FrontEndError;
 }
 export const AUTH_MACHINE = setup({
   types: {
@@ -14,7 +16,7 @@ export const AUTH_MACHINE = setup({
     selectGame: ({ context, self }) => {
       SelectGame(context.game).then(() => {
         self.send({ type: "loadedGame" })
-      }).catch(err => self.send({ type: "error", err }));
+      }).catch(error => self.send({ type: "error", error }));
     },
   }
 }).createMachine({
@@ -37,7 +39,14 @@ export const AUTH_MACHINE = setup({
     loading: {
       on: {
         loadedGame: "connected",
-        error: "gameForm"
+        error: {
+          actions: [
+            assign({
+              error: ({ event }) => event.error,
+            }),
+          ],
+          target: "gameForm"
+        }
       },
     },
     connected: {

gui/src/machines/tracking-machine.ts

@@ -5,13 +5,14 @@ import {
   StartTracking,
   StopTracking,
 } from "@@/go/core/CommandHandler";
-import type { model } from "@@/go/models";
+import type { errorsx, model } from "@@/go/models";
 
 type CFNMachineContext = {
   user?: model.User
   restore: boolean;
   isTracking: boolean;
   trackingState: model.TrackingState;
+  error?: errorsx.FrontEndError;
 };
 
 export const TRACKING_MACHINE = setup({
@@ -24,17 +25,17 @@ export const TRACKING_MACHINE = setup({
       try {
         await StartTracking(context.user.code, context.restore)
         context.isTracking = true;
-      } catch (err) {
-        self.send({ type: "error", err })
+      } catch (error) {
+        self.send({ type: "error", error })
       }
     },
     stopTracking: async ({ context, self }) => {
       try {
         await StopTracking();
         context.isTracking = false;
         self.send({ type: "cease" })
-      } catch (err) {
-        self.send({ type: "error", err })
+      } catch (error) {
+        self.send({ type: "error", error })
       }
     },
   },
@@ -65,7 +66,14 @@ export const TRACKING_MACHINE = setup({
       loading: {
         on: {
           matchPlayed: "tracking",
-          error: "cfnForm"
+          error: {
+            actions: [
+              assign({
+                error: ({ event }) => event.error,
+              }),
+            ],
+            target: "cfnForm"
+          }
         },
       },
       tracking: {

gui/src/main/app-layout/app-wrapper.tsx

@@ -12,13 +12,11 @@ import { LoadingBar } from "@/ui/loading-bar";
 import { UpdatePrompt } from "@/ui/update-prompt";
 
 import { BrowserOpenURL, EventsOn } from "@@/runtime";
-import type { errorsx } from "@@/go/models";
 
 export const AppWrapper: React.FC = () => {
   const { t } = useTranslation();
   const [loaded, setLoaded] = React.useState(0);
   const [hasNewVersion, setNewVersion] = React.useState(false);
-  const [err, setErr] = React.useState<errorsx.FrontEndError | null>(null);
 
   const trackingActor = TrackingMachineContext.useActorRef()
   const authActor = AuthMachineContext.useActorRef()
@@ -38,10 +36,7 @@ export const AppWrapper: React.FC = () => {
     <>
       <AppSidebar />
       <main>
-        <ErrorMessage
-          error={err}
-          onFadedOut={() => setErr(null)}
-        />
+        <ErrorMessage />
         <LoadingBar percentage={loaded} />
         {hasNewVersion && (
           <UpdatePrompt

gui/src/main/error-message.tsx

@@ -1,40 +1,48 @@
 import { LocalizationKey } from "@/i18n/i18n-config";
-import type { errorsx } from "@@/go/models";
+import { AuthMachineContext } from "@/machines/auth-machine";
+import { TrackingMachineContext } from "@/machines/tracking-machine";
+import { errorsx } from "@@/go/models";
 import { Icon } from "@iconify/react";
+import { useSelector } from "@xstate/react";
 import clsx from "clsx";
 import { useAnimate } from "framer-motion";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-type ErrorMessageProps = {
-  error: errorsx.FrontEndError | null;
-  onFadedOut: () => void;
-};
-
 const LocalizedErrorMessage: Record<number, LocalizationKey> = {
   401: "errUnauthorized",
   404: "errNotFound",
   500: "errInternalServerError",
 };
 
-export const ErrorMessage: React.FC<ErrorMessageProps> = ({
-  error,
-  onFadedOut,
-}) => {
+export const ErrorMessage: React.FC= () => {
   const { t } = useTranslation();
   const [scope, animate] = useAnimate();
+
+  const authActor = AuthMachineContext.useActorRef()
+  const trackingActor = TrackingMachineContext.useActorRef()
+
+  const authContext = useSelector(authActor, (snapshot) => snapshot.context)
+  const trackingContext = useSelector(trackingActor, (snapshot) => snapshot.context)
+
+  const [error, setError] = React.useState<errorsx.FrontEndError>(null)
 
   React.useEffect(() => {
-    if (!error) {
-      return;
-    }
     animate("#error-message", { opacity: [0, 1] }).then(() => {
       animate("#error-message", { opacity: [1, 0] }, { delay: 3.5 }).then(() =>
-        onFadedOut()
+        setError(null)
       );
     });
   }, [error]);
 
+  React.useEffect(() => {
+    authContext.error && setError(authContext.error)
+  }, [authContext.error])
+
+  React.useEffect(() => {
+    trackingContext.error && setError(trackingContext.error)
+  }, [trackingContext.error])
+
   return (
     <div ref={scope} className="absolute">
       <div