Added StatusPromotionPanel

• Added: - StatusPromotionPanel • Todo: - Build out functionality for opening media, opening status, etc.
2020-07-15 23:00:19 -05:00 · 2020-07-15 23:00:19 -05:00 · f61449d706
commit f61449d706
parent 8c3d4a352a
1 changed files with 134 additions and 0 deletions
--- a/app/javascript/gabsocial/components/panel/status_promotion_panel.js
+++ b/app/javascript/gabsocial/components/panel/status_promotion_panel.js
@ -0,0 +1,134 @@
+import { NavLink } from 'react-router-dom'
+import { injectIntl, defineMessages } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { fetchStatus } from '../../actions/statuses'
+import { makeGetStatus } from '../../selectors'
+import { me } from '../../initial_state'
+import {
+  CX,
+} from '../../constants'
+import PanelLayout from './panel_layout'
+import Avatar from '../avatar'
+import Button from '../button'
+import DisplayName from '../display_name'
+import ColumnIndicator from '../column_indicator'
+import StatusContent from '../status_content'
+import StatusMedia from '../status_media'
+
+const messages = defineMessages({
+  gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Following' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
+})
+
+const mapStateToProps = (state, { statusId }) => ({
+  status: makeGetStatus()(state, { id: statusId }),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchStatus: (id) => dispatch(fetchStatus(id)),
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class StatusPromotionPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    statusId: PropTypes.string.isRequired,
+    onFetchStatus: PropTypes.func.isRequired,
+  }
+
+  componentDidMount() {
+    if (!this.props.status) {
+      this.props.onFetchStatus(this.props.statusId)
+    }
+  }
+
+  render() {
+    const { status } = this.props
+
+    const containerClasses = CX({
+      default: 1,
+      pb10: !!status ? status.get('media_attachments').size === 0 : false,
+    })
+
+    return (
+      <PanelLayout noPadding>
+        {
+          !status && <ColumnIndicator type='loading' />
+        }
+        {
+          !!status &&
+          <div className={_s.default}>
+            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+
+                <NavLink
+                  to={`/${status.getIn(['account', 'acct'])}`}
+                  title={status.getIn(['account', 'acct'])}
+                  className={[_s.default, _s.mr10].join(' ')}
+                >
+                  <Avatar account={status.get('account')} size={28} />
+                </NavLink>
+
+                <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
+
+                  <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
+                    <NavLink
+                      className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+                      to={`/${status.getIn(['account', 'acct'])}`}
+                      title={status.getIn(['account', 'acct'])}
+                    >
+                      <DisplayName account={status.get('account')} noRelationship />
+                    </NavLink>
+
+                    <Button
+                      isText
+                      backgroundColor='none'
+                      color='none'
+                      icon='ellipsis'
+                      iconSize='20px'
+                      iconClassName={_s.fillSecondary}
+                      className={_s.mlAuto}
+                      onClick={() => {}}
+                      // buttonRef={this.setStatusOptionsButton}
+                    />
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div className={containerClasses}>
+              <StatusContent
+                status={status}
+                expanded={!status.get('hidden')}
+                collapsable
+                onClick={() => { }}
+                onExpandedToggle={() => { }}
+              />
+            </div>
+
+            <StatusMedia
+              status={status}
+              onOpenMedia={() => { }}
+              onToggleVisibility={() => { }}
+              onOpenVideo={() => { }}
+              // width={this.props.cachedMediaWidth}
+              // cacheWidth={this.props.cacheMediaWidth}
+              // defaultWidth={this.props.cachedMediaWidth}
+              // visible={this.state.showMedia}
+            />
+            
+          </div>
+        }
+      </PanelLayout>
+    )
+  }
+
+}