feat: real time updates

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "C#: Host Debug",
+      "type": "dotnet",
+      "request": "launch",
+      "projectPath": "${workspaceFolder}/src/server/host/MinigolfFriday.Host.csproj"
+    }
+  ]
+}

src/client/angular.json

@@ -52,14 +52,24 @@
                 "inject": false
               }
             ],
-            "scripts": []
+            "scripts": [],
+            "externalDependencies": ["http", "https", "url", "util", "net"],
+            "allowedCommonJsDependencies": [
+              "copy-to-clipboard",
+              "tough-cookie",
+              "node-fetch",
+              "fetch-cookie",
+              "abort-controller",
+              "ws",
+              "eventsource"
+            ]
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "600kb",
+                  "maximumWarning": "800kb",
                   "maximumError": "1mb"
                 },
                 {

src/client/package.json

@@ -31,6 +31,7 @@
     "@angular/pwa": "^18.0.3",
     "@angular/router": "^18.0.2",
     "@angular/service-worker": "^18.0.2",
+    "@microsoft/signalr": "^8.0.0",
     "@ngneers/easy-ngrx-distinct-selector": "^0.1.1",
     "@ngrx/effects": "18.0.0-rc.0",
     "@ngrx/entity": "18.0.0-rc.0",

src/client/src/app/+state/action-state.ts

@@ -69,7 +69,7 @@
   error: _ActionCreatorWithResponse<`[${TScope}] [Error] ${TName}`, TProps, unknown>;
 };
 
 type x = HttpActionCreator<'a', 'b', { a: string }, { b: number }>;
 
 export function createHttpAction<TProps extends object, TSuccess = unknown>() {
   return <TScope extends string, TName extends string>(scope: TScope, name: TName) => {
@@ -97,13 +97,16 @@
   TActionStateName extends TInferredState extends { actionStates: Record<string, ActionState> }
     ? keyof TInferredState['actionStates']
     : never,
   TAction extends HttpActionCreator<string, string, any, any>,
   TProps = Parameters<TAction>[0],
   TInferredState = TState,
 >(
   actionStateName: TActionStateName,
   action: TAction,
-  startCondition: (state: TInferredState, props: TProps) => boolean = () => true
+  options?: {
+    condition?: (state: TInferredState, props: TProps) => boolean;
+    startCondition?: (state: TInferredState, props: TProps) => boolean;
+  }
 ): ReducerTypes<
   TInferredState,
   [TAction, TAction['starting'], TAction['success'], TAction['error']]
@@ -114,11 +117,15 @@
     action.success,
     action.error,
     produce((draft, props) => {
+      if (options?.condition && !options.condition(draft as TInferredState, props.props)) {
+        return;
+      }
+
       const actionStates = (draft as TState).actionStates;
       if (props.type === action.type) {
         if (
           !isActionBusy(actionStates[actionStateName as string]) &&
-          startCondition(draft as TInferredState, props.props)
+          (!options?.startCondition || options.startCondition(draft as TInferredState, props.props))
         ) {
           actionStates[actionStateName as string] = startingActionState;
         }
@@ -127,22 +134,28 @@
       } else if (props.type === action.success.type) {
         actionStates[actionStateName as string] = successActionState;
       } else if (props.type === action.error.type) {
         actionStates[actionStateName as string] = errorActionState((props as any).response);
       }
     })
   );
 }
 
 export function onHttpAction<T extends HttpActionCreator<string, string, any, any>>(
   action: T,
-  actionStateSelector: Selector<object, ActionState>
+  actionStateSelector?: Selector<object, ActionState>,
+  disableFilterCondition?: (p: ReturnType<T>) => boolean
 ) {
-  return inject(Actions).pipe(
-    ofType(action),
-    withLatestFrom(inject(Store).select(actionStateSelector)),
-    filter(([, actionState]) => actionState.state === 'starting'),
-    map(([props]) => props)
-  );
+  if (actionStateSelector) {
+    return inject(Actions).pipe(
+      ofType(action),
+      withLatestFrom(inject(Store).select(actionStateSelector)),
+      filter(
+        ([p, actionState]) => !!disableFilterCondition?.(p) || actionState.state === 'starting'
+      ),
+      map(([props]) => props)
+    );
+  }
+  return inject(Actions).pipe(ofType(action));
 }
 
 export function mapToHttpAction<

src/client/src/app/+state/events/actions/add-event-timeslot.action.ts

@@ -35,7 +35,9 @@ export const addEventTimeslotReducers: Reducers<EventsFeatureState> = [
       state
     );
   }),
-  handleHttpAction('addTimeslot', addEventTimeslotAction, (s, p) => !!s.entities[p.eventId]),
+  handleHttpAction('addTimeslot', addEventTimeslotAction, {
+    startCondition: (s, p) => !!s.entities[p.eventId],
+  }),
 ];
 
 export const addEventTimeslotEffects: Effects = {

src/client/src/app/+state/events/actions/add-player-to-preconfig.action.ts

@@ -34,14 +34,12 @@ export const addPlayerToEventPreconfigurationReducers: Reducers<EventsFeatureSta
         )
       : state;
   }),
-  handleHttpAction(
-    'addPlayerToPreconfig',
-    addPlayerToEventPreconfigurationAction,
-    (s, p) =>
+  handleHttpAction('addPlayerToPreconfig', addPlayerToEventPreconfigurationAction, {
+    startCondition: (s, p) =>
       s.entities[p.eventId]?.timeslots.some(
         x => x.id === p.timeslotId && x.preconfigurations.some(y => y.id === p.preconfigId)
-      ) === true
-  ),
+      ) === true,
+  }),
 ];
 
 export const addPlayerToEventPreconfigurationEffects: Effects = {

src/client/src/app/+state/events/actions/event-timeslot-registration-changed.action.ts

@@ -0,0 +1,34 @@
+import { createAction, on, props } from '@ngrx/store';
+import { produce } from 'immer';
+
+import { PlayerEventTimeslotRegistrationChanged } from '../../../models/realtime-events';
+import { Reducers } from '../../utils';
+import { EVENTS_ACTION_SCOPE } from '../consts';
+import { eventEntityAdapter, EventsFeatureState } from '../events.state';
+
+export const eventTimeslotRegistrationChangedAction = createAction(
+  `[${EVENTS_ACTION_SCOPE}] Event Timeslot Registration Changed`,
+  props<PlayerEventTimeslotRegistrationChanged>()
+);
+
+export const eventTimeslotRegistrationChangedReducers: Reducers<EventsFeatureState> = [
+  on(eventTimeslotRegistrationChangedAction, (state, event) =>
+    eventEntityAdapter.mapOne(
+      {
+        id: event.eventId,
+        map: produce(draft => {
+          const timeslot = draft.timeslots.find(t => t.id === event.eventTimeslotId);
+          if (!timeslot) return;
+          if (event.isRegistered) {
+            if (!timeslot.playerIds.includes(event.userId)) {
+              timeslot.playerIds.push(event.userId);
+            }
+          } else {
+            timeslot.playerIds = timeslot.playerIds.filter(p => p !== event.userId);
+          }
+        }),
+      },
+      state
+    )
+  ),
+];

src/client/src/app/+state/events/actions/load-event.action.ts

@@ -12,25 +12,24 @@ import { EVENTS_ACTION_SCOPE } from '../consts';
 import { selectEventsActionState } from '../events.selectors';
 import { EventsFeatureState, eventEntityAdapter } from '../events.state';
 
-export const loadEventAction = createHttpAction<{ eventId: string; reload?: boolean }, Event>()(
-  EVENTS_ACTION_SCOPE,
-  'Load Event'
-);
+export const loadEventAction = createHttpAction<
+  { eventId: string; reload?: boolean; silent?: boolean },
+  Event
+>()(EVENTS_ACTION_SCOPE, 'Load Event');
 
 export const loadEventReducers: Reducers<EventsFeatureState> = [
   on(loadEventAction.success, (state, { response }) =>
     eventEntityAdapter.upsertOne(response, state)
   ),
-  handleHttpAction(
-    'loadOne',
-    loadEventAction,
-    (s, p) => !s.entities[p.eventId] || p.reload === true
-  ),
+  handleHttpAction('loadOne', loadEventAction, {
+    condition: (s, p) => p.silent !== true,
+    startCondition: (s, p) => !s.entities[p.eventId] || p.reload === true,
+  }),
 ];
 
 export const loadEventEffects: Effects = {
   loadEvent$: createFunctionalEffect.dispatching((api = inject(EventAdministrationService)) =>
-    onHttpAction(loadEventAction, selectEventsActionState('loadOne')).pipe(
+    onHttpAction(loadEventAction, selectEventsActionState('loadOne'), p => !!p.props.silent).pipe(
       switchMap(({ props }) => toHttpAction(getEvent(api, props), loadEventAction, props))
     )
   ),