Updated GroupListItem to have toggle membership button, always slim

• Updated:
- GroupListItem to have toggle membership button
- always slim

app/javascript/gabsocial/components/group_list_item.js

@@ -3,9 +3,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { Fragment } from 'react'
 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'
+import Button from './button'
 import Image from './image'
 import Text from './text'
 
@@ -15,36 +17,67 @@ const messages = defineMessages({
 
 const mapStateToProps = (state, { id }) => ({
   group: state.getIn(['groups', id]),
+  relationships: state.getIn(['group_relationships', id]),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onToggleMembership(groupId, relationships) {
+    if (relationships.get('member')) {
+      dispatch(leaveGroup(groupId))
+    } else {
+      dispatch(joinGroup(groupId))
+    }
+  },
 })
 
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class GroupListItem extends ImmutablePureComponent {
 
   static propTypes = {
     group: ImmutablePropTypes.map,
-    slim: PropTypes.bool,
-    isLast: PropTypes.bool,
+    isAddable: PropTypes.bool,
     isHidden: PropTypes.bool,
+    isLast: PropTypes.bool,
+    onToggleMembership: PropTypes.func.isRequired,
+    relationships: ImmutablePropTypes.map,
   }
 
   static defaultProps = {
-    slim: false,
     isLast: false,
   }
 
+  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 {
-      intl,
       group,
-      slim,
+      intl,
+      isAddable,
       isLast,
       isHidden,
+      relationships,
     } = this.props
+    const { hovering } = this.state
 
     if (!group) return null
-
+    
     if (isHidden) {
       return (
         <Fragment>
@@ -55,68 +88,75 @@ class GroupListItem extends ImmutablePureComponent {
     
     const containerClasses = CX({
       default: 1,
-      noUnderline: 1,
       overflowHidden: 1,
       bgSubtle_onHover: 1,
       borderColorSecondary: 1,
-      radiusSmall: !slim,
-      mb10: !slim && !isLast,
-      border1PX: !slim,
-      borderBottom1PX: slim && !isLast,
-      flexRow: slim,
-      py5: slim,
+      borderBottom1PX: !isLast,
+      flexRow: 1,
+      py5: 1,
+      width100PC: 1,
     })
 
-    const imageClasses = CX({
-      height122PX: !slim,
-      radiusSmall: slim,
-      height72PX: slim,
-      width72PX: slim,
-      ml15: slim,
-    })
-
-    const textContainerClasses = CX({
+    const containerLinkClasses = CX({
       default: 1,
-      px10: 1,
-      mt5: 1,
-      flexShrink1: slim,
-      mb10: !slim,
+      flexRow: 1,
+      noUnderline: 1,
+      width100PC: 1,
+      maxWidth100PC42PX: 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 addButtonIcon = isMember ? hovering ? 'subtract' : 'check' : 'add'
+    const addButtonColor = isMember ? 'tertiary' : 'brand'
 
     return (
-      <NavLink
-        to={`/groups/${group.get('id')}`}
-        className={containerClasses}
-      >
-
-        {
-          (!!coverSrc || slim) && !coverMissing &&
-          <Image
-            src={coverSrc}
-            alt={group.get('title')}
-            className={imageClasses}
-          />
-        }
-
-        <div className={textContainerClasses}>
-          <Text color='brand' weight='bold'>
-            {group.get('title')}
-          </Text>
+      <div className={containerClasses}>
+        <NavLink
+          to={`/groups/${group.get('id')}`}
+          className={containerLinkClasses}
+        >
 
           {
-            slim &&
+            !coverMissing &&
+            <Image
+              src={coverSrc}
+              alt={group.get('title')}
+              className={[_s.radiusSmall, _s.height53PX, _s.width84PX, _s.ml15].join(' ')}
+            />
+          }
+
+          <div className={[_s.default, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
+            <Text color='brand' weight='bold'>
+              {group.get('title')}
+            </Text>
+
             <Text color='secondary' size='small' className={_s.mt5}>
               {shortNumberFormat(group.get('member_count'))}
               &nbsp;
               {intl.formatMessage(messages.members)}
             </Text>
-          }
 
+          </div>
+        </NavLink>
+        <div className={[_s.default, _s.justifyContentCenter].join(' ')}>
+          {
+            relationships &&
+            <Button
+              isNarrow
+              color='white'
+              backgroundColor={addButtonColor}
+              className={[_s.px5, _s.bgDangerDark_onHover].join(' ')}
+              onClick={this.handleOnToggleMembership}
+              onMouseEnter={this.handleOnMouseEnter}
+              onMouseLeave={this.handleOnMouseLeave}
+              icon={addButtonIcon}
+              iconSize='10px'
+            />
+          }
         </div>
-      </NavLink>
+      </div>
     )
   }