From ef47cee872ea965bddd29f5c50a930ef34f96e8a Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Tue, 7 Jan 2020 11:11:48 +0100 Subject: [PATCH] :zap: compose components for messaging, show mock contacts Signed-off-by: Baptiste Lemoine --- .../features/account_timeline/index.js | 65 +++++++++-------- .../features/ui/components/columns_area.js | 2 + .../features/ui/components/compose_panel.js | 7 -- .../features/ui/components/link_footer.js | 4 +- .../ui/components/messaging/Contact.js | 55 +++++++++++++++ .../components/messaging/mockContactList.js | 69 +++++++++++++++++++ 6 files changed, 167 insertions(+), 35 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/components/messaging/Contact.js create mode 100644 app/javascript/mastodon/features/ui/components/messaging/mockContactList.js diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js index 8d0cbe5a1..e5ed392a1 100644 --- a/app/javascript/mastodon/features/account_timeline/index.js +++ b/app/javascript/mastodon/features/account_timeline/index.js @@ -20,13 +20,15 @@ const emptyList = ImmutableList(); const mapStateToProps = (state, { params: { accountId }, withReplies = false }) => { const path = withReplies ? `${accountId}:with_replies` : accountId; + console.log('state.getIn([\'accounts\', accountId])', state.getIn(['accounts', accountId])); return { - isAccount: !!state.getIn(['accounts', accountId]), - statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList), + isAccount : !!state.getIn(['accounts', accountId]), + account : state.getIn(['accounts', accountId]), + statusIds : state.getIn(['timelines', `account:${path}`, 'items'], emptyList), featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList), - isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), - hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), - blockedBy: state.getIn(['relationships', accountId, 'blocked_by'], false), + isLoading : state.getIn(['timelines', `account:${path}`, 'isLoading']), + hasMore : state.getIn(['timelines', `account:${path}`, 'hasMore']), + blockedBy : state.getIn(['relationships', accountId, 'blocked_by'], false), }; }; @@ -34,20 +36,20 @@ export default @connect(mapStateToProps) class AccountTimeline extends ImmutablePureComponent { static propTypes = { - params: PropTypes.object.isRequired, - dispatch: PropTypes.func.isRequired, + params : PropTypes.object.isRequired, + dispatch : PropTypes.func.isRequired, shouldUpdateScroll: PropTypes.func, - statusIds: ImmutablePropTypes.list, - featuredStatusIds: ImmutablePropTypes.list, - isLoading: PropTypes.bool, - hasMore: PropTypes.bool, - withReplies: PropTypes.bool, - blockedBy: PropTypes.bool, - isAccount: PropTypes.bool, - multiColumn: PropTypes.bool, + statusIds : ImmutablePropTypes.list, + featuredStatusIds : ImmutablePropTypes.list, + isLoading : PropTypes.bool, + hasMore : PropTypes.bool, + withReplies : PropTypes.bool, + blockedBy : PropTypes.bool, + isAccount : PropTypes.bool, + multiColumn : PropTypes.bool, }; - componentWillMount () { + componentWillMount() { const { params: { accountId }, withReplies } = this.props; this.props.dispatch(fetchAccount(accountId)); @@ -60,7 +62,7 @@ class AccountTimeline extends ImmutablePureComponent { this.props.dispatch(expandAccountTimeline(accountId, { withReplies })); } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { if ((nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) || nextProps.withReplies !== this.props.withReplies) { this.props.dispatch(fetchAccount(nextProps.params.accountId)); this.props.dispatch(fetchAccountIdentityProofs(nextProps.params.accountId)); @@ -74,33 +76,42 @@ class AccountTimeline extends ImmutablePureComponent { } handleLoadMore = maxId => { - this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies })); - } + this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { + maxId, + withReplies: this.props.withReplies, + })); + }; - render () { + render() { const { shouldUpdateScroll, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, isAccount, multiColumn } = this.props; if (!isAccount) { return ( - + - + ); } if (!statusIds && isLoading) { return ( - + - + ); } - const emptyMessage = blockedBy ? : ; + const emptyMessage = blockedBy ? : ; return ( - + - + ); } diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index e0f15313a..8899a08e2 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -32,6 +32,7 @@ import NavigationPanel from './navigation_panel'; import detectPassiveEvents from 'detect-passive-events'; import { scrollRight } from '../../../scroll'; import LinkFooter from './link_footer'; +import InstantMessaging from './messaging/instantMessaging'; const componentMap = { 'COMPOSE' : Compose, @@ -239,6 +240,7 @@ class ColumnsArea extends ImmutablePureComponent { {floatingActionButton} + ); } diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index 639310995..fd7d7710b 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -2,19 +2,12 @@ import React from 'react'; import SearchContainer from 'mastodon/features/compose/containers/search_container'; import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container'; import NavigationContainer from 'mastodon/features/compose/containers/navigation_container'; -import InstantMessaging from './messaging/instantMessaging'; -const showIM = true; const ComposePanel = () => (
- - {showIM && ( - - )} -
); diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index dd89aee0c..bd2225ed1 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -124,7 +124,9 @@ class LinkFooter extends React.PureComponent { ) : ( to dark diff --git a/app/javascript/mastodon/features/ui/components/messaging/Contact.js b/app/javascript/mastodon/features/ui/components/messaging/Contact.js new file mode 100644 index 000000000..6cbc3e1c1 --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/messaging/Contact.js @@ -0,0 +1,55 @@ +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import React from 'react'; + +export default class Contact extends ImmutablePureComponent { + + static propTypes = { + account: PropTypes.object, + }; + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + account: this.props.account, + }; + } + + openConversationWithAccount = (accountId) => { + dispatchEvent({ type: 'openConversation', target: accountId }); + }; + + render() { + return ( +
+
+ +
+ avatar +
+ +
+
+
+ {this.props.account.username} +
+
+
+
+ +
+
+ +
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/messaging/mockContactList.js b/app/javascript/mastodon/features/ui/components/messaging/mockContactList.js new file mode 100644 index 000000000..d2606e07c --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/messaging/mockContactList.js @@ -0,0 +1,69 @@ +export const mockContactList = [{ + 'key' : '2', + 'id' : '2', + 'username' : 'demoguy', + 'acct' : 'demoguy', + 'display_name' : '', + 'locked' : false, + 'bot' : false, + 'discoverable' : null, + 'group' : false, + 'created_at' : '2019-12-18T11:02:26.494Z', + 'note' : '

', + 'url' : 'http://localhost:3000/@demoguy', + 'avatar' : 'http://localhost:3000/avatars/original/missing.png', + 'avatar_static' : 'http://localhost:3000/avatars/original/missing.png', + 'header' : 'http://localhost:3000/headers/original/missing.png', + 'header_static' : 'http://localhost:3000/headers/original/missing.png', + 'followers_count' : 1, + 'following_count' : 1, + 'statuses_count' : 8, + 'last_status_at' : '2019-12-23T15:20:31.575Z', + 'emojis' : [], + 'fields' : [], + 'display_name_html': 'demoguy', + 'note_emojified' : '

', +}, { + 'key' : '1', + 'id' : '1', + 'username' : 'admin', + 'acct' : 'admin', + 'display_name' : '', + 'locked' : true, + 'bot' : false, + 'discoverable' : true, + 'group' : false, + 'created_at' : '2019-12-10T13:19:44.106Z', + 'note' : '

', + 'url' : 'http://localhost:3000/@admin', + 'avatar' : 'http://localhost:3000/system/accounts/avatars/000/000/001/original/a1497a4af5fd8616.png?1576254102', + 'avatar_static' : 'http://localhost:3000/system/accounts/avatars/000/000/001/original/a1497a4af5fd8616.png?1576254102', + 'header' : 'http://localhost:3000/system/accounts/headers/000/000/001/original/f13ebf964b09ed26.png?1576254102', + 'header_static' : 'http://localhost:3000/system/accounts/headers/000/000/001/original/f13ebf964b09ed26.png?1576254102', + 'followers_count' : 4, + 'following_count' : 3, + 'statuses_count' : 31, + 'last_status_at' : '2020-01-04T15:13:32.824Z', + 'emojis' : [], + 'fields' : [ + { + 'name' : 'sssss', + 'value' : 'muuuuu', + 'verified_at' : null, + 'name_emojified' : 'sssss', + 'value_emojified': 'muuuuu', + 'value_plain' : 'muuuuu', + }, + ], + 'display_name_html': 'admin', + 'note_emojified' : '

', +}]; +export const mockContactListShort = [{ + 'key' : '2', + 'id' : '2', + 'username': 'demoguy', +}, { + 'key' : '1', + 'id' : '1', + 'username': 'admin', +}];