diff --git a/packages/connect-wallet/src/middleware/loggerMiddleware.test.ts b/packages/connect-wallet/src/middleware/loggerMiddleware.test.ts index 88e1a61b..e6380991 100644 --- a/packages/connect-wallet/src/middleware/loggerMiddleware.test.ts +++ b/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 diff --git a/packages/connect-wallet/src/middleware/loggerMiddleware.ts b/packages/connect-wallet/src/middleware/loggerMiddleware.ts index a90143ac..072420c6 100644 --- a/packages/connect-wallet/src/middleware/loggerMiddleware.ts +++ b/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 => { - 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 = + ({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;