From a2ffbadedbb66b4ddbffbffaefe22548a984752a Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Sun, 20 Dec 2020 20:37:53 -0500 Subject: [PATCH] Progress on new composer Updated composer to work with comments, groups, timelines, comments in groups, etc. --- app/javascript/gabsocial/actions/compose.js | 39 +++++++++--------- app/javascript/gabsocial/actions/groups.js | 12 +----- .../compose_navigation_bar_xs.js | 40 +++---------------- .../components/compose_destination_header.js | 20 ++++++++-- .../components/compose_extra_button_list.js | 2 - .../compose/components/compose_form.js | 21 +++++++--- .../components/compose_form_submit_button.js | 29 ++++++++------ .../containers/compose_form_container.js | 13 +++--- app/javascript/gabsocial/features/deck.js | 2 - .../components/chat_message_scrolling_list.js | 1 - app/javascript/gabsocial/reducers/compose.js | 1 + 11 files changed, 84 insertions(+), 96 deletions(-) diff --git a/app/javascript/gabsocial/actions/compose.js b/app/javascript/gabsocial/actions/compose.js index fa8d0ac2..b0e0938c 100644 --- a/app/javascript/gabsocial/actions/compose.js +++ b/app/javascript/gabsocial/actions/compose.js @@ -307,16 +307,14 @@ export const handleComposeSubmit = (dispatch, getState, response, status) => { /** * */ -export const submitCompose = (groupId, replyToId = null, router, isStandalone, autoJoinGroup) => (dispatch, getState) => { +export const submitCompose = (options = {}) => (dispatch, getState) => { if (!me) return - if (autoJoinGroup) dispatch(joinGroup(groupId)) + if (options.autoJoinGroup) dispatch(joinGroup(groupId)) let status = getState().getIn(['compose', 'text'], '') let markdown = getState().getIn(['compose', 'markdown'], '') - const media = getState().getIn(['compose', 'media_attachments']) - const isPrivateGroup = !!groupId ? getState().getIn(['groups', groupId, 'is_private'], false) : false - + const replacer = (match) => { const hasProtocol = match.startsWith('https://') || match.startsWith('http://') //Make sure not a remote mention like @someone@somewhere.com @@ -331,24 +329,27 @@ export const submitCompose = (groupId, replyToId = null, router, isStandalone, a status = `${status}`.replace(urlRegex, replacer) markdown = !!markdown ? `${markdown}`.replace(urlRegex, replacer) : undefined - const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId - - dispatch(submitComposeRequest()) - dispatch(closeModal()) - - const id = getState().getIn(['compose', 'id']) - const endpoint = id === null - ? '/api/v1/statuses' - : `/api/v1/statuses/${id}` - const method = id === null ? 'post' : 'put' + const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) + const groupId = getState().getIn(['compose', 'group_id'], null) + const media = getState().getIn(['compose', 'media_attachments']) + const isPrivateGroup = !!groupId ? getState().getIn(['groups', groupId, 'is_private'], false) : false + const expires_at = getState().getIn(['compose', 'expires_at'], null) let scheduled_at = getState().getIn(['compose', 'scheduled_at'], null) if (scheduled_at !== null) scheduled_at = moment.utc(scheduled_at).toDate() - const expires_at = getState().getIn(['compose', 'expires_at'], null) + // - if (isMobile(window.innerWidth) && router && isStandalone) { - router.history.goBack() + const id = getState().getIn(['compose', 'id']) + const endpoint = id === null ? '/api/v1/statuses' : `/api/v1/statuses/${id}` + const method = id === null ? 'post' : 'put' + + + dispatch(submitComposeRequest()) + dispatch(closeModal()) + + if (isMobile(window.innerWidth) && options.router && options.isStandalone) { + options.router.history.goBack() } api(getState)[method](endpoint, { @@ -356,7 +357,7 @@ export const submitCompose = (groupId, replyToId = null, router, isStandalone, a markdown, expires_at, scheduled_at, - autoJoinGroup, + autoJoinGroup: options.autoJoinGroup, isPrivateGroup, in_reply_to_id: inReplyToId, quote_of_id: getState().getIn(['compose', 'quote_of_id'], null), diff --git a/app/javascript/gabsocial/actions/groups.js b/app/javascript/gabsocial/actions/groups.js index 97b8d997..2763e33b 100644 --- a/app/javascript/gabsocial/actions/groups.js +++ b/app/javascript/gabsocial/actions/groups.js @@ -499,11 +499,7 @@ export const debouncedFetchGroupMembersAdminSearch = debounce((groupId, query, d if (!groupId || !query) return api(getState).get(`/api/v1/groups/${groupId}/member_search`, { - params: { - q: query, - resolve: false, - limit: 4, - }, + params: { q: query }, }).then((response) => { dispatch(importFetchedAccounts(response.data)) dispatch(fetchGroupMembersAdminSearchSuccess(response.data)) @@ -621,11 +617,7 @@ export const debouncedFetchGroupRemovedAccountsAdminSearch = debounce((groupId, if (!groupId || !query) return api(getState).get(`/api/v1/groups/${groupId}/removed_accounts_search`, { - params: { - q: query, - resolve: false, - limit: 4, - }, + params: { q: query }, }).then((response) => { dispatch(importFetchedAccounts(response.data)) dispatch(fetchGroupRemovedAccountsAdminSearchSuccess(response.data)) diff --git a/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js b/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js index 5ef1787c..b3179557 100644 --- a/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js +++ b/app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js @@ -10,26 +10,17 @@ import { import Heading from '../heading' import Button from '../button' import BackButton from '../back_button' -import Text from '../text' import ComposeFormSubmitButton from '../../features/compose/components/compose_form_submit_button' class ComposeNavigationBar extends React.PureComponent { - handleOnPost = () => { - // + static contextTypes = { + router: PropTypes.object, } - + render() { - const { - isUploading, - isChangingUpload, - isSubmitting, - anyMedia, - text, - isXS, - } = this.props + const { isXS } = this.props - const disabledButton = isSubmitting || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text.trim()) === 0 && !anyMedia) const innerClasses = CX({ d: 1, flexRow: 1, @@ -64,7 +55,7 @@ class ComposeNavigationBar extends React.PureComponent {
- +
@@ -76,27 +67,8 @@ class ComposeNavigationBar extends React.PureComponent { } -const mapStateToProps = (state, props) => ({ - isUploading: state.getIn(['compose', 'is_uploading']), - isChangingUpload: state.getIn(['compose', 'is_changing_upload']), - isSubmitting: state.getIn(['compose', 'is_submitting']), - anyMedia: state.getIn(['compose', 'media_attachments']).size > 0, - text: state.getIn(['compose', 'text']), -}) - -const mapDispatchToProps = (dispatch) => ({ - onSubmitCompose() { - // - }, -}) - ComposeNavigationBar.propTypes = { - isUploading: PropTypes.bool, - isChangingUpload: PropTypes.bool, - isSubmitting: PropTypes.bool, - anyMedia: PropTypes.bool, - text: PropTypes.string, isXS: PropTypes.bool, } -export default connect(mapStateToProps, mapDispatchToProps)(ComposeNavigationBar) \ No newline at end of file +export default ComposeNavigationBar \ No newline at end of file diff --git a/app/javascript/gabsocial/features/compose/components/compose_destination_header.js b/app/javascript/gabsocial/features/compose/components/compose_destination_header.js index 98ee42f0..1411579a 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_destination_header.js +++ b/app/javascript/gabsocial/features/compose/components/compose_destination_header.js @@ -32,6 +32,7 @@ class ComposeDestinationHeader extends ImmutablePureComponent { render() { const { account, + isReply, isModal, composeGroup, formLocation, @@ -41,7 +42,18 @@ class ComposeDestinationHeader extends ImmutablePureComponent { let groupTitle = !!composeGroup ? composeGroup.get('title') : '' groupTitle = groupTitle.length > 32 ? `${groupTitle.substring(0, 32).trim()}...` : groupTitle - const title = !!composeGroup ? `Post to ${groupTitle}` : 'Post to timeline' + let title = 'Post to timeline' + if (!!composeGroup) { + if (isReply) { + title = `Comment in ${groupTitle}` + } else { + title = `Post to ${groupTitle}` + } + } else { + if (isReply) { + title = 'Post as comment' + } + } return (
@@ -57,12 +69,12 @@ class ComposeDestinationHeader extends ImmutablePureComponent { buttonRef={this.setDestinationBtn} backgroundColor='secondary' color='primary' - onClick={this.handleOnClick} + onClick={isReply ? undefined : this.handleOnClick} className={[_s.border1PX, _s.borderColorPrimary].join(' ')} > {title} - + { !isReply && }
@@ -89,6 +101,7 @@ const mapStateToProps = (state) => { return { composeGroupId, + isReply: !!state.getIn(['compose', 'in_reply_to']), composeGroup: state.getIn(['groups', composeGroupId]), } } @@ -111,6 +124,7 @@ ComposeDestinationHeader.propTypes = { onOpenModal: PropTypes.func.isRequired, onOpenPopover: PropTypes.func.isRequired, formLocation: PropTypes.string, + isReply: PropTypes.bool.isRequired, } export default connect(mapStateToProps, mapDispatchToProps)(ComposeDestinationHeader) \ No newline at end of file diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js index fc840124..17c0e695 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js +++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js @@ -60,8 +60,6 @@ class ComposeExtraButtonList extends React.PureComponent { const isIntroduction = formLocation === 'introduction' const small = (!isModal && isXS && !isStandalone) || isTimeline - console.log("small, formLocation:", small, formLocation) - const containerClasses = CX({ d: 1, w100PC: 1, diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js index d0cc5843..9d5d43e7 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_form.js +++ b/app/javascript/gabsocial/features/compose/components/compose_form.js @@ -102,14 +102,19 @@ class ComposeForm extends ImmutablePureComponent { // } // Submit disabled: - const { isSubmitting, isChangingUpload, isUploading, anyMedia, groupId, autoJoinGroup } = this.props + const { isSubmitting, formLocation, isChangingUpload, isUploading, anyMedia, groupId, autoJoinGroup } = this.props const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('') + const isStandalone = formLocation === 'standalone' if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > MAX_POST_CHARACTER_COUNT || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) { return } - this.props.onSubmit(groupId, this.props.replyToId, this.context.router, autoJoinGroup) + this.props.onSubmit({ + router: this.context.router, + isStandalone, + autoJoinGroup, + }) } onSuggestionsClearRequested = () => { @@ -183,6 +188,7 @@ class ComposeForm extends ImmutablePureComponent { render() { const { intl, + autoJoinGroup, account, onPaste, anyMedia, @@ -277,9 +283,7 @@ class ComposeForm extends ImmutablePureComponent {
- - - +
{ @@ -337,7 +341,12 @@ class ComposeForm extends ImmutablePureComponent { { (!disabledButton || isModalOpen) && isMatch &&
- +
} diff --git a/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js b/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js index 27dd8459..0150bce5 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js +++ b/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js @@ -15,7 +15,9 @@ import Text from '../../../components/text' class ComposeFormSubmitButton extends React.PureComponent { handleSubmit = () => { - this.props.onSubmit() + const { formLocation, autoJoinGroup, router, type } = this.props + const isStandalone = formLocation === 'standalone' || type === 'navigation' + this.props.onSubmit(router, isStandalone, autoJoinGroup) } render() { @@ -25,7 +27,7 @@ class ComposeFormSubmitButton extends React.PureComponent { active, small, type, - + // edit, text, isSubmitting, @@ -35,6 +37,7 @@ class ComposeFormSubmitButton extends React.PureComponent { quoteOfId, scheduledAt, hasPoll, + replyToId, } = this.props const disabledButton = isSubmitting || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text.trim()) === 0 && !anyMedia) @@ -66,12 +69,6 @@ class ComposeFormSubmitButton extends React.PureComponent { ) } - const containerClasses = CX({ - d: 1, - jcCenter: 1, - h40PX: 1, - }) - const btnClasses = CX({ d: 1, radiusSmall: 1, @@ -101,7 +98,7 @@ class ComposeFormSubmitButton extends React.PureComponent { } return ( -
+