random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress on dms, code cleanup

Browse Source 
Progress on dms, code cleanup
This commit is contained in:
mgabdev
2020-12-02 23:22:51 -05:00
parent 20d4fc09af
commit 9a43c51085
103 changed files with 3656 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
app/javascript/gabsocial/features/messages/messages.js
View File

@@ -1,88 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { makeGetAccount } from '../../selectors'
import Text from '../../components/text'
import Button from '../../components/button'
import Avatar from '../../components/avatar'
import DisplayName from '../../components/display_name'
import Input from '../../components/input'
import EmojiPickerButton from '../compose/components/emoji_picker_button'
import UploadButton from '../compose/components/media_upload_button'
import MessageItem from './components/message_item'
// import MessagesContainer from './containers/messages_container'
import ChatEmptyMessageBlock from './components/chat_conversations_empty_block'
import ChatMessageHeader from './components/chat_message_header'
import ChatMessageScrollingList from './components/chat_message_scrolling_list'
import ChatMessagesComposeForm from './components/chat_message_compose_form'
class Messages extends React.PureComponent {
render () {
const { account } = this.props
const {
account,
selectedChatConversationId,
chatConverationIsRequest,
} = this.props
const selectedMessage = true
return (
<div className={[_s.d, _s.bgPrimary, _s.h100PC, _s.w100PC].join(' ')}>
{
!selectedMessage &&
<div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<Text weight='bold' size='extraLarge'>
You don’t have a message selected
</Text>
<Text size='medium' color='secondary' className={_s.py10}>
Choose one from your existing messages, or start a new one.
</Text>
<Button className={_s.mt10}>
<Text color='inherit' weight='bold' className={_s.px15}>
New Message
</Text>
</Button>
</div>
!selectedChatConversationId &&
<ChatEmptyMessageBlock />
}
{
selectedMessage &&
!!selectedChatConversationId &&
<div className={[_s.d, _s.h100PC, _s.w100PC].join(' ')}>
<div className={[_s.d, _s.posAbs, _s.top0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
<Avatar account={account} size={34} />
<div className={[_s.d, _s.pl10, _s.maxW100PC86PX, _s.overflowHidden].join(' ')}>
<DisplayName account={account} isMultiline />
</div>
<Button
isNarrow
onClick={undefined}
color='brand'
backgroundColor='none'
className={_s.mlAuto}
icon='more'
iconSize='18px'
/>
</div>
<div className={[_s.d, _s.posAbs, _s.bottom60PX, _s.left0, _s.right0, _s.px15, _s.py15, _s.top60PX, _s.w100PC, _s.overflowYScroll].join(' ')}>
<MessageItem />
<MessageItem />
<MessageItem alt />
<MessageItem />
<MessageItem alt />
<MessageItem alt />
<MessageItem />
<MessageItem />
<MessageItem />
<MessageItem alt />
<MessageItem />
</div>
<div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
<EmojiPickerButton />
<UploadButton />
<div className={[_s.d, _s.px15, _s.flexGrow1].join(' ')}>
<Input
placeholder='Type a message...'
/>
</div>
<Button>
Send
</Button>
</div>
<ChatMessageHeader chatConversationId={selectedChatConversationId} />
<ChatMessageScrollingList chatConversationId={selectedChatConversationId} />
{
!chatConverationIsRequest &&
<ChatMessagesComposeForm chatConversationId={selectedChatConversationId} />
}
</div>
}
</div>
@@ -91,13 +38,18 @@ class Messages extends React.PureComponent {
}
const mapStateToProps = (state, props) => ({
account: makeGetAccount()(state, '1'),
})
const mapStateToProps = (state, props) => {
const selectedChatConversationId = state.getIn(['chats', 'selectedChatConversationId'], null)
const chatConverationIsRequest = selectedChatConversationId ? !state.getIn(['chat_conversations', selectedChatConversationId, 'is_approved'], null) : false
return {
selectedChatConversationId,
chatConverationIsRequest,
}
}
Messages.propTypes = {
intl: PropTypes.object.isRequired,
selected: PropTypes.bool,
selectedChatConversationId: PropTypes.string,
chatConverationIsRequest: PropTypes.bool.isRequired,
}
export default connect(mapStateToProps)(Messages)