From 766a48f7c042448ca17edb67520df127d45eb9b7 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Sat, 20 May 2023 15:46:28 +1000
Subject: [PATCH] Centralised all infoDialogSlice related storybook preparation
 in infoDialogSlice.storybook.ts to reduce code footprint

---
 .../EvolutionSpecies.stories.tsx              | 53 ++-----------------
 .../InfoDialogComponent.stories.tsx           | 53 ++-----------------
 .../InfoDialog/infoDialogSlice.storybook.ts   | 48 +++++++++++++++++
 3 files changed, 58 insertions(+), 96 deletions(-)
 create mode 100644 src/features/InfoDialog/infoDialogSlice.storybook.ts

diff --git a/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx b/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
index 6470480..a13f49c 100644
--- a/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
+++ b/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
@@ -1,55 +1,12 @@
 import { Provider } from 'react-redux';
-import { configureStore, createSlice } from '@reduxjs/toolkit';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import EvolutionSpecies from './EvolutionSpecies';
-import { InfoDialogStateProps } from 'features/InfoDialog/infoDialogSlice';
-
-const MockedState = {
-  // Copied from Redux DevTools from browser
-  infoDialog: {
-    isOpen: false,
-    InfoDialogDetails: {
-      id: 0,
-      name: '',
-      genera: '',
-      image: '',
-      types: [],
-      height: 0,
-      weight: 0,
-      genderRatio: 0,
-      description: '',
-      abilities: [],
-      stats: [],
-      evolutionChain: [],
-    },
-  },
-};
-
-interface MockStoreProps {
-  InfoDialogState: InfoDialogStateProps;
-  children: React.ReactNode;
-}
-
-const mockSlice = (infoDialogState: {
-  InfoDialogState: InfoDialogStateProps;
-}) => {
-  return createSlice({
-    name: 'infoDialog',
-    initialState: infoDialogState,
-    reducers: {},
-  });
-};
-
-const mockStore = (infoDialogState: {
-  InfoDialogState: InfoDialogStateProps;
-}) => {
-  return configureStore({
-    reducer: {
-      infoDialog: mockSlice(infoDialogState).reducer,
-    },
-  });
-};
+import {
+  MockedState,
+  MockStoreProps,
+  mockStore,
+} from 'features/InfoDialog/infoDialogSlice.storybook';
 
 const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => (
   <Provider store={mockStore({ InfoDialogState })}>{children}</Provider>
diff --git a/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx b/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
index 5bd8ae4..bf255ed 100644
--- a/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
+++ b/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
@@ -1,55 +1,12 @@
 import { Provider } from 'react-redux';
-import { configureStore, createSlice } from '@reduxjs/toolkit';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import InfoDialogComponent from './InfoDialogComponent';
-import { InfoDialogStateProps } from 'features/InfoDialog/infoDialogSlice';
-
-const MockedState = {
-  // Copied from Redux DevTools from browser
-  infoDialog: {
-    isOpen: false,
-    InfoDialogDetails: {
-      id: 0,
-      name: '',
-      genera: '',
-      image: '',
-      types: [],
-      height: 0,
-      weight: 0,
-      genderRatio: 0,
-      description: '',
-      abilities: [],
-      stats: [],
-      evolutionChain: [],
-    },
-  },
-};
-
-interface MockStoreProps {
-  InfoDialogState: InfoDialogStateProps;
-  children: React.ReactNode;
-}
-
-const mockSlice = (infoDialogState: {
-  InfoDialogState: InfoDialogStateProps;
-}) => {
-  return createSlice({
-    name: 'infoDialog',
-    initialState: infoDialogState,
-    reducers: {},
-  });
-};
-
-const mockStore = (infoDialogState: {
-  InfoDialogState: InfoDialogStateProps;
-}) => {
-  return configureStore({
-    reducer: {
-      infoDialog: mockSlice(infoDialogState).reducer,
-    },
-  });
-};
+import {
+  MockedState,
+  MockStoreProps,
+  mockStore,
+} from 'features/InfoDialog/infoDialogSlice.storybook';
 
 const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => (
   <Provider store={mockStore({ InfoDialogState })}>{children}</Provider>
diff --git a/src/features/InfoDialog/infoDialogSlice.storybook.ts b/src/features/InfoDialog/infoDialogSlice.storybook.ts
new file mode 100644
index 0000000..5269ece
--- /dev/null
+++ b/src/features/InfoDialog/infoDialogSlice.storybook.ts
@@ -0,0 +1,48 @@
+import { InfoDialogStateProps } from './infoDialogSlice';
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+
+export const MockedState = {
+  // Copied from Redux DevTools from browser
+  infoDialog: {
+    isOpen: false,
+    InfoDialogDetails: {
+      id: 0,
+      name: '',
+      genera: '',
+      image: '',
+      types: [],
+      height: 0,
+      weight: 0,
+      genderRatio: 0,
+      description: '',
+      abilities: [],
+      stats: [],
+      evolutionChain: [],
+    },
+  },
+};
+
+export interface MockStoreProps {
+  InfoDialogState: InfoDialogStateProps;
+  children: React.ReactNode;
+}
+
+export const mockSlice = (infoDialogState: {
+  InfoDialogState: InfoDialogStateProps;
+}) => {
+  return createSlice({
+    name: 'infoDialog',
+    initialState: infoDialogState,
+    reducers: {},
+  });
+};
+
+export const mockStore = (infoDialogState: {
+  InfoDialogState: InfoDialogStateProps;
+}) => {
+  return configureStore({
+    reducer: {
+      infoDialog: mockSlice(infoDialogState).reducer,
+    },
+  });
+};