Progress

2020-02-28 10:20:47 -05:00
parent 0bd1eb2c77
commit 3ca4ffcc6b
77 changed files with 6110 additions and 1427 deletions
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -0,0 +1,31 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { me } from '../../initial_state'
+import { shortNumberFormat } from '../../utils/numbers'
+import PanelLayout from './panel_layout'
+import UserStat from '../user_stat'
+
+const messages = defineMessages({
+  title: { id: 'about', defaultMessage: 'About' },
+})
+
+export default
+@injectIntl
+class GroupInfoPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    group: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl, group } = this.props
+
+    return (
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        
+      </PanelLayout>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
@@ -1,71 +1,53 @@
-import { defineMessages, injectIntl } from 'react-intl';
-import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import AccountContainer from '../../containers/account_container';
-import PanelLayout from './panel_layout';
+import { defineMessages, injectIntl } from 'react-intl'
+import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import AccountContainer from '../../containers/account_container'
+import PanelLayout from './panel_layout'

 const messages = defineMessages({
-  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
-  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
-  show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
-});
+  title: { id: 'media_gallery_panel.title', defaultMessage: 'Media' },
+  show_all: { id: 'media_gallery_panel.all', defaultMessage: 'Show all' },
+})

 const mapStateToProps = state => ({
  suggestions: state.getIn(['suggestions', 'items']),
-});
+})

 const mapDispatchToProps = dispatch => {
  return {
    fetchSuggestions: () => dispatch(fetchSuggestions()),
    dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
  }
-};
+}

 export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
-class WhoToFollowPanel extends ImmutablePureComponent {
+class MediaGalleryPanel extends ImmutablePureComponent {

  static propTypes = {
-    suggestions: ImmutablePropTypes.list.isRequired,
-    fetchSuggestions: PropTypes.func.isRequired,
-    dismissSuggestion: PropTypes.func.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
    intl: PropTypes.object.isRequired,
-  };
+  }

-  componentDidMount () {
-    this.props.fetchSuggestions();
+  componentDidMount() {
+    // this.props.fetchSuggestions()
  }

  render() {
-    const { intl, /* suggestions, */ dismissSuggestion } = this.props;
-    // : testing!!! :
-    const suggestions = [
-      "1",
-    ]
-    // if (suggestions.isEmpty()) {
-    //   return null;
-    // }
+    const { intl, account } = this.props
+
+    console.log("account:", account)

    return (
      <PanelLayout
        title={intl.formatMessage(messages.title)}
-        footerButtonTitle={intl.formatMessage(messages.show_more)}
-        footerButtonTo='/explore'
+        headerButtonTitle={intl.formatMessage(messages.show_all)}
+        headerButtonTo='/explore'
      >
-        <div className={_s.default}>
-          {suggestions && suggestions.map(accountId => (
-            <AccountContainer
-              key={accountId}
-              id={accountId}
-              actionIcon='times'
-              actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-              onActionClick={dismissSuggestion}
-            />
-          ))}
-        </div>
+
      </PanelLayout>
-    );
-  };
-};
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -1,71 +1,157 @@
-import { defineMessages, injectIntl } from 'react-intl';
-import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import AccountContainer from '../../containers/account_container';
-import PanelLayout from './panel_layout';
+import { defineMessages, injectIntl } from 'react-intl'
+import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { List as ImmutableList } from 'immutable'
+import classNames from 'classnames/bind'
+import PanelLayout from './panel_layout'
+import Icon from '../icon'
+import Text from '../text'
+
+const cx = classNames.bind(_s)

 const messages = defineMessages({
-  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
-  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
-  show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
-});
+  title: { id: 'about', defaultMessage: 'About' },
+  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
+  account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
+  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
+  memberSince: { id: 'account.member_since', defaultMessage: 'Member since {date}' },
+})
+
+const mapStateToProps = (state, { account }) => {
+  const identityProofs = !!account ? state.getIn(['identity_proofs', account.get('id')], ImmutableList()) : ImmutableList();
+  return {
+    identityProofs,
+    domain: state.getIn(['meta', 'domain']),
+  };
+};

-const mapStateToProps = state => ({
-  suggestions: state.getIn(['suggestions', 'items']),
-});

 const mapDispatchToProps = dispatch => {
  return {
    fetchSuggestions: () => dispatch(fetchSuggestions()),
    dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
  }
-};
+}

 export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
-class WhoToFollowPanel extends ImmutablePureComponent {
+class ProfileInfoPanel extends ImmutablePureComponent {

  static propTypes = {
-    suggestions: ImmutablePropTypes.list.isRequired,
-    fetchSuggestions: PropTypes.func.isRequired,
-    dismissSuggestion: PropTypes.func.isRequired,
+    identityProofs: ImmutablePropTypes.list,
+    account: ImmutablePropTypes.map.isRequired,
    intl: PropTypes.object.isRequired,
-  };
+  }

-  componentDidMount () {
-    this.props.fetchSuggestions();
+  componentDidMount() {
+    this.props.fetchSuggestions()
  }

  render() {
-    const { intl, /* suggestions, */ dismissSuggestion } = this.props;
-    // : testing!!! :
-    const suggestions = [
-      "1",
-    ]
-    // if (suggestions.isEmpty()) {
-    //   return null;
-    // }
+    const { intl, account, identityProofs } = this.props
+
+    const fields = !account ? null : account.get('fields')
+    const content = !account ? null : { __html: account.get('note_emojified') }
+    const memberSinceDate = !account ? null : intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
+    const hasNote = !!content ? (account.get('note').length > 0 && account.get('note') !== '<p></p>') : false
+
+    const lineClasses = cx({
+      default: 1,
+      flexRow: 1,
+      alignItemsCenter: 1,
+      borderTop1PX: 1,
+      borderColorSecondary: 1,
+      marginTop10PX: 1,
+      paddingTop10PX: 1,
+    })
+
+    const memberLineClasses = cx({
+      default: 1,
+      flexRow: 1,
+      alignItemsCenter: 1,
+      borderTop1PX: hasNote,
+      borderColorSecondary: hasNote,
+      marginTop10PX: hasNote,
+      paddingTop10PX: hasNote,
+    })

    return (
-      <PanelLayout
-        title={intl.formatMessage(messages.title)}
-        footerButtonTitle={intl.formatMessage(messages.show_more)}
-        footerButtonTo='/explore'
-      >
-        <div className={_s.default}>
-          {suggestions && suggestions.map(accountId => (
-            <AccountContainer
-              key={accountId}
-              id={accountId}
-              actionIcon='times'
-              actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-              onActionClick={dismissSuggestion}
-            />
-          ))}
-        </div>
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        {
+          !!account &&
+          <div className={[_s.default].join(' ')}>
+            {
+              hasNote &&
+              <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
+            }
+
+            <div className={memberLineClasses}>
+              <Icon id='calendar' width='12px' height='12px' className={_s.fillcolorSecondary} />
+              <Text
+                size='small'
+                color='secondary'
+                className={_s.marginLeft5PX}
+              >
+                {
+                  intl.formatMessage(messages.memberSince, {
+                    date: memberSinceDate
+                  })
+                }
+              </Text>
+            </div>
+
+            {(fields.size > 0 || identityProofs.size > 0) && (
+              <div className={[_s.default]}>
+
+                {identityProofs.map((proof, i) => (
+                  <dl className={lineClasses} key={`profile-identity-proof-${i}`}>
+                    <dt
+                      className={_s.dangerousContent}
+                      dangerouslySetInnerHTML={{ __html: proof.get('provider') }}
+                    />
+
+                    { /* : todo : */ }
+                    <dd className='verified'>
+                      <a href={proof.get('proof_url')} target='_blank' rel='noopener'>
+                        <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
+                          <Icon id='check' className='verified__mark' />
+                        </span>
+                      </a>
+                      <a href={proof.get('profile_url')} target='_blank' rel='noopener'>
+                        <span
+                          className={_s.dangerousContent}
+                          dangerouslySetInnerHTML={{ __html: ' ' + proof.get('provider_username') }}
+                        />
+                      </a>
+                    </dd>
+                  </dl>
+                ))}
+
+                {
+                  fields.map((pair, i) => (
+                    <dl className={lineClasses} key={`profile-field-${i}`}>
+                      <dt
+                        className={[_s.text, _s.dangerousContent].join('')}
+                        dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
+                        title={pair.get('name')}
+                      />
+                      <dd
+                        className={[_s.dangerousContent, _s.marginLeftAuto].join(' ')}
+                        title={pair.get('value_plain')}
+                        dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
+                      />
+                    </dl>
+                  ))
+                }
+
+              </div>
+            )}
+
+          </div>
+        }
      </PanelLayout>
-    );
-  };
-};
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
@@ -0,0 +1,63 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { me } from '../../initial_state'
+import { shortNumberFormat } from '../../utils/numbers'
+import PanelLayout from './panel_layout'
+import UserStat from '../user_stat'
+
+const messages = defineMessages({
+  gabs: { id: 'account.gabs', defaultMessage: 'Gabs' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+  favorites: { id: 'navigation_bar.favorites', defaultMessage: 'Favorites' },
+})
+
+export default
+@injectIntl
+class ProfileStatsPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl, account } = this.props
+
+    if (!account) return null
+
+    return (
+      <PanelLayout>
+        {
+          !!account &&
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <UserStat
+              title={intl.formatMessage(messages.gabs)}
+              value={shortNumberFormat(account.get('statuses_count'))}
+              to={`/${account.get('acct')}`}
+            />
+            <UserStat
+              title={intl.formatMessage(messages.follows)}
+              value={shortNumberFormat(account.get('following_count'))}
+              to={`/${account.get('acct')}/following`}
+            />
+            <UserStat
+              title={intl.formatMessage(messages.followers)}
+              value={shortNumberFormat(account.get('followers_count'))}
+              to={`/${account.get('acct')}/followers`}
+            />
+            {
+              account.get('id') === me &&
+              <UserStat
+                title={intl.formatMessage(messages.favorites)}
+                value={shortNumberFormat(account.get('favourite_count'))}
+                to={`/${account.get('acct')}/favorites`}
+              />
+            }
+          </div>
+        }
+      </PanelLayout>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -2,7 +2,7 @@ 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 { autoPlayGif, me } from '../../initial_state'
+import { me } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
 import { shortNumberFormat } from '../../utils/numbers'
 import DisplayName from '../display_name'
@@ -18,10 +18,8 @@ const messages = defineMessages({
 })

 const mapStateToProps = state => {
-  const getAccount = makeGetAccount()
-
  return {
-    account: getAccount(state, me),
+    account: makeGetAccount()(state, me),
  }
 }

@@ -36,25 +34,6 @@ class UserPanel extends ImmutablePureComponent {

  render() {
    const { account, intl } = this.props
-    const displayNameHtml = { __html: account.get('display_name_html') }
-
-    const statItems = [
-      {
-        to: `/${account.get('acct')}`,
-        title: intl.formatMessage(messages.gabs),
-        value: shortNumberFormat(account.get('statuses_count')),
-      },
-      {
-        to: `/${account.get('acct')}/followers`,
-        title: intl.formatMessage(messages.followers),
-        value: shortNumberFormat(account.get('followers_count')),
-      },
-      {
-        to: `/${account.get('acct')}/following`,
-        title: intl.formatMessage(messages.follows),
-        value: shortNumberFormat(account.get('following_count')),
-      },
-    ]

    return (
      <PanelLayout noPadding>
@@ -76,11 +55,21 @@ class UserPanel extends ImmutablePureComponent {
        </NavLink>

        <div className={[_s.default, _s.marginBottom15PX, _s.marginTop5PX, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
-          {
-            statItems.map((statItem, i) => (
-              <UserStat {...statItem} key={`user-stat-panel-item-${i}`} />
-            ))
-          }
+          <UserStat
+            to={`/${account.get('acct')}`}
+            title={intl.formatMessage(messages.gabs)}
+            value={shortNumberFormat(account.get('statuses_count'))}
+          />
+          <UserStat
+            to={`/${account.get('acct')}/followers`}
+            title={intl.formatMessage(messages.followers)}
+            value={shortNumberFormat(account.get('followers_count'))}
+          />
+          <UserStat
+            to={`/${account.get('acct')}/following`}
+            title={intl.formatMessage(messages.follows)}
+            value={shortNumberFormat(account.get('following_count'))}
+          />
        </div>
      </PanelLayout>
    )