Jason
/
pokertk
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Centralised all infoDialogSlice related storybook preparation in infoDialogSlice.storybook.ts to reduce code footprint

develop
Jason Zhu 2023-05-20 15:46:28 +10:00
parent 8f217d678a
commit 766a48f7c0
3 changed files with 58 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
View File

@ -1,55 +1,12 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import EvolutionSpecies from './EvolutionSpecies'; import EvolutionSpecies from './EvolutionSpecies';
import { InfoDialogStateProps } from 'features/InfoDialog/infoDialogSlice'; import {
MockedState,
const MockedState = { MockStoreProps,
// Copied from Redux DevTools from browser mockStore,
infoDialog: { } from 'features/InfoDialog/infoDialogSlice.storybook';
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,
},
});
};
const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => ( const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => (
<Provider store={mockStore({ InfoDialogState })}>{children}</Provider> <Provider store={mockStore({ InfoDialogState })}>{children}</Provider>

53
src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
View File

@ -1,55 +1,12 @@
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import InfoDialogComponent from './InfoDialogComponent'; import InfoDialogComponent from './InfoDialogComponent';
import { InfoDialogStateProps } from 'features/InfoDialog/infoDialogSlice'; import {
MockedState,
const MockedState = { MockStoreProps,
// Copied from Redux DevTools from browser mockStore,
infoDialog: { } from 'features/InfoDialog/infoDialogSlice.storybook';
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,
},
});
};
const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => ( const Mockstore: React.FC<MockStoreProps> = ({ InfoDialogState, children }) => (
<Provider store={mockStore({ InfoDialogState })}>{children}</Provider> <Provider store={mockStore({ InfoDialogState })}>{children}</Provider>

48
src/features/InfoDialog/infoDialogSlice.storybook.ts 100644
View File

@ -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,
},
});
};