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

1 files changed, 48 insertions, 0 deletions

diff --git a/jb-ui/src/models/grlEventsSlice.ts b/jb-ui/src/models/grlEventsSlice.ts
new file mode 100644
index 0000000..f77bbc1
--- /dev/null
+++ b/jb-ui/src/models/grlEventsSlice.ts
@@ -0,0 +1,48 @@
+import { EventEnvelope } from "@/api_fsb";
+import { RootState } from "@/store";
+import { createEntityAdapter, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const eventAdapter = createEntityAdapter({
+    selectId: (model: EventEnvelope) => model.event_uuid!,
+    sortComparer: (a, b) => {
+        return b.timestamp!.localeCompare(a.timestamp!);
+    },
+});
+
+
+const grlEventsSlice = createSlice({
+    name: 'grlEvents',
+    // initialState: eventAdapter.getInitialState(),
+    initialState: eventAdapter.getInitialState({ latestEvent: null as EventEnvelope | null }),
+
+    reducers: {
+        addEvents: eventAdapter.addMany,
+        upsertEvent: eventAdapter.upsertOne,  // add or update
+
+        // addEvent: eventAdapter.addOne,
+        addEvent: (state, action: PayloadAction<EventEnvelope>) => {
+            eventAdapter.addOne(state, action.payload);
+            const incoming = action.payload.timestamp!;
+            if (!state.latestEvent || incoming.localeCompare(state.latestEvent.timestamp!) > 0) {
+                state.latestEvent = action.payload;
+            }
+        },
+    }
+})
+
+
+export const {
+    addEvent, addEvents, upsertEvent
+} = grlEventsSlice.actions;
+
+// Add this after the slice, before exports
+export const eventSelectors = eventAdapter.getSelectors(
+    (state: RootState) => state.events
+);
+
+export const selectLatestEvents = (count: number) => (state: RootState) =>
+    eventSelectors.selectAll(state).slice(0, count);
+
+export const selectLatestEvent = (state: RootState) => state.events.latestEvent;
+
+export default grlEventsSlice.reducer