Progress

2020-04-29 18:32:49 -04:00
parent 5efe40f301
commit 03de4c4fea
92 changed files with 1132 additions and 787 deletions
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -69,7 +69,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
            <Divider isSmall />

            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
+              <Icon id='calendar' size='12px' className={_s.fillSecondary} />
              <Text
                size='small'
                color='secondary'
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -17,15 +17,14 @@ const mapStateToProps = (state) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onFetchGroups: (type) => {
-    dispatch(fetchGroups(type))
-  }
+  onFetchGroups: (type) => dispatch(fetchGroups(type))
 })

 export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class GroupSidebarPanel extends ImmutablePureComponent {
+
  static propTypes = {
    groupIds: ImmutablePropTypes.list,
    isLazy: PropTypes.bool, 
@@ -37,6 +36,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
    fetched: false,
  }

+  updateOnProps = [
+    'groupIds',
+    'isLazy',
+    'isSlim',
+  ]
+
  componentDidMount() {
    if (!this.props.isLazy) {
      this.props.onFetchGroups('member')
@@ -76,23 +81,20 @@ class GroupSidebarPanel extends ImmutablePureComponent {
        footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
        noPadding={slim}
      >
-        <div className={_s.default}>
-          <ScrollableList
-            scrollKey='groups-panel'
-          >
-            {
-              groupIds.slice(0, maxCount).map((groupId, i) => (
-                <GroupListItem
-                  key={`group-panel-item-${groupId}`}
-                  id={groupId}
-                  slim={slim}
-                  isLast={groupIds.length - 1 === i}
-                />
-              ))
-            }
-          </ScrollableList>
-        </div>
+        <ScrollableList scrollKey='groups_panel'>
+          {
+            groupIds.slice(0, maxCount).map((groupId, i) => (
+              <GroupListItem
+                key={`group-panel-item-${groupId}`}
+                id={groupId}
+                slim={slim}
+                isLast={groupIds.count() - 1 === i}
+              />
+            ))
+          }
+        </ScrollableList>
      </PanelLayout>
    )
  }
+
 }
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -49,7 +49,7 @@ class ListDetailsPanel extends ImmutablePureComponent {
          <Divider isSmall />

          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
+            <Icon id='calendar' size='12px' className={_s.fillSecondary} />
            <Text
              size='small'
              color='secondary'
--- a/app/javascript/gabsocial/components/panel/lists_panel.js
+++ b/app/javascript/gabsocial/components/panel/lists_panel.js
@@ -17,9 +17,7 @@ const mapStateToProps = (state) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onFetchLists() {
-    return dispatch(fetchLists())
-  },
+  onFetchLists: () => dispatch(fetchLists()),
 })

 export default
