text: import React from 'react';
  import { Provider } from 'react-redux';
  import { configureStore, createSlice } from '@reduxjs/toolkit';
  import * as TaskListStories from './TaskList.stories';
  import { fireEvent, within } from '@storybook/testing-library';
  import { PureInboxScreen } from './InboxScreen';
  
  // A super-simple mock of a redux store
  const Mockstore = configureStore({
    reducer: {
      tasks: createSlice({
        name: 'tasks',
        initialState: TaskListStories.Default.args.tasks,
        reducers: {
          updateTaskState: (state, action) => {
            const { id, newTaskState } = action.payload;
            const task = state.findIndex((task) => task.id === id);
            if (task >= 0) {
              state[task].state = newTaskState;
            }
          },
        },
      }).reducer,
    },
  });
  
  export default {
    component: PureInboxScreen,
    decorators: [story => <Provider store={Mockstore}>{story()}</Provider>],
    title: 'PureInboxScreen',
  };
  
  const Template = args => <PureInboxScreen {...args} />;
  
  export const Default = Template.bind({});
  
  export const Error = Template.bind({});
  Error.args = {
    error: 'Something',
  };
  
  export const WithInteractions = Template.bind({});
  WithInteractions.play = async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    // Simulates pinning the first task
    await fireEvent.click(canvas.getByLabelText("pinTask-1"));
    // Simulates pinning the third task
    await fireEvent.click(canvas.getByLabelText("pinTask-3"));
  };
  