Progress

2020-04-11 18:29:19 -04:00
parent 7249143d9f
commit 595208780e
160 changed files with 1678 additions and 2103 deletions
--- a/app/javascript/gabsocial/components/group_header.js
+++ b/app/javascript/gabsocial/components/group_header.js
@@ -0,0 +1,121 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import classNames from 'classnames/bind'
+import { openPopover, closePopover } from '../actions/popover'
+import { initReport } from '../actions/reports'
+import { openModal } from '../actions/modal'
+import { unfollowModal, me } from '../initial_state'
+import Avatar from './avatar'
+import Button from './button'
+import Block from './block'
+import Icon from './icon'
+import Image from './image'
+import TabBar from './tab_bar'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
+  requested: { id: 'requested', defaultMessage: 'Requested' },
+  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+  profile: { id: 'account.profile', defaultMessage: 'Profile' },
+})
+
+const mapDispatchToProps = (dispatch, { intl }) => ({
+
+  openProfileOptionsPopover(props) {
+    console.log('props:', props)
+    dispatch(openPopover('PROFILE_OPTIONS', props))
+  },
+
+});
+
+export default
+@connect(null, mapDispatchToProps)
+@injectIntl
+class GroupHeader extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    group: ImmutablePropTypes.map,
+    relationships: ImmutablePropTypes.map,
+  }
+
+  
+  render() {
+    const { intl, relationships, group } = this.props
+
+    const tabs = !group ? null : [
+      {
+        to: `/groups/${group.get('id')}`,
+        title: 'Latest',
+      },
+      {
+        to: `/groups/${group.get('id')}/pinned`,
+        title: 'Pinned',
+      },
+      {
+        to: `/groups/${group.get('id')}/popular`,
+        title: 'Popular',
+      },
+    ]
+
+    const coverSrc = !!group ? group.get('cover') : undefined
+    const title = !!group ? group.get('title') : undefined
+
+    return (
+      <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
+        <Block>
+          <div className={[_s.default, _s.width100PC].join(' ')}>
+            
+            {
+              !!coverSrc &&
+              <Image className={_s.height350PX} src={coverSrc} alt={title} />
+            }
+            
+            <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
+              <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                <TabBar tabs={tabs} />
+                <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.marginLeftAuto].join(' ')}>
+                  <Button
+                    color='primary'
+                    backgroundColor='tertiary'
+                    radiusSmall
+                    className={_s.mr5}
+                  >
+                    <Text color='inherit' size='small'>
+                      Leave/Join
+                      </Text>
+                  </Button>
+                  <Button
+                    color='primary'
+                    backgroundColor='tertiary'
+                    radiusSmall
+                    className={_s.mr5}
+                  >
+                    <Text color='inherit' size='small'>
+                      Share
+                    </Text>
+                  </Button>
+                  <Button
+                    radiusSmall
+                    color='primary'
+                    backgroundColor='tertiary'
+                    className={_s.mr5}
+                    icon='ellipsis'
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Block>
+      </div>
+    )
+  }
+
+}