From 531c28fb828dd322782dca17d7eb248fb816a873 Mon Sep 17 00:00:00 2001 From: Nikita Levshin Date: Wed, 20 Nov 2024 13:17:50 +0300 Subject: [PATCH] fix: remove diff column from history --- src/components/HistoryView.tsx | 8 +- src/redux/withReduxDecorator.tsx | 140 ++++++++++++++++--------------- src/types.ts | 2 +- src/utils/getRestrictedObject.ts | 4 +- 4 files changed, 81 insertions(+), 73 deletions(-) diff --git a/src/components/HistoryView.tsx b/src/components/HistoryView.tsx index b44e8f4..405f1ac 100644 --- a/src/components/HistoryView.tsx +++ b/src/components/HistoryView.tsx @@ -73,7 +73,7 @@ const Header: FC<{}> = () => { Time Type Action - Diff + {/* Diff */} Previous State Current State @@ -103,7 +103,7 @@ interface RowProps extends OnDispatchEvent { emit: (eventName: string, ...args: any[]) => void; } -const Row: FC = ({ date, action, diff, prev, state, emit }) => { +const Row: FC = ({ date, action, prev, state, emit }) => { return ( {formatDate(date)} @@ -113,9 +113,9 @@ const Row: FC = ({ date, action, diff, prev, state, emit }) => { - + {/* - + */} diff --git a/src/redux/withReduxDecorator.tsx b/src/redux/withReduxDecorator.tsx index c238f66..346fec3 100644 --- a/src/redux/withReduxDecorator.tsx +++ b/src/redux/withReduxDecorator.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; -import { Provider as ReduxProvider } from 'react-redux'; +import { Provider as ReduxProvider } from "react-redux"; import { Action } from "@reduxjs/toolkit"; -import { diff as differ } from "jsondiffpatch"; +// import { diff as differ } from "jsondiffpatch"; // import { STORY_CHANGED } from "@storybook/core-events"; // todo: using storybook types faced with memory leak on build step // import type { StoryContext, StoryFn } from "@storybook/react"; @@ -17,85 +17,91 @@ import { } from "./actionCreators"; import { getStore } from "./enhancer"; import { getRestrictedObject } from "../utils/getRestrictedObject"; -import type { ComponentType } from 'react'; +import type { ComponentType } from "react"; // import { replaceValuesIteratively } from "../utils/replaceValuesIteratively"; let nextId = 0; -export const withRedux = (Provider: typeof ReduxProvider) => - (Story: ComponentType, context: { id: string; parameters: Record }) => { +export const withRedux = + (Provider: typeof ReduxProvider) => + ( + Story: ComponentType, + context: { id: string; parameters: Record }, + ) => { + const storyId = context.id; + const mergeStateRef = useRef(""); - const storyId = context.id; - const mergeStateRef = useRef(""); + const initialState = context.parameters[PARAM_REDUX_MERGE_STATE]; - const initialState = context.parameters[PARAM_REDUX_MERGE_STATE]; + const store = getStore(); - const store = getStore(); - - const emit = useChannel({ - [EVENTS.SET_STATE]: (stateJson: string) => - store.dispatch( - setStateAction( - initialState - ? { ...store.getState(), ...parse(stateJson) } - : parse(stateJson), + const emit = useChannel({ + [EVENTS.SET_STATE]: (stateJson: string) => + store.dispatch( + setStateAction( + initialState + ? { ...store.getState(), ...parse(stateJson) } + : parse(stateJson), + ), ), - ), - [EVENTS.SET_STATE_AT_PATH]: (path: string, value: any) => - store.dispatch(setStateAtPathAction(path, value)), - [EVENTS.DISPATCH]: (action: Action) => store.dispatch(action), - }); + [EVENTS.SET_STATE_AT_PATH]: (path: string, value: any) => + store.dispatch(setStateAtPathAction(path, value)), + [EVENTS.DISPATCH]: (action: Action) => store.dispatch(action), + }); - const onDispatchListener: StoreListener = (action, prev, state): void => { - const diff = differ(prev, state); - const date = new Date(); - const restrictedPrev = initialState - ? getRestrictedObject(prev, initialState) - : prev; - const restrictedState = initialState - ? getRestrictedObject(state, initialState) - : state; + const onDispatchListener: StoreListener = (action, prev, state): void => { + // TODO: replace with another function. This one causes error when compare `null` and `{}` + // const diff = differ(prev, state); + const date = new Date(); + const restrictedPrev = initialState + ? getRestrictedObject(prev, initialState) + : prev; + const restrictedState = initialState + ? getRestrictedObject(state, initialState) + : state; - const event = { - id: nextId++, - date, - action, - diff: JSON.stringify(diff), - prev: JSON.stringify(restrictedPrev), - state: JSON.stringify(restrictedState), + const event = { + id: nextId++, + date, + action, + // diff: JSON.stringify(diff), + prev: JSON.stringify(restrictedPrev), + state: JSON.stringify(restrictedState), + }; + emit(EVENTS.ON_DISPATCH, event); }; - emit(EVENTS.ON_DISPATCH, event); - }; - useEffect(() => { - const mergeStateChanged = initialState !== mergeStateRef.current; - mergeStateRef.current = initialState; + useEffect(() => { + const mergeStateChanged = initialState !== mergeStateRef.current; + mergeStateRef.current = initialState; - // Clearing state when changing history - if (storyId) { - store.dispatch(resetStateAction()); - } + // Clearing state when changing history + if (storyId) { + store.dispatch(resetStateAction()); + } - // Processing initial state - if (initialState && mergeStateChanged) { - store.dispatch(setStateAction({ ...store.getState(), ...initialState })); - emit(EVENTS.INIT, { - state: JSON.stringify(initialState), - }); - } else if (!initialState) - emit(EVENTS.INIT, { - state: JSON.stringify(store.getState()), - }); - }, [storyId, initialState]); + // Processing initial state + if (initialState && mergeStateChanged) { + store.dispatch( + setStateAction({ ...store.getState(), ...initialState }), + ); + emit(EVENTS.INIT, { + state: JSON.stringify(initialState), + }); + } else if (!initialState) + emit(EVENTS.INIT, { + state: JSON.stringify(store.getState()), + }); + }, [storyId, initialState]); - if (store.__WITH_REDUX_ENABLED__ === undefined) - throw new Error("withRedux enhancer is not enabled in the store"); + if (store.__WITH_REDUX_ENABLED__ === undefined) + throw new Error("withRedux enhancer is not enabled in the store"); - store.__WITH_REDUX_ENABLED__?.listenToStateChange(onDispatchListener); + store.__WITH_REDUX_ENABLED__?.listenToStateChange(onDispatchListener); - return ( - - - - ); -}; + return ( + + + + ); + }; diff --git a/src/types.ts b/src/types.ts index ddffffa..24728a5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,7 +5,7 @@ export interface OnDispatchEvent { id: number; date: Date; action: Action; - diff: string; + // diff: string; prev: string; state: string; } diff --git a/src/utils/getRestrictedObject.ts b/src/utils/getRestrictedObject.ts index 4c335bb..df6ef56 100644 --- a/src/utils/getRestrictedObject.ts +++ b/src/utils/getRestrictedObject.ts @@ -19,7 +19,9 @@ export const getRestrictedObject = ( if (template[key] !== undefined && source[key as keyof T] !== undefined) { if ( typeof template[key] === "object" && - typeof source[key as keyof T] === "object" + template[key] !== null && + typeof source[key as keyof T] === "object" && + source[key as keyof T] !== null ) { // Recursively copy nested objects, do a type cast result[key as keyof T] = getRestrictedObject(