@@ -64,7 +62,7 @@ class ListsPanel extends ImmutablePureComponent {

    const maxCount = 6

-    const listItems = lists.slice(0, maxCount).map(list => ({
+    const listItems = lists.slice(0, maxCount).map((list) => ({
      to: `/lists/${list.get('id')}`,
      title: list.get('title'),
    }))
@@ -79,10 +77,7 @@ class ListsPanel extends ImmutablePureComponent {
        noPadding
      >
        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
-          <List
-            scrollKey='lists_sidebar_panel'
-            items={listItems}
-          />
+          <List scrollKey='lists_sidebar_panel' items={listItems} />
        </div>
      </PanelLayout>
    )
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
@@ -55,7 +55,6 @@ class MediaGalleryPanel extends ImmutablePureComponent {
    } = this.props

    if (!account || !attachments) return null
-    if (attachments.size === 0) return null

    return (
      <PanelLayout
@@ -63,19 +62,22 @@ class MediaGalleryPanel extends ImmutablePureComponent {
        title={intl.formatMessage(messages.title)}
        headerButtonTitle={intl.formatMessage(messages.show_all)}
        headerButtonTo={`/${account.get('acct')}/media`}
-      >
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
-          {
-            attachments.slice(0, 16).map((attachment, i) => (
-              <MediaItem
-                isSmall
-                key={attachment.get('id')}
-                attachment={attachment}
-                account={account}
-              />
-            ))
-          }
-        </div>
+      > 
+        {
+          attachments.size > 0 &&
+          <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+            {
+              attachments.slice(0, 16).map((attachment, i) => (
+                <MediaItem
+                  isSmall
+                  key={attachment.get('id')}
+                  attachment={attachment}
+                  account={account}
+                />
+              ))
+            }
+          </div>
+        }
      </PanelLayout>
    )
  }
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -87,7 +87,7 @@ export default class PanelLayout extends PureComponent {
                backgroundColor='none'
                to={footerButtonTo}
                onClick={footerButtonAction}
-                className={[_s.px15, _s.py15, _s.backgroundColorSubtle_onHover].join(' ')}
+                className={[_s.px15, _s.py15, _s.bgSubtle_onHover].join(' ')}
              >
                <Text color='brand' size='medium'>
                  {footerButtonTitle}
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -71,7 +71,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
          }

          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
+            <Icon id='calendar' size='12px' className={_s.fillSecondary} />
            <Text
              size='small'
              color='secondary'
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/app/javascript/gabsocial/components/panel/progress_panel.js
@@ -1,23 +1,42 @@
-import { me, monthlyExpensesComplete } from '../../initial_state'
+import { injectIntl, defineMessages } from 'react-intl'
+import { monthlyExpensesComplete } from '../../initial_state'
+import { URL_DISSENTER_SHOP } from '../../constants'
 import PanelLayout from './panel_layout';
 import ProgressBar from '../progress_bar'

-export default class ProgressPanel extends PureComponent {
+const messages = defineMessages({
+  progressTitle: { id: 'progress_title', defaultMessage: '{value}% covered this month' },
+  operationsTitle: { id: 'operations_title', defaultMessage: "Gab's Operational Expenses" },
+  operationsSubtitle: { id: 'operations_subtitle', defaultMessage: 'We are 100% funded by you' },
+})
+
+export default
+@injectIntl
+class ProgressPanel extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
  render() {
-    if (!monthlyExpensesComplete || !me) return null
+    const { intl } = this.props
+
+    if (!monthlyExpensesComplete) return null
+
+    const value = Math.min(parseFloat(monthlyExpensesComplete), 100)

    return (
      <PanelLayout
-        title="Gab's Operational Expenses"
-        subtitle="We are 100% funded by you"
-        hasBackground
+        title={intl.formatMessage(messages.operationsTitle)}
+        subtitle={intl.formatMessage(messages.operationsSubtitle)}
      >
        <ProgressBar
          progress={monthlyExpensesComplete}
-          title={`${Math.min(parseFloat(monthlyExpensesComplete), 100)}% covered this month`}
-          href='https://shop.dissenter.com/category/donations'
+          title={intl.formatMessage(messages.progressTitle, { value })}
+          href={URL_DISSENTER_SHOP}
        />
      </PanelLayout>
    )
  }
+
 }
--- a/app/javascript/gabsocial/components/panel/trends_panel.js
+++ b/app/javascript/gabsocial/components/panel/trends_panel.js
@@ -3,9 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { fetchGabTrends } from '../../actions/gab_trends'
 import PanelLayout from './panel_layout'
-import ColumnIndicator from '../column_indicator'
 import ScrollableList from '../scrollable_list'
-import TrendingItem from '../trends_item'
+import TrendsItem from '../trends_item'

 const messages = defineMessages({
  title: { id: 'trends.title', defaultMessage: 'Trending right now' },
@@ -30,6 +29,10 @@ class TrendsPanel extends ImmutablePureComponent {
    onFetchGabTrends: PropTypes.func.isRequired,
  }

+  updateOnProps = [
+    'gabtrends',
+  ]
+
  componentDidMount() {
    this.props.onFetchGabTrends()
  }
@@ -42,34 +45,21 @@ class TrendsPanel extends ImmutablePureComponent {
        noPadding
        title={intl.formatMessage(messages.title)}
      >
-        <div className={_s.default}>
+        <ScrollableList
+          showLoading={gabtrends.size == 0}
+          scrollKey='trending-items'
+        >
          {
-            gabtrends.isEmpty() &&
-            <ColumnIndicator type='loading' />
+            gabtrends.slice(0, 8).map((trend, i) => (
+              <TrendsItem
+                key={`gab-trend-${i}`}
+                index={i + 1}
+                isLast={i === 7}
+                trend={trend}
+              />
+            ))
          }
-          {
-            !gabtrends.isEmpty() && 
-            <ScrollableList
-              scrollKey='trending-items'
-            >
-              {
-                gabtrends.slice(0, 8).map((trend, i) => (
-                  <TrendingItem
-                    key={`gab-trend-${i}`}
-                    index={i + 1}
-                    isLast={i === 7}
-                    url={trend.get('url')}
-                    title={trend.get('title')}
-                    description={trend.get('description')}
-                    imageUrl={trend.get('image')}
-                    publishDate={trend.get('date_published')}
-                    author={trend.getIn(['author', 'name'], '')}
-                  />
-                ))
-              }
-            </ScrollableList>
-          }
-        </div>
+        </ScrollableList>
      </PanelLayout>
    )
  }
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -2,19 +2,20 @@ 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 classNames from 'classnames/bind'
 import { me } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
 import { shortNumberFormat } from '../../utils/numbers'
 import { openModal } from '../../actions/modal'
+import {
+  CX,
+  MODAL_EDIT_PROFILE,
+} from '../../constants'
+import PanelLayout from './panel_layout'
+import Avatar from '../avatar'
 import Button from '../button'
 import DisplayName from '../display_name'
-import Avatar from '../avatar'
 import Image from '../image'
 import UserStat from '../user_stat'
-import PanelLayout from './panel_layout'
-
-const cx = classNames.bind(_s)

 const messages = defineMessages({
  gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
@@ -30,7 +31,7 @@ const mapStateToProps = (state) => ({

 const mapDispatchToProps = (dispatch) => ({
  onOpenEditProfile() {
-    dispatch(openModal('EDIT_PROFILE'))
+    dispatch(openModal(MODAL_EDIT_PROFILE))
  },
 })

@@ -38,6 +39,7 @@ export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class UserPanel extends ImmutablePureComponent {
+
  static propTypes = {
    account: ImmutablePropTypes.map.isRequired,
    intl: PropTypes.object.isRequired,
@@ -60,15 +62,15 @@ class UserPanel extends ImmutablePureComponent {
    this.setState({ hovering: false })
  }

-  handleOnOpenEditProfile = () => {
-    this.props.onOpenEditProfile()
-  }
-
  render() {
-    const { account, intl } = this.props
+    const {
+      account,
+      intl,
+      onOpenEditProfile,
+    } = this.props
    const { hovering } = this.state

-    const buttonClasses = cx({
+    const buttonClasses = CX({
      posAbs: 1,
      mt10: 1,
      mr10: 1,
@@ -96,7 +98,7 @@ class UserPanel extends ImmutablePureComponent {
            backgroundColor='secondary'
            radiusSmall
            className={buttonClasses}
-            onClick={this.handleOnOpenEditProfile}
+            onClick={onOpenEditProfile}
          >
            {intl.formatMessage(messages.edit_profile)}
          </Button>
@@ -134,4 +136,5 @@ class UserPanel extends ImmutablePureComponent {
      </PanelLayout>
    )
  }
+
 }