signal-desktop/sticker-creator/components/Toaster.stories.tsx

import * as React from 'react';
import { debounce, dropRight } from 'lodash';
import { storiesOf } from '@storybook/react';
import { text as textKnob } from '@storybook/addon-knobs';

import { StoryRow } from '../elements/StoryRow';
import { Toaster } from './Toaster';

storiesOf('Sticker Creator/components', module).add('Toaster', () => {
  const inputText = textKnob('Slices', ['error 1', 'error 2'].join('|'));
  const initialState = React.useMemo(() => inputText.split('|'), [inputText]);
  const [state, setState] = React.useState(initialState);

  // TODO not sure how to fix this
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const handleDismiss = React.useCallback(
    // Debounce is required here since auto-dismiss is asynchronously called
    // from multiple rendered instances (multiple themes)
    debounce(() => {
      setState(dropRight);
    }, 10),
    [setState]
  );

  return (
    <StoryRow>
      <Toaster
        loaf={state.map((text, id) => ({ id, text }))}
        onDismiss={handleDismiss}
      />
    </StoryRow>
  );
});