graphan

export const Page = ({ posts, scrollToTop }) => (
  <div>
    {posts && posts.map(post => (
      <div key={post.title} dangerouslySetInnerHTML={{ __html: post.content }} />
    ))}
    <a className="toTop" onClick={scrollToTop} />
  </div>
);

........

graphan

import { branch, renderComponent } from 'recompose';

const Loading = () => (
  <div>Loading....</div>
);

export const withLoadingComponent = branch(
  props => props.loading,
  renderComponent(Loading),
);

graphan

export const Component = ({ data: { loading, ... } }) => {
  if (loading) {
    ...
    return(<LoadingComponent>);
  }
  ...
};

graphan

export const Component = () => {
  const onClickHandler = () => {
    ...
  };

  return (
    <div onClick={onClickHandler}></div>
  );
};

graphan

import { compose, withHandlers } from 'recompose';

// Component Code here

export default compose(
  connect(mapStateToProps),
  graphql(PAGE_QUERY, getOptions(['posts'])),
  withLoadingComponent,
  withHandlers(handlers)
)(Page);

graphan

export const LANG_QUERY = gql`
...
`;

const mapStateToProps = state => ({
  language: state.language,
});
const mapDispatchToProps = dispatch => ({
  changeLang: (lang) => {
    dispatch(setLanguage(lang));