🎨 Improve readability + format of logger middleware

packages/connect-wallet/src/middleware/loggerMiddleware.test.ts

@@ -81,7 +81,7 @@ describe('loggerMiddleware', () => {
       );
 
       // Test the previous state
-      expect(spyLog.mock.calls[1][0]).toContain('prev state:');
+      expect(spyLog.mock.calls[1][0]).toContain('previous state:');
       expect(spyLog.mock.calls[1][2]).toEqual(expectedPrevState);
 
       // Test the action and payload

packages/connect-wallet/src/middleware/loggerMiddleware.ts

@@ -1,92 +1,52 @@
 /* eslint-disable no-console */
-/**
- * Expected log format:
- *
- * ` state log:`
- *    actionName: 'persist/REHYDRATE'
- *
- */
-import type {Action, Middleware} from 'redux';
+import type {Middleware} from 'redux';
 
 import type {AppDispatch, RootState} from '../store/configureStore';
 
-// can make use of dark mode context here.
-interface LogEntry {
-  action: Action;
-  created: string;
-  next: RootState | undefined;
-  prev: RootState;
-}
-
-const logger = (): Middleware<AppDispatch, RootState> => {
-  const logs: LogEntry[] = [];
-
-  return ({getState}) =>
-    (next) =>
-    (action) => {
-      const state = getState();
-
-      const date = new Date();
-
-      const log: LogEntry = {
-        action,
-        created: date.toLocaleTimeString('default', {
-          hour: 'numeric',
-          minute: 'numeric',
-          second: 'numeric',
-        }),
-        next: undefined,
-        prev: state,
-      };
-
-      const returnedValue = next(action);
-
-      log.next = getState();
-      logs.push(log);
-
-      printLogs(logs);
-
-      // reset logs
-      logs.length = 0;
-
-      return returnedValue;
-    };
-};
-
-function printLogs(logs: LogEntry[]) {
-  logs.forEach((log, key) => {
-    const {action, created, prev} = log;
-    let {next} = log;
-
-    const nextEntry = logs[key + 1];
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (nextEntry) {
-      next = nextEntry.prev;
-    }
-
-    // Message
-    const actionCSS = `color: #3B82F6; font-weight: bold`;
-    const headerCSS = ['color: #059669;', 'color: gray; font-weight: lighter;'];
-    const nextCSS = `color: #059669; font-weight: bold`;
-    const prevCSS = `color: #8B5CF6; font-weight: bold`;
-
-    // Render
+// Different CSS styles for the logger.
+const ACTION_CSS = `color: #3B82F6; font-weight: bold`;
+const HEADER_CSS = ['color: #059669;', 'color: gray; font-weight: lighter;'];
+const NEXT_STATE_CSS = `color: #059669; font-weight: bold`;
+const PREV_STATE_CSS = `color: #8B5CF6; font-weight: bold`;
+
+const logger: Middleware<AppDispatch, RootState> =
+  ({getState}) =>
+  (next) =>
+  (action) => {
+    // Timestamp
+    const date = new Date();
+    const formattedTimestamp = date.toLocaleTimeString('default', {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    });
+
+    // Previous State
+    const previousState = getState();
+
+    // Ensure we return the event so that the store actually receives the dispatched event.
+    const returnedValue = next(action);
+
+    // Get our next state after the action has been dispatched to our store.
+    const nextState = getState();
+
+    // Begin logging
     console.groupCollapsed(
-      `%c@shopify/connect-wallet%c: ${action.type} @${created}`,
-      ...headerCSS,
+      `%c@shopify/connect-wallet%c: ${action.type} @${formattedTimestamp}`,
+      ...HEADER_CSS,
     );
 
-    console.log('%cprev state:', prevCSS, prev);
-    console.log('%caction:', actionCSS, action);
-    console.log('%cnext state:', nextCSS, next);
+    console.log('%cprevious state:', PREV_STATE_CSS, previousState);
+    console.log('%caction:', ACTION_CSS, action);
+    console.log('%cnext state:', NEXT_STATE_CSS, nextState);
 
     try {
       console.groupEnd();
     } catch (error) {
       console.log('—— log end ——');
     }
-  });
-}
 
-export default logger();
+    return returnedValue;
+  };
+
+export default logger;