Progress on dms, code cleanup

Progress on dms, code cleanup

app/javascript/gabsocial/layouts/messages_layout.js

@@ -1,26 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
 import { me } from '../initial_state'
+import { openModal } from '../actions/modal'
 import {
   CX,
   BREAKPOINT_EXTRA_SMALL,
+  MODAL_CHAT_CONVERSATION_CREATE,
 } from '../constants'
 import Layout from './layout'
 import Responsive from '../features/ui/util/responsive_component'
+import List from '../components/list'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
-import MessagesSearch from '../features/messages/components/messages_search'
-import MessagesList from '../features/messages/components/messages_list'
-import MessagesHeader from '../features/messages/components/messages_header'
+import ChatConversationsSearch from '../features/messages/components/chat_conversations_search'
+import ChatConversationsList from '../features/messages/components/chat_conversations_list'
+import ChatSettingsHeader from '../features/messages/components/chat_settings_header'
+import ChatConversationRequestsListItem from '../features/messages/components/chat_conversations_requests_list_item'
 
-class MessagesLayout extends ImmutablePureComponent {
+class MessagesLayout extends React.PureComponent {
+
+  onClickAdd = () => {
+    this.props.onOpenChatConversationCreateModal()
+  }
 
   render() {
     const {
-      children,
-      showBackBtn,
       title,
+      children,
+      isSettings,
+      showBackBtn,
+      source,
+      currentConversationIsRequest,
     } = this.props
 
     const mainBlockClasses = CX({
@@ -31,22 +41,25 @@ class MessagesLayout extends ImmutablePureComponent {
       jcEnd: 1,
     })
 
+    console.log("currentConversationIsRequest:",currentConversationIsRequest)
+
     return (
       <Layout
         showBackBtn
-        showGlobalFooter
         noRightSidebar
+        noComposeButton
+        showGlobalFooter
         showLinkFooterInSidebar
         page='messages'
         title='Chats'
         actions={[
           {
             icon: 'cog',
-            onClick: this.onOpenCommunityPageSettingsModal,
+            to: '/messages/settings',
           },
           {
             icon: 'pencil',
-            onClick: this.onOpenCommunityPageSettingsModal,
+            onClick: () => this.onClickAdd(),
           },
         ]}
       >
@@ -63,15 +76,50 @@ class MessagesLayout extends ImmutablePureComponent {
 
               <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                 <div className={[_s.d, _s.w340PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}>
-                  <div className={[_s.d, _s.w340PX].join(' ')}>
+                  <div className={[_s.d, _s.h100PC, _s.overflowHidden, _s.w100PC, _s.boxShadowNone].join(' ')}>
                     
-                    { /* <MessagesHeader /> */ }
-                    <MessagesSearch />
-                    <MessagesList />
+                    {
+                      (isSettings || currentConversationIsRequest) &&
+                      <React.Fragment>
+                        <ChatSettingsHeader />
+                        <List
+                          items={[
+                            {
+                              title: 'Preferences',
+                              to: '/messages/settings',
+                            },
+                            {
+                              title: 'Message Requests',
+                              to: '/messages/requests',
+                            },
+                            {
+                              title: 'Blocked Chats',
+                              to: '/messages/blocks',
+                            },
+                            {
+                              title: 'Muted Chats',
+                              to: '/messages/mutes',
+                            },
+                          ]}
+                        />
+                      </React.Fragment>
+                    }
+
+                    {
+                      !isSettings && !currentConversationIsRequest &&
+                      <React.Fragment>
+                        <ChatConversationsSearch />
+                        <div className={[_s.d, _s.w100PC, _s.posAbs, _s.bottom0, _s.top60PX, _s.overflowYScroll].join(' ')}>
+                          <ChatConversationRequestsListItem />
+                          <ChatConversationsList source={source} />
+                        </div>
+                      </React.Fragment>
+                    }
 
                   </div>
                 </div>
               </Responsive>
+              
 
               <div className={[_s.d, _s.flexGrow1, _s.h100PC, _s.bgPrimary, _s.borderColorSecondary, _s.borderRight1PX, _s.z1].join(' ')}>
                 <div className={[_s.d, _s.w100PC, _s.h100PC].join(' ')}>
@@ -87,10 +135,26 @@ class MessagesLayout extends ImmutablePureComponent {
 
 }
 
-MessagesLayout.propTypes = {
-  children: PropTypes.node,
-  showBackBtn: PropTypes.bool,
-  title: PropTypes.string,
+const mapStateToProps = (state) => {
+  const selectedId = state.getIn(['chats', 'selectedChatConversationId'], null)
+  const currentConversationIsRequest = selectedId ? !state.getIn(['chat_conversations', selectedId, 'is_approved'], true) : false
+
+  return { currentConversationIsRequest }
 }
 
-export default MessagesLayout
+const mapDispatchToProps = (dispatch) => ({
+  onOpenChatConversationCreateModal() {
+    dispatch(openModal(MODAL_CHAT_CONVERSATION_CREATE))
+  }
+})
+
+MessagesLayout.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node,
+  isSettings: PropTypes.bool,
+  showBackBtn: PropTypes.bool,
+  source: PropTypes.string,
+  onOpenChatConversationCreateModal: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MessagesLayout)