unistore adapter

createUnistoreAdapter.js

import React from "react";
import createUnistore from "unistore";
import { Provider, connect } from "unistore/react";

const createUnistoreAdapter = ({
  initialState = {
    messages: {},
    areMessagesLoading: false,
    users: {}
  },
  fetchMessages,
  fetchUser,
}) => {
  const store = createUnistore(initialState);

  const getMessages = async state => {
    if (Object.values(state.messages).length > 0 || state.areMessagesLoading) {
      return;
    }
    store.setState({
      areMessagesLoading: true
    }, false, { name: 'messagesLoading' });
    const messages = await fetchMessages();
    const users = await Promise.all(messages.map(msg => fetchUser(msg.userId)));
    const usersMap = users.reduce(
      (usersMap, user) => ({
        ...usersMap,
        [user.id]: user
      }),
      {}
    );
    return {
      areMessagesLoading: false,
      users: {
        ...store.getState().users,
        ...usersMap
      },
      messages: {
        ...store.getState().messages,
        ...messages
      }
    };
  };

  const messagesSelector = state => {
    return {
      loading: state.areMessagesLoading,
      messages: Object.values(state.messages).map(msg => ({
        id: msg.id,
        content: msg.content,
        user: state.users[msg.userId]
      }))
    };
  };

  const dispatchGetMessagesAction = store.action(getMessages);

  const MessageListStateProvider = connect(
    "messages, areMessagesLoading, users"
  )(
    class GetMessagesOnMount extends React.Component {
      componentDidMount() {
        dispatchGetMessagesAction();
      }
      render() {
        const { children, ...state } = this.props;
        return !(
          Object.values(state.messages).length === 0 &&
          !state.areMessagesLoading
        )
          ? children(messagesSelector(state))
          : null;
      }
    }
  );

  const ContextProvider = ({ children }) => (
    <Provider store={store}>{React.Children.only(children)}</Provider>
  );

  return Object.freeze({
    MessageListStateProvider,
    ContextProvider,
  });
};

export default createUnistoreAdapter;