Merge pull request #13 from upteran/fix-diff-state-with-null

fix: remove diff column from history
upteran · Nov 20, 2024 · f1ab9e5 · f1ab9e5
2 parents 0368fdd + 531c28f
commit f1ab9e5
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 73 deletions.
diff --git a/src/components/HistoryView.tsx b/src/components/HistoryView.tsx
@@ -73,7 +73,7 @@ const Header: FC<{}> = () => {
       <ThStyle>Time</ThStyle>
       <ThStyle>Type</ThStyle>
       <ThStyle>Action</ThStyle>
-      <ThStyle>Diff</ThStyle>
+      {/* <ThStyle>Diff</ThStyle> */}
       <ThStyle>Previous State</ThStyle>
       <ThStyle>Current State</ThStyle>
       <ThStyle> </ThStyle>
@@ -103,7 +103,7 @@ interface RowProps extends OnDispatchEvent {
   emit: (eventName: string, ...args: any[]) => void;
 }
 
-const Row: FC<RowProps> = ({ date, action, diff, prev, state, emit }) => {
+const Row: FC<RowProps> = ({ date, action, prev, state, emit }) => {
   return (
     <tr>
       <TdStyle>{formatDate(date)}</TdStyle>
@@ -113,9 +113,9 @@ const Row: FC<RowProps> = ({ date, action, diff, prev, state, emit }) => {
       <TdStyle>
         <Json data={action} />
       </TdStyle>
-      <TdStyle>
+      {/* <TdStyle>
         <Json data={parse(diff)} />
-      </TdStyle>
+      </TdStyle> */}
       <TdStyle>
         <Json data={parse(prev)} />
       </TdStyle>

diff --git 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<any>, context: { id: string; parameters: Record<string, any> }) => {
+export const withRedux =
+  (Provider: typeof ReduxProvider) =>
+  (
+    Story: ComponentType<any>,
+    context: { id: string; parameters: Record<string, any> },
+  ) => {
+    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 (
-    <Provider store={store}>
-      <Story />
-    </Provider>
-  );
-};
+    return (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    );
+  };
diff --git 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
@@ -19,7 +19,9 @@ export const getRestrictedObject = <T>(
     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(