Progress on dms, code cleanup

2020-12-02 23:22:51 -05:00
parent 20d4fc09af
commit 9a43c51085
103 changed files with 3656 additions and 859 deletions
--- a/app/javascript/gabsocial/features/chat_conversation_create.js
+++ b/app/javascript/gabsocial/features/chat_conversation_create.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { fetchChatConversationAccountSuggestions } from '../actions/chats'
+import { createChatConversation } from '../actions/chat_conversations'
+import Account from '../components/account'
+import Button from '../components/button'
+import Input from '../components/input'
+import Form from '../components/form'
+import Text from '../components/text'
+
+class ChatConversationCreate extends React.PureComponent {
+
+  state = {
+    query: '',
+  }
+
+  onChange = (query) => {
+    this.setState({ query })
+    this.props.onChange(query)
+  }
+
+  handleOnCreateChatConversation = (accountId) => {
+    console.log("handleOnCreateChatConversation:", accountId)
+    this.props.onCreateChatConversation(accountId)
+  }
+
+  render() {
+    const { query, suggestionsIds } = this.props
+
+    return (
+      <Form>
+        <div className={[_s.d, _s.px15, _s.pt10].join(' ')}>
+          <Input
+            title='Search for a user'
+            value={query}
+            onChange={this.onChange}
+          />
+        </div>
+
+        <div className={[_s.d, _s.pt10].join(' ')}>
+          <div className={[_s.d].join(' ')}>
+            <Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.ml15, _s.mt5, _s.mb15].join(' ')}>
+              Search results ({suggestionsIds.size})
+            </Text>
+            {
+              suggestionsIds &&
+              suggestionsIds.map((accountId) => (
+                <Account
+                  compact
+                  key={`remove-from-list-${accountId}`}
+                  id={accountId}
+                  onActionClick={() => this.handleOnCreateChatConversation(accountId)}
+                  actionIcon='add'
+                />
+              ))
+            }
+          </div>
+        </div>
+      </Form>
+    )
+  }
+
+}
+
+const mapStateToProps = (state) => ({
+  suggestionsIds: state.getIn(['chats', 'createChatConversationSuggestionIds']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onChange: (value) => {
+    console.log("value", value)
+    dispatch(fetchChatConversationAccountSuggestions(value))
+  },
+  onCreateChatConversation: (accountId) => {
+    dispatch(createChatConversation(accountId))
+  },
+})
+
+ChatConversationCreate.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onCreateChatConversation: PropTypes.func.isRequired,
+  isModal: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationCreate)