"Live" React Native Storybook story

journal.stories.js

/* eslint-disable import/no-unresolved, indent */

import React from 'react';
import { ScrollView } from 'react-native';
import { gql, graphql, ApolloProvider } from 'react-apollo';
import { storiesOf } from '@storybook/react-native';
import { compose, withStateHandlers, withProps, branch, renderNothing } from 'recompose';
import { get } from 'lodash';
import store from '/app/store';
import client, { networkInterface } from '/app/client';
import ChapterJournal, { Journal as ChapterJournalWithoutData } from '../chapter-journal';

// This tells the server to use a test user
networkInterface.use([{
  applyMiddleware(request, next) {
    if (!request.options.headers) {
      request.options.headers = {};
    }
    request.options.headers.referer = 'Storybook';
    next();
  },
}]);

const MockChapterJournal = compose(
  withStateHandlers({
    text: '',
  }, {
    saveAnnotation: () => ({ text }) => ({ text }),
  }),
  withProps({
    book: 'Matthew',
    chapter: 1,
  }),
)(ChapterJournalWithoutData);

const LiveJournalContainer = compose(
  graphql(gql`
   query getDailyScriptureAnnotations {
     scripture {
       dailyScripture {
         scripture {
           start {
             book
             chapter
           }
         }
         annotations {
           _id
           text
           user {
             _id
             firstName
             lastName
           }
           scripture {
            start {
              book
              chapter
              verse
            }
            end {
              book
              chapter
              verse
            }
          }
         }
       }
     }
   }
  `, {
    props: ({ data }) => {
      const { book, chapter } = get(data, 'scripture.dailyScripture.scripture.start', {});
      const { _id, text } = get(data, 'scripture.dailyScripture.annotations[0]', {});
      return {
        _id,
        book,
        chapter,
        text,
        loading: data.loading,
      };
    },
  }),
  branch(
    ({ loading }) => loading,
    renderNothing,
  ),
)(ChapterJournal);

storiesOf('Scripture/Journal/Personal', module)
  .add('Chapter', () => (
    <ScrollView>
      <MockChapterJournal />
    </ScrollView>
  ))
  .add('Chapter (live)', () => (
    <ApolloProvider store={store} client={client}>
      <ScrollView>
        <LiveJournalContainer />
      </ScrollView>
    </ApolloProvider>
  ))
;