wip 5: remove action namespaces

Author: sugarmanz

devtools/client/src/redux/actions.ts

@@ -0,0 +1,16 @@
+import { Events } from '@player-tools/devtools-common';
+import { ActionCreatorWithPayload, createAction } from '@reduxjs/toolkit';
+import { AnyAction } from 'redux';
+
+/** Redux actions associated against all possible event types */
+type EventActions = {
+  [key in Events.EventTypes]: ActionCreatorWithPayload<Events.ByType<key>, key>;
+};
+
+/** Redux actions associated against all defined event types */
+export const Actions: EventActions = Object.fromEntries(
+  Events.EventTypes.map((event) => [
+    event,
+    createAction<Events.ByType<typeof event>>(event),
+  ])
+) as EventActions;

devtools/client/src/redux/actions/events.ts

@@ -0,0 +1,20 @@
+import { createAction } from '@reduxjs/toolkit';
+import type { Events } from '@player-tools/devtools-common';
+
+export { Actions as EventActions } from './events';
+export * from './methods';
+
+/** Explicit actions that don't correspond to a specific event or method */
+export const Actions = {
+  // Explicit actions TODO: Is this level of redundancy okay?
+  'selected-player': createAction<string | undefined>('selected-player'),
+  'player-timeline-event': createAction<Events.TimelineEvents>(
+    'player-timeline-event'
+  ),
+
+  // Reset actions
+  'clear-selected-data-details': createAction('clear-selected-data-details'),
+  'clear-console': createAction('clear-console'),
+  'clear-logs': createAction('clear-logs'),
+  'clear-store': createAction('clear-store'),
+};

devtools/client/src/redux/actions/index.ts

@@ -0,0 +1,43 @@
+import {
+  BACKGROUND_SOURCE,
+  createLogger,
+  Methods,
+} from '@player-tools/devtools-common';
+import { createAsyncThunk, type AsyncThunk } from '@reduxjs/toolkit';
+
+const logger = createLogger(BACKGROUND_SOURCE);
+
+/** Type describing an object containing async thunks for each Method defined */
+export type MethodThunks = {
+  [key in Methods.Method['type']]: AsyncThunk<
+    Methods.ByType<key>['result'],
+    Methods.ByType<key>,
+    any
+  >;
+};
+
+/** Signature for handling method requests */
+export type MethodHandler = <T extends Methods.MethodTypes>(
+  method: Methods.ByType<T>
+) => Promise<Methods.ByType<T>['result']>;
+
+/** Utility for building async thunks for all known method types */
+export const buildMethodThunks = (
+  onMethodRequest: MethodHandler
+): MethodThunks =>
+  Object.fromEntries(
+    Methods.MethodTypes.map((method) => [
+      method,
+      createAsyncThunk<
+        Methods.ByType<typeof method>['result'],
+        Methods.ByType<typeof method>
+      >(method, async (method) => {
+        logger.log(`Requesting ${method.type}`, method.params);
+        const data = (await onMethodRequest(method)) as Methods.ByType<
+          typeof method.type
+        >['result'];
+        logger.log(`Response from ${method.type}`, data);
+        return data;
+      }),
+    ])
+  ) as MethodThunks;

devtools/client/src/redux/actions/methods.ts

@@ -1,5 +1,5 @@
-import { Methods as RuntimeMethods, RUNTIME_SOURCE } from '@player-tools/devtools-common';
-import { Methods } from './actions';
+import { Methods as Methods, RUNTIME_SOURCE } from '@player-tools/devtools-common';
+import { MethodThunks } from './actions/methods';
 
 export const GET_INFO_DETAILS = 'GET_INFO_DETAILS';
 export const GET_CONFIG_DETAILS = 'GET_CONFIG_DETAILS';
@@ -10,8 +10,8 @@ export const START_PROFILER = 'START_PROFILER';
 export const STOP_PROFILER = 'STOP_PROFILER';
 
 
-export interface MethodAction<T extends RuntimeMethods.MethodTypes> {
-  payload: RuntimeMethods.ByType<T>['params'];
+interface MethodAction<T extends Methods.MethodTypes> {
+  payload: Methods.ByType<T>['params'];
 }
 
 // Copied from webext redux library not allowed in flipper
@@ -26,13 +26,13 @@ const _alias = (aliases: any) => () => (next: any) => (action: any) => {
 };
 
 /** Helper for building corresponding method action via supplied thunks */
-const alias = <T extends RuntimeMethods.MethodTypes>(type: T, methods: Methods.MethodThunks) => (action: MethodAction<T>) => methods[type]({
+const alias = <T extends Methods.MethodTypes>(type: T, methods: MethodThunks) => (action: MethodAction<T>) => methods[type]({
   type,
   params: action.payload,
   source: RUNTIME_SOURCE,
-} as RuntimeMethods.ByType<T>)
+} as Methods.ByType<T>)
 
-export const buildAliases = (methods: Methods.MethodThunks) =>
+export const buildAliases = (methods: MethodThunks) =>
   _alias({
     GET_INFO_DETAILS: alias('player-runtime-info-request', methods),
     GET_CONFIG_DETAILS: alias('player-config-request', methods),

devtools/client/src/redux/aliases.ts

@@ -1,8 +1,8 @@
 import { Events } from "@player-tools/devtools-common";
 import { Dispatch } from "redux";
-import { Events as EventActions } from "./actions";
+import { EventActions } from "./actions";
 
 /** Utility method to filter known events from a supplied message and dispatch the corresponding action */
 export const dispatchEvents = (dispatch: Dispatch) => (message: any) => {
-  if (Events.isEvent(message)) dispatch(EventActions.actions[message.type](message as any))
+  if (Events.isEvent(message)) dispatch(EventActions[message.type](message as any))
 }

devtools/client/src/redux/listeners.ts

@@ -1,5 +1,5 @@
 import { createListenerMiddleware, isAnyOf } from "@reduxjs/toolkit";
-import { Actions, Events } from "./actions";
+import { Actions, EventActions } from "./actions";
 import { GET_DATA_BINDING_DETAILS } from "./aliases";
 import { type StoreState } from './state';
 
@@ -11,27 +11,26 @@ export const listenerMiddleware = createListenerMiddleware<StoreState>();
 
 listenerMiddleware.startListening({
   matcher: isAnyOf(
-    Events.actions['player-data-change-event'],
-    Events.actions['player-log-event'],
-    Events.actions['player-flow-start'],
+    EventActions['player-data-change-event'],
+    EventActions['player-log-event'],
+    EventActions['player-flow-start'],
   ),
   effect: (action, api) => {
     api.dispatch(Actions['player-timeline-event'](action.payload));
   },
 });
 
 listenerMiddleware.startListening({
-  actionCreator: Events.actions['runtime-init'],
+  actionCreator: EventActions['runtime-init'],
   effect: (_, api) => {
-    console.log("um")
     api.dispatch(Actions["clear-store"]())
   }
 })
 
 listenerMiddleware.startListening({
   matcher: isAnyOf(
-    Events.actions["player-init"],
-    Events.actions["player-removed"],
+    EventActions["player-init"],
+    EventActions["player-removed"],
   ),
   effect: (_, api) => {
     api.dispatch(Actions["selected-player"]())
@@ -40,8 +39,8 @@ listenerMiddleware.startListening({
 
 listenerMiddleware.startListening({
   matcher: isAnyOf(
-    Events.actions["player-flow-start"],
-    Events.actions["player-data-change-event"],
+    EventActions["player-flow-start"],
+    EventActions["player-data-change-event"],
   ),
   effect: (action, api) => {
     const { players } = api.getState();

devtools/client/src/redux/middleware.ts

@@ -1,14 +1,13 @@
-import { ActionReducerMapBuilder, createReducer } from '@reduxjs/toolkit';
+import { type ActionReducerMapBuilder, createReducer } from '@reduxjs/toolkit';
 import type { PlayersState } from './state';
-import { Actions, Events, Methods } from './actions';
+import { Actions, EventActions, type MethodThunks } from './actions';
 
 const initialState = {
   selectedPlayerId: null,
   activePlayers: {},
 } as PlayersState;
 
-// TODO: It'd be nice if methodThunks didn't have to be passed in - but it is kinda client dependent
-export const methodsReducer = (methods: Methods.MethodThunks) => (builder: ActionReducerMapBuilder<PlayersState>) => {
+const methodsReducer = (methods: MethodThunks) => (builder: ActionReducerMapBuilder<PlayersState>) => {
   builder.addCase(
     methods['player-runtime-info-request'].fulfilled,
     (state, action) => {
@@ -116,8 +115,8 @@ export const methodsReducer = (methods: Methods.MethodThunks) => (builder: Actio
   );
 };
 
-export const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
-  builder.addCase(Events.actions['player-init'], (state, action) => {
+const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
+  builder.addCase(EventActions['player-init'], (state, action) => {
     const {
       payload: { version, playerID },
     } = action;
@@ -129,11 +128,11 @@ export const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) =>
     state.version = version;
   });
 
-  builder.addCase(Events.actions['player-removed'], (state, action) => {
+  builder.addCase(EventActions['player-removed'], (state, action) => {
     delete state.activePlayers[action.payload.playerID];
   });
 
-  builder.addCase(Events.actions['player-flow-start'], (state, action) => {
+  builder.addCase(EventActions['player-flow-start'], (state, action) => {
     const {
       payload: { flow, playerID },
     } = action;
@@ -155,7 +154,7 @@ export const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) =>
     };
   });
 
-  builder.addCase(Events.actions['player-view-update-event'], (state, action) => {
+  builder.addCase(EventActions['player-view-update-event'], (state, action) => {
     const {
       payload: { playerID, update },
     } = action;
@@ -175,7 +174,7 @@ export const eventsReducer = (builder: ActionReducerMapBuilder<PlayersState>) =>
   });
 };
 
-export const actionsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
+const actionsReducer = (builder: ActionReducerMapBuilder<PlayersState>) => {
   builder.addCase(Actions['selected-player'], (state, action) => {
     if (action.payload) {
       state.selectedPlayerId = action.payload;
@@ -240,7 +239,7 @@ export const actionsReducer = (builder: ActionReducerMapBuilder<PlayersState>) =
   });
 };
 
-export const playersReducer = (methods: Methods.MethodThunks) =>
+export const playersReducer = (methods: MethodThunks) =>
   createReducer<PlayersState>(initialState, (builder) => {
     actionsReducer(builder)
     eventsReducer(builder)

devtools/client/src/redux/reducers.ts

@@ -7,13 +7,17 @@ import {
   ReducersMapObject,
 } from '@reduxjs/toolkit';
 import { StoreState } from './state';
-import { Methods } from './actions';
+import {
+  type MethodThunks,
+  type MethodHandler,
+  buildMethodThunks,
+} from './actions';
 import { playersReducer } from './reducers';
 import { listenerMiddleware } from './middleware';
 import { buildAliases } from './aliases';
 
 const createStore = (
-  methodThunks: Methods.MethodThunks,
+  methodThunks: MethodThunks,
   middleware?: Middleware<any, StoreState, Dispatch<AnyAction>>,
   reducers?: ReducersMapObject<StoreState, AnyAction>
 ): EnhancedStore<
@@ -30,9 +34,9 @@ const createStore = (
     middleware: (getDefaultMiddleware) => {
       const m = getDefaultMiddleware()
         .prepend(buildAliases(methodThunks))
-        .concat(listenerMiddleware.middleware)
+        .concat(listenerMiddleware.middleware);
 
-      if (middleware) m.concat(middleware)
+      if (middleware) m.concat(middleware);
 
       return m;
     },
@@ -46,11 +50,16 @@ const createStore = (
  */
 // TODO: Turn into store enhancer? Maybe remove middleware and additionalReducers?
 export const createDevtoolsStore = (
-  onMethodRequest: Methods.MethodHandler,
+  onMethodRequest: MethodHandler,
   middleware?: Middleware<any, StoreState, Dispatch<AnyAction>>,
   additionalReducers?: any
 ): EnhancedStore<
   StoreState,
   any,
   Middleware<any, StoreState, Dispatch<AnyAction>>[]
-> => createStore(Methods.buildAsyncThunks(onMethodRequest), middleware, additionalReducers)
+> =>
+  createStore(
+    buildMethodThunks(onMethodRequest),
+    middleware,
+    additionalReducers
+  );