Chats: Click chat to open pane

app/soapbox/actions/chats.js

@@ -1,5 +1,7 @@
 import api from '../api';
 import { importFetchedChats } from 'soapbox/actions/importer';
+import { getSettings, changeSetting } from 'soapbox/actions/settings';
+import { Map as ImmutableMap } from 'immutable';
 
 export const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
 export const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';
@@ -16,3 +18,17 @@ export function fetchChats() {
     });
   };
 }
+
+export function openChat(chatId) {
+  return (dispatch, getState) => {
+    const panes = getSettings(getState()).getIn(['chats', 'panes']);
+    const idx = panes.findIndex(pane => pane.get('chat_id') === chatId);
+
+    if (idx > -1) {
+      return dispatch(changeSetting(['chats', 'panes', idx, 'state'], 'open'));
+    } else {
+      const newPane = ImmutableMap({ chat_id: chatId, state: 'open' });
+      return dispatch(changeSetting(['chats', 'panes'], panes.push(newPane)));
+    }
+  };
+}

app/soapbox/features/chats/components/chat_panes.js

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
+import { getSettings } from 'soapbox/actions/settings';
 import ChatList from './chat_list';
 import { FormattedMessage } from 'react-intl';
 import { makeGetChat } from 'soapbox/selectors';
-import { fromJS } from 'immutable';
 import Avatar from 'soapbox/components/avatar';
 import { acctFull } from 'soapbox/utils/accounts';
+import { openChat } from 'soapbox/actions/chats';
 
 const addChatsToPanes = (state, panesData) => {
   const getChat = makeGetChat();
@@ -42,10 +42,8 @@ class ChatPanes extends ImmutablePureComponent {
   }
 
   handleClickChat = (chat) => {
-    // TODO: Refactor
-    this.props.dispatch(changeSetting(['chats', 'panes'], fromJS([
-      { chat_id: chat.get('id'), state: 'open' },
-    ])));
+    this.props.dispatch(openChat(chat.get('id')));
+    // TODO: Focus chat input
   }
 
   renderChatPane = (pane, i) => {