grlEventsReducers, EventMarquee, and workin on calc speed and animations from redux (rather than example's array)

1 files changed, 35 insertions, 1 deletions

diff --git a/jb-ui/src/JBApp.tsx b/jb-ui/src/JBApp.tsx
index 5c99e61..c3d2b5f 100644
--- a/jb-ui/src/JBApp.tsx
+++ b/jb-ui/src/JBApp.tsx
@@ -9,19 +9,22 @@ import {
     TaskStatusResponse,
     UserWalletBalance,
     UserWalletBalanceResponse,
-    WalletApi
+    WalletApi,
+    EventType
 } from "@/api_fsb";
 import Footer from "@/components/Footer";
 import { useAppDispatch } from "@/hooks";
 import { bpid, routeBasename, tagManager } from "@/lib/utils";
 import { setAssignmentID, setProductUserID, setTurkSubmitTo } from "@/models/appSlice";
 import { addStatsData } from "@/models/grlStatsSlice";
+import { addEvent } from "@/models/grlEventsSlice";
 import Home from "@/pages/Home";
 import Preview from "@/pages/Preview";
 import Result from "@/pages/Result";
 import Work from "@/pages/Work";
 import { BrowserRouter, Outlet, Route, Routes, useSearchParams } from "react-router-dom";
 import useWebSocket from 'react-use-websocket';
+import NewsTicker from "./components/EventMarquee";
 
 import { useEffect } from "react";
 
@@ -29,6 +32,7 @@ import Wallet from "@/components/Wallet";
 import "@/index.css";
 import { setTaskStatus, setUserWalletBalance } from "@/models/appSlice";
 import { Profiling } from "./components/Profiling";
+import { error } from "console";
 
 type Message = PingMessage | PongMessage | SubscribeMessage | EventMessage | StatsMessage;
 
@@ -36,10 +40,23 @@ function isStatsMessage(msg: Message): msg is StatsMessage {
     return msg.kind === 'stats';
 }
 
+function isEventMessage(msg: Message): msg is EventMessage {
+    return msg.kind === 'event';
+}
+
 function isPingMessage(msg: Message): msg is PingMessage {
     return msg.kind === 'ping';
 }
 
+// TaskEnter: 'task.enter',
+// TaskFinish: 'task.finish',
+// SessionEnter: 'session.enter',
+// SessionFinish: 'session.finish',
+// WalletCredit: 'wallet.credit',
+// WalletDebit: 'wallet.debit',
+// UserCreated: 'user.created',
+// UserActive: 'user.active'
+
 function QueryParamProcessor() {
     const dispatch = useAppDispatch()
     const [searchParams] = useSearchParams();
@@ -108,6 +125,7 @@ const Layout = () => {
             </main >
 
             <footer className="bg-slate-700 text-zinc-200 p-2 text-center font-mono">
+                <NewsTicker />
                 <Footer />
             </footer>
 
@@ -137,6 +155,22 @@ function JBApp() {
             if (isStatsMessage(msg)) {
                 dispatch(addStatsData(msg.data))
 
+            } else if (isEventMessage(msg)) {
+                // For simplicity, we just log the event messages here.
+                // You can extend this to update the UI or trigger notifications as needed.
+
+                switch (msg.data.event_type) {
+                    case EventType.TaskEnter:
+                    case EventType.TaskFinish:
+                    case EventType.UserCreated:
+                        dispatch(addEvent(msg.data));
+                        break
+
+                    default:
+                        // do nothing for now
+                        break;
+                }
+
             } else if (isPingMessage(msg)) {
                 const pong: PongMessage = {
                     "kind": PongMessageKindEnum.Pong,