Added GroupActionButton component

• Added: - GroupActionButton component for handling group + relationships for joining, requesting, leaving groups • Updated: - Components where group actions exist
2020-09-11 17:10:31 -05:00 · 2020-09-11 17:10:31 -05:00 · ed58ca4fe9
parent fb8c705ebf
commit ed58ca4fe9
4 changed files with 182 additions and 111 deletions
--- a/app/javascript/gabsocial/components/group_action_button.js
+++ b/app/javascript/gabsocial/components/group_action_button.js
@ -0,0 +1,157 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import {
+  joinGroup,
+  leaveGroup,
+} from '../actions/groups'
+import { openModal } from '../actions/modal'
+import { me } from '../initial_state'
+import {
+  CX,
+  MODAL_GROUP_PASSWORD,
+} from '../constants'
+import Button from './button'
+import Text from './text'
+
+class GroupActionButton extends ImmutablePureComponent {
+
+  handleToggleMembership = () => {
+    const { group, relationships } = this.props
+    
+    if (!group || !relationships) return false
+
+    const groupId = group.get('id')
+    const hasPassword = group.get('has_password')
+    const isMember = relationships.get('member')
+    const isRequested = relationships.get('requested')
+ 
+    if (isMember || isRequested) {
+      this.props.onLeaveGroup(groupId)
+    } else {
+      if (hasPassword) {
+        this.props.onOpenGroupPasswordModal(group) 
+      } else {
+        this.props.onJoinGroup(groupId)
+      }
+    } 
+  }
+
+  render() {
+    const {
+      group,
+      intl,
+      relationships,
+      size,
+    } = this.props
+
+    if (!group || !relationships) return null
+    
+    let buttonText = ''
+    let buttonOptions = {}
+
+    const isPrivate = group.get('is_private')
+    const isMember = relationships.get('member')
+    const isRequested = relationships.get('requested')
+
+    if (isRequested) {
+      buttonText = intl.formatMessage(messages.requested)
+      buttonOptions = {
+        color: 'primary',
+        backgroundColor: 'tertiary',
+      }
+    } else if (isMember) {
+      buttonText = intl.formatMessage(messages.member)
+      buttonOptions = {
+        color: 'white',
+        backgroundColor: 'brand',
+      }
+    } else {
+      if (isPrivate && !isRequested) {
+        buttonText = intl.formatMessage(messages.request)
+      } else {
+        buttonText = intl.formatMessage(messages.join)
+      }
+      buttonOptions = {
+        color: 'brand',
+        backgroundColor: 'none',
+        isOutline: true,
+      }
+    }
+
+    const isSmall = size === 'small'
+    const textClassName = isSmall ? null : _s.px10
+    const textSize = isSmall ? 'small' : 'medium'
+    const textWeight = isSmall ? 'normal' : 'bold'
+
+    const btnClasses = CX({
+      px10: isSmall,
+      minW76PX: isSmall,
+      jcCenter: 1,
+      aiCenter: 1,
+    })
+
+    return (
+      <Button
+        {...buttonOptions}
+        onClick={this.handleToggleMembership}
+        className={btnClasses}
+        isNarrow={isSmall}
+      >
+        <Text
+          color='inherit'
+          align='center'
+          weight={textWeight}
+          size={textSize}
+          className={textClassName}
+        >
+          {buttonText}
+        </Text>
+      </Button>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  join: { id: 'groups.join', defaultMessage: 'Join group' },
+  request: { id: 'groups.request_join', defaultMessage: 'Request to Join' },
+  requested: { id: 'groups.requested', defaultMessage: 'Requested' },
+  member: { id: 'groups.member', defaultMessage: 'Member' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onJoinGroup(groupId) {
+    dispatch(joinGroup(groupId))
+  },
+  onLeaveGroup(groupId) {
+    dispatch(leaveGroup(groupId))
+  },
+  onOpenGroupPasswordModal(group) {
+    dispatch(openModal(MODAL_GROUP_PASSWORD, {
+      group,
+    }))
+  },
+})
+
+GroupActionButton.propTypes = {
+  group: ImmutablePropTypes.map,
+  relationships: ImmutablePropTypes.map,
+  intl: PropTypes.object.isRequired,
+  size: PropTypes.oneOf([
+    'small',
+    'normal',
+  ]),
+  onJoin: PropTypes.func.isRequired,
+  onLeave: PropTypes.func.isRequired,
+  onOpenGroupPasswordModal: PropTypes.func.isRequired,
+}
+
+GroupActionButton.defaultProps = {
+  size: 'normal',
+}
+
+export default injectIntl(connect(null, mapDispatchToProps)(GroupActionButton))
--- a/app/javascript/gabsocial/components/group_header.js
+++ b/app/javascript/gabsocial/components/group_header.js
@ -4,9 +4,7 @@ import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
-import { openPopover, closePopover } from '../actions/popover'
-import { openModal } from '../actions/modal'
-import { joinGroup, leaveGroup } from '../actions/groups'
+import { openPopover } from '../actions/popover'
 import {
  addShortcut,
  removeShortcut,
@ -17,6 +15,7 @@ import {
 } from '../constants'
 import { me } from '../initial_state'
 import Responsive from '../features/ui/util/responsive_component'
+import GroupActionButton from './group_action_button'
 import Button from './button'
 import Block from './block'
 import Heading from './heading'
@ -28,11 +27,6 @@ import Text from './text'

 class GroupHeader extends ImmutablePureComponent {

-  handleOnToggleMembership = () => {
-    const { group, relationships } = this.props
-    this.props.onToggleMembership(group, relationships);
-  }
-
  handleOnOpenGroupOptions = () => {
    const { relationships } = this.props
    const isAdmin = !!relationships ? relationships.get('admin') : false
@ -75,31 +69,13 @@ class GroupHeader extends ImmutablePureComponent {
    const title = !!group ? group.get('title') : undefined
    const slug = !!group ? !!group.get('slug') ? `g/${group.get('slug')}` : undefined : undefined
    const isPrivate = !!group ? group.get('is_private') : false
-
-    let isAdminOrMod = false
-    let actionButtonTitle
-    let actionButtonOptions = {}
-    if (relationships) {
-      isAdminOrMod = relationships.get('admin') || relationships.get('moderator')
-      const isMember = relationships.get('member')
-
-      actionButtonTitle = intl.formatMessage(isMember ? messages.member : messages.join)
-      actionButtonOptions = {
-        isOutline: !isMember,
-        backgroundColor: isMember ? 'brand' : 'none',
-        color: isMember ? 'white' : 'brand',
-      }
-    }
+    const isAdminOrMod = !!relationships ? (relationships.get('admin') || relationships.get('moderator')) : false

    const tabs = !group ? [] : [
      {
        to: `/groups/${group.get('id')}`,
        title: 'Timeline',
      },
-      // {
-      //   to: `/groups/${group.get('id')}/media`,
-      //   title: 'Media',
-      // },
    ]

    if (isAdminOrMod && group) {
@ -146,23 +122,15 @@ class GroupHeader extends ImmutablePureComponent {
                {
                  !!me &&
                  <div className={[_s.d, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mt5, _s.pb15, _s.pt5, _s.h100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
-                    {
-                      !!actionButtonTitle &&
-                      <Button
-                        className={_s.mr5}
-                        onClick={this.handleOnToggleMembership}
-                        {...actionButtonOptions}
-                      >
-                        <Text color='inherit' size='medium' weight='bold' className={_s.px10}>
-                          {actionButtonTitle}
-                        </Text>
-                      </Button>
-                    }
+                    <GroupActionButton
+                      group={group}
+                      relationships={relationships}
+                    />
                    
                    <Button
                      color='primary'
                      backgroundColor='tertiary'
-                      className={[_s.px10, _s.mr5].join(' ')}
+                      className={[_s.px10, _s.mr5, _s.ml5].join(' ')}
                      icon='ellipsis'
                      onClick={this.handleOnOpenGroupOptions}
                      buttonRef={this.setInfoBtn}
@ -236,18 +204,12 @@ class GroupHeader extends ImmutablePureComponent {
                          />
                        </div>
                      }  
-                      {
-                        !!actionButtonTitle &&
-                        <Button
-                          className={_s.mr5}
-                          onClick={this.handleOnToggleMembership}
-                          {...actionButtonOptions}
-                        >
-                          <Text color='inherit' size='medium' weight='bold' className={_s.px10}>
-                            {actionButtonTitle}
-                          </Text>
-                        </Button>
-                      }
+
+                      <GroupActionButton
+                        group={group}
+                        relationships={relationships}
+                      />
+
                    </div>
                  </div>
                </div>
@ -262,8 +224,6 @@ class GroupHeader extends ImmutablePureComponent {
 }

 const messages = defineMessages({
-  join: { id: 'groups.join', defaultMessage: 'Join group' },
-  member: { id: 'groups.member', defaultMessage: 'Member' },
  removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
  group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
  group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
@ -280,13 +240,6 @@ const mapStateToProps = (state, { group }) => {

 const mapDispatchToProps = (dispatch, { intl }) => ({

-  onToggleMembership(group, relationships) {
-    if (relationships.get('member')) {
-      dispatch(leaveGroup(group.get('id')))
-    } else {
-      dispatch(joinGroup(group.get('id')))
-    }
-  },
  onOpenGroupOptions(targetRef, group, options) {
    dispatch(openPopover('GROUP_OPTIONS', {
      targetRef,
@ -311,7 +264,6 @@ GroupHeader.propTypes = {
  isShortcut: PropTypes.bool.isRequired,
  isXS: PropTypes.bool,
  onAddShortcut: PropTypes.func.isRequired,
-  onToggleMembership: PropTypes.func.isRequired,
  onRemoveShortcut: PropTypes.func.isRequired,
  onOpenGroupOptions: PropTypes.func.isRequired,
  relationships: ImmutablePropTypes.map,
--- a/app/javascript/gabsocial/components/group_list_item.js
+++ b/app/javascript/gabsocial/components/group_list_item.js
@ -5,7 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
-import { joinGroup, leaveGroup } from '../actions/groups'
 import { CX } from '../constants'
 import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
 import { shortNumberFormat } from '../utils/numbers'
@ -13,26 +12,10 @@ import Button from './button'
 import Image from './image'
 import Text from './text'
 import Dummy from './dummy'
+import GroupActionButton from './group_action_button'

 class GroupListItem extends ImmutablePureComponent {

-  state = {
-    hovering: false,
-  }
-
-  handleOnToggleMembership = () => {
-    const { group, relationships } = this.props
-    this.props.onToggleMembership(group.get('id'), relationships)
-  }
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
-  }
-
  render() {
    const {
      group,
@ -43,7 +26,6 @@ class GroupListItem extends ImmutablePureComponent {
      isStatic,
      relationships,
    } = this.props
-    const { hovering } = this.state

    if (!group) return null
    
@ -63,6 +45,7 @@ class GroupListItem extends ImmutablePureComponent {
      borderBottom1PX: !isLast,
      flexRow: 1,
      py5: 1,
+      px5: isAddable,
      w100PC: 1,
    })

@ -71,14 +54,12 @@ class GroupListItem extends ImmutablePureComponent {
      flexRow: 1,
      noUnderline: 1,
      w100PC: 1,
-      maxW100PC86PX: isAddable,
+      flexGrow1: isAddable,
+      flexShrink1: isAddable,
    })

    const coverSrc = group.get('cover_image_url') || ''
    const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
-    const isMember = !!relationships && relationships.get('member')
-    const addButtonColor = isMember ? hovering ? 'danger' : 'tertiary' : 'brand'
-    const addButtonTitle = isMember ? hovering ? 'Leave' : 'Member' : 'Join'

    const Wrapper = !isStatic ? NavLink : Dummy

@ -114,20 +95,11 @@ class GroupListItem extends ImmutablePureComponent {
        {
          isAddable &&
          <div className={[_s.d, _s.jcCenter, _s.flexGrow1].join(' ')}>
-            {
-              relationships &&
-              <Button
-                isNarrow
-                color='white'
-                className={[_s.px10, _s.w76PX].join(' ')}
-                backgroundColor={addButtonColor}
-                onClick={this.handleOnToggleMembership}
-                onMouseEnter={this.handleOnMouseEnter}
-                onMouseLeave={this.handleOnMouseLeave}
-              >
-                <Text size='small' color='inherit' align='center'>{addButtonTitle}</Text>
-              </Button>
-            }
+            <GroupActionButton
+              group={group}
+              relationships={relationships}
+              size='small'
+            />
          </div>
        }
      </div>
@ -145,23 +117,12 @@ const mapStateToProps = (state, { id }) => ({
  relationships: state.getIn(['group_relationships', id]),
 })

-const mapDispatchToProps = (dispatch) => ({
-  onToggleMembership(groupId, relationships) {
-    if (relationships.get('member')) {
-      dispatch(leaveGroup(groupId))
-    } else {
-      dispatch(joinGroup(groupId))
-    }
-  },
-})
-
 GroupListItem.propTypes = {
  group: ImmutablePropTypes.map,
  isAddable: PropTypes.bool,
  isHidden: PropTypes.bool,
  isLast: PropTypes.bool,
  isStatic: PropTypes.bool,
-  onToggleMembership: PropTypes.func.isRequired,
  relationships: ImmutablePropTypes.map,
 }

@ -169,4 +130,4 @@ GroupListItem.defaultProps = {
  isLast: false,
 }

-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GroupListItem))
+export default injectIntl(connect(mapStateToProps)(GroupListItem))
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@ -516,6 +516,7 @@ pre {
 .maxW100PC42PX { max-width: calc(100% - 42px); }

 .minW330PX { min-width: 330px; }
+.minW76PX { min-width: 76px; }
 .minW20PX { min-width: 20px; }
 .minW14PX { min-width: 14px; }