Hook on leaveing a story

[shilman]

Issue by linonetwo
Monday Jan 16, 2017 at 02:53 GMT
Originally opened as storybook-eol/react-native-storybook#120

---

Some component will change Orientation of device, so seems that we need a hook to revert the changing of Orientation on leaving a story.

[shilman]

Comment by mnmtanish
Sunday Jan 22, 2017 at 15:29 GMT

---

I think we should be able to do this with a decorator. The basic idea is to wrap the story with a component and run the hook function on componentWillUnmount

storiesOf('Button', module)
  .addDecorator(storyHook({
    componentWillUnmount() {
      // reset screen orientation
    }
  }))
  .add('story - 1', () => (
    <pre>STORY_1</pre>
  ))

[shilman]

Comment by linonetwo
Sunday Jan 22, 2017 at 16:00 GMT

---

That would be much more easy to use. I'm currently having to use redux to do this clean up work for every component.

storiesOf('LineChart', module)
  .addDecorator((getStory) => {
    const store = getNewStore();
    const token = 'e77b3f75-1daa-4ded-b52a-7bbd65f758f5';
    store.dispatch(STORYBOOK.request({ orientation: 'landscape' }));
    store.dispatch(LOGIN.request({ token, jump: false }));
    Orientation.lockToLandscape();
    Promise.delay(2000)
    .then(() => {
      store.dispatch(LOAD_LINE_CHART.request({ areaType: 'Company', jump: false }));
    });
    return (
      <Provider store={store}>
        {getStory()}
      </Provider>
    );
  })
  .add('initial', () => (
    <LineChart areaType="Company" />
  ));

Where STORYBOOK.request({ orientation: 'landscape' }) is an action creator for informing redux to do something special for storybook. If I don't pass orientation: 'landscape' to it, it will reset the orientation.

[ndelangen]

#845 (comment) sounds like an acceptable solution?

Please re-open if you still experience this problem 👍