Progress

2020-02-08 01:12:01 -05:00
parent fa66d082f8
commit 1c98dd283e
146 changed files with 1462 additions and 1951 deletions
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -0,0 +1,154 @@
+import { Fragment } from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
+import { NavLink } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import { shortNumberFormat } from '../../utils/numbers'
+import PanelLayout from './panel_layout'
+import Icon from '../icon'
+
+const messages = defineMessages({
+  title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
+  all: { id: 'groups.sidebar-panel.all', defaultMessage: 'All' },
+  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
+  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
+})
+
+const mapStateToProps = (state) => ({
+  groupIds: state.getIn(['group_lists', 'member']),
+})
+
+export default @connect(mapStateToProps)
+@injectIntl
+class GroupSidebarPanel extends ImmutablePureComponent {
+  static propTypes = {
+    groupIds: ImmutablePropTypes.list,
+  }
+
+  render() {
+    const { intl, groupIds } = this.props
+    const count = groupIds.count()
+
+    if (count === 0) return null
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        button={(
+          <NavLink
+            to='/groups/browse/member'
+            className={[styles.default, styles.fontWeightBold, styles.text, styles.colorBrand, styles.fontSize13PX, styles.noUnderline].join(' ')}
+          >
+            {intl.formatMessage(messages.all)}
+          </NavLink>
+        )}
+      >
+        <div className={styles.default}>
+          {
+            groupIds.slice(0, 6).map(groupId => (
+              <GroupPanelItem key={`group-panel-item-${groupId}`} id={groupId} />
+            ))
+          }
+          {
+            count > 6 &&
+            <NavLink
+              to='/groups/browse/member'
+              className={[styles.default, styles.noUnderline, styles.paddingVertical5PX, styles.marginRightAuto, styles.marginTop5PX, styles.marginLeftAuto, styles.cursorPointer, styles.circle, styles.text, styles.displayFlex, styles.colorBrand].join(' ')}
+            >
+              {intl.formatMessage(messages.show_all)}
+            </NavLink>
+          }
+        </div>
+      </PanelLayout>
+    )
+  }
+}
+
+const mapStateToProps2 = (state, { id }) => ({
+  group: state.getIn(['groups', id]),
+  relationships: state.getIn(['group_relationships', id]),
+})
+
+@connect(mapStateToProps2)
+@injectIntl
+class GroupPanelItem extends ImmutablePureComponent {
+  static propTypes = {
+    group: ImmutablePropTypes.map,
+    relationships: ImmutablePropTypes.map,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { intl, group, relationships } = this.props
+    const { hovering } = this.state
+
+    if (!relationships) return null
+
+    const unreadCount = relationships.get('unread_count')
+
+    const cx = classNames.bind(styles)
+
+    const titleClasses = cx({
+      default: 1,
+      text: 1,
+      displayFlex: 1,
+      colorBrand: 1,
+      fontSize14PX: 1,
+      fontWeightBold: 1,
+      lineHeight15: 1,
+      underline: hovering,
+    })
+
+    return (
+      <NavLink
+        to={`/groups/${group.get('id')}`}
+        className={[styles.default, styles.noUnderline, styles.marginTop5PX, styles.overflowHidden, styles.radiusSmall, styles.marginBottom10PX, styles.border1PX, styles.borderColorSubtle].join(' ')}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+      >
+        <div className={[styles.default, styles.height122PX].join(' ')}>
+          <img
+            src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
+            alt={group.get('title')}
+            className={[styles.default, styles.objectFitCover, styles.height122PX, styles.width100PC].join(' ')}
+          />
+        </div>
+        <div className={[styles.default, styles.paddingHorizontal10PX, styles.marginVertical5PX].join(' ')}>
+          <span className={titleClasses}>
+            {group.get('title')}
+          </span>
+          <span className={[styles.default, styles.text, styles.alignItemsCenter, styles.displayFlex, styles.flexRow, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal, styles.lineHeight15].join(' ')}>
+            {
+              unreadCount > 0 &&
+              <Fragment>
+                {shortNumberFormat(unreadCount)}
+                &nbsp;
+                {intl.formatMessage(messages.new_statuses)}
+              </Fragment>
+            }
+            {
+              unreadCount === 0 &&
+              <Fragment>
+                {intl.formatMessage(messages.no_recent_activity)}
+              </Fragment>
+            }
+            <Icon className={styles.marginLeftAuto} width='10px' height='10px' />
+          </span>
+        </div>
+      </NavLink>
+    )
+  }
+}
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -1,28 +1,32 @@
 import classNames from 'classnames/bind'
-import Icon from '../icon'

 export default class PanelLayout extends PureComponent {
  static propTypes = {
    title: PropTypes.string,
    subtitle: PropTypes.string,
-    icon: PropTypes.string,
    children: PropTypes.node,
    hasBackground: PropTypes.boolean,
+    button: PropTypes.node,
  }

  render() {
-    const { title, subtitle, icon, hasBackground, children } = this.props
+    const { title, subtitle, button, hasBackground, children } = this.props

    return (
-      <aside className={[styles.default, styles.backgroundSubtle, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX].join(' ')}>
+      <aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
        {
          (title || subtitle) &&
          <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderBottom1PX].join(' ')}>
            <div className={[styles.default, styles.flexRow, styles.alignItemsCenter].join(' ')}>
-              {icon && <Icon id={icon} height='16px' width='16px' className={[styles.default, styles.marginRight10PX].join(' ')} />}
-              <span className={[styles.default, styles.text, styles.fontWeightExtraBold, styles.colorBlack, styles.fontSize19PX].join(' ')}>{title}</span>
+              <h1 className={[styles.default, styles.text, styles.fontWeightBold, styles.colorBlack, styles.fontSize16PX].join(' ')}>{title}</h1>
+              {
+                !!button &&
+                <div className={[styles.default, styles.marginLeftAuto].join(' ')}>
+                  {button}
+                </div>
+              }
            </div>
-            {subtitle && <span className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.marginTop5PX].join(' ')}>{subtitle}</span>}
+            {subtitle && <h2 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightBold, styles.marginTop5PX].join(' ')}>{subtitle}</h2>}
          </div>
        }
        <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/app/javascript/gabsocial/components/panel/progress_panel.js
@@ -10,7 +10,6 @@ export default class ProgressPanel extends PureComponent {
      <PanelLayout
        title="Gab's Operational Expenses"
        subtitle="We are 100% funded by you"
-        icon="comments"
        hasBackground
      >
        <ProgressBar progress={monthlyExpensesComplete}/>
--- a/app/javascript/gabsocial/components/panel/promo_panel.js
+++ b/app/javascript/gabsocial/components/panel/promo_panel.js
@@ -1,85 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
-import { me } from '../../initial_state';
-import Icon from '../icon'
-import PanelLayout from './panel_layout'
-
-const messages = defineMessages({
-  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
-  store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
-  apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
-})
-
-const mapStateToProps = state => {
-  return {
-    isPro: state.getIn(['accounts', me, 'is_pro']),
-  };
-};
-
-export default
-@injectIntl
-@connect(mapStateToProps)
-class PromoPanel extends PureComponent {
-
-  static propTypes = {
-    isPro: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-  }
-
-  render() {
-    const { isPro, intl } = this.props
-
-    const cx = classNames.bind(styles)
-
-    const items = [
-      {
-        text: intl.formatMessage(messages.pro),
-        href: 'https://pro.gab.com',
-        icon: 'arrow-up',
-        conditions: isPro,
-        highlighted: true,
-      },
-      {
-        text: intl.formatMessage(messages.donation),
-        href: 'https://shop.dissenter.com/category/donations',
-        icon: 'heart',
-      },
-      {
-        text: intl.formatMessage(messages.store),
-        href: 'https://shop.dissenter.com',
-        icon: 'shopping-cart',
-      },
-      {
-        text: intl.formatMessage(messages.apps),
-        href: 'https://apps.gab.com',
-        icon: 'th',
-      }
-    ]
-
-    return (
-      <PanelLayout>
-        {
-          items.map((item, i) => {
-            if (item.conditions === false) return null
-
-            const classes = cx({
-              default: true,
-              borderColorSubtle: i !== items.length - 1,
-              borderBottom1PX: i !== items.length - 1,
-            })
-
-            return (
-              <div key={`promo-panel-item-${i}`} className={classes}>
-                <a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
-                  <Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
-                  {item.text}
-                </a>
-              </div>
-            )
-          })
-        }
-      </PanelLayout>
-    )
-  }
-}
--- a/app/javascript/gabsocial/components/panel/trends_panel.js
+++ b/app/javascript/gabsocial/components/panel/trends_panel.js
@@ -6,7 +6,7 @@ import TrendingItem from '../../components/trending_item';
 import PanelLayout from './panel_layout';

 const messages = defineMessages({
-  title: { id:'trends.title', defaultMessage: 'Trends' },
+  title: { id:'trends.title', defaultMessage: 'Trends for you' },
 });

 const mapStateToProps = state => ({
@@ -36,16 +36,22 @@ class TrendsPanel extends ImmutablePureComponent {
  render() {
    const { intl, trends } = this.props;

-    if (trends.isEmpty()) {
-      return null;
-    }
+    // !!! TESTING !!!
+    // if (trends.isEmpty()) {
+    //   return null;
+    // }

    return (
-      <PanelLayout id='hashtag' title={intl.formatMessage(messages.title)}>
-        <div className='panel__list'>
-          {trends && trends.map(hashtag => (
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        <div className={styles.default}>
+          { /* trends && trends.map(hashtag => (
            <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
-          ))}
+          )) */ }
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
        </div>
      </PanelLayout>
    );
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -7,7 +7,7 @@ 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' },
+  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
 });

 const mapStateToProps = state => ({
@@ -37,15 +37,20 @@ class WhoToFollowPanel extends ImmutablePureComponent {
  }

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

    return (
-      <PanelLayout icon='users' title={intl.formatMessage(messages.title)}>
-        <div className='panel__list'>
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        <div className={styles.default}>
          {suggestions && suggestions.map(accountId => (
            <AccountContainer
              key={accountId}