Progress

app/javascript/gabsocial/components/panel/groups_panel.js

@@ -1,19 +1,14 @@
-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'
+import GroupListItem from '../group_list_item'
+import Button from '../button'
 
 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) => ({
@@ -36,119 +31,26 @@ class GroupSidebarPanel extends ImmutablePureComponent {
     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>
-        )}
+        buttonTitle={intl.formatMessage(messages.all)}
+        buttonTo='/groups/browse/member'
       >
-        <div className={styles.default}>
+        <div className={_s.default}>
           {
             groupIds.slice(0, 6).map(groupId => (
-              <GroupPanelItem key={`group-panel-item-${groupId}`} id={groupId} />
+              <GroupListItem
+                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(' ')}
-            >
+            <Button to='/groups/browse/member' block text>
               {intl.formatMessage(messages.show_all)}
-            </NavLink>
+            </Button>
           }
         </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>
-            }
-            <span className={[styles.marginLeftAuto, styles.inherit].join(' ')}>→</span>
-          </span>
-        </div>
-      </NavLink>
-    )
-  }
 }

app/javascript/gabsocial/components/panel/hashtags_panel.js

@@ -0,0 +1,64 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { fetchHashtags } from '../../actions/hashtags'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import PanelLayout from './panel_layout'
+import HashtagItem from '../hashtag_item'
+import Button from '../button'
+
+const messages = defineMessages({
+  title: { id: 'hashtags.title', defaultMessage: 'Popular Hashtags' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
+})
+
+const mapStateToProps = state => ({
+  hashtags: state.getIn(['hashtags', 'items']),
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchHashtags: () => dispatch(fetchHashtags()),
+  }
+}
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class HashtagsPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    hashtags: ImmutablePropTypes.list.isRequired,
+    fetchHashtags: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.props.fetchHashtags()
+  }
+
+  render() {
+    const { intl, hashtags } = this.props
+
+    // !!! TESTING !!!
+    // if (hashtags.isEmpty()) {
+    //   return null
+    // }
+
+    return (
+      <PanelLayout title={intl.formatMessage(messages.title)} noPadding>
+        <div className={_s.default}>
+          { /* hashtags && hashtags.map(hashtag => (
+            <HashtagingItem key={hashtag.get('name')} hashtag={hashtag} />
+          )) */ }
+          <HashtagItem />
+          <HashtagItem />
+          <HashtagItem />
+          <HashtagItem />
+          <HashtagItem />
+        </div>
+        <Button to='/groups/browse/member' block text>
+          {intl.formatMessage(messages.show_all)}
+        </Button>
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/list_details_panel.js

@@ -0,0 +1,52 @@
+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 PanelLayout from './panel_layout';
+
+const messages = defineMessages({
+  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
+  title: { id: 'lists.panel_title', defaultMessage: 'On This List ({count})' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
+});
+
+const mapStateToProps = state => ({
+  // accountIds: state.getIn(['listEditor', 'accounts', 'items']),
+});
+
+const mapDispatchToProps = dispatch => {
+  return {
+
+  }
+};
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListDetailsPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleShowAllLists() {
+
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    const count = 10
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title, { count })}
+        buttonTitle={intl.formatMessage(messages.show_all)}
+        buttonAction={this.handleShowAllLists}
+      >
+        <div className={_s.default}>
+
+        </div>
+      </PanelLayout>
+    );
+  };
+};

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -1,37 +1,62 @@
-import classNames from 'classnames/bind'
+import Heading from '../heading'
+import Button from '../button'
 
 export default class PanelLayout extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     children: PropTypes.node,
-    hasBackground: PropTypes.boolean,
-    button: PropTypes.node,
+    buttonTitle: PropTypes.string,
+    buttonAction: PropTypes.func,
+    buttonTo: PropTypes.func,
+    noPadding: PropTypes.bool,
   }
 
   render() {
-    const { title, subtitle, button, hasBackground, children } = this.props
+    const { title, subtitle, buttonTitle, buttonAction, buttonTo, noPadding, children } = this.props
 
     return (
-      <aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
+      <aside className={[_s.default, _s.backgroundWhite, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.bordercolorSecondary, _s.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(' ')}>
-              <h1 className={[styles.default, styles.text, styles.fontWeightBold, styles.colorBlack, styles.fontSize16PX].join(' ')}>{title}</h1>
+          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderBottom1PX].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <Heading size='h3'>
+                {title}
+              </Heading>
               {
-                !!button &&
-                <div className={[styles.default, styles.marginLeftAuto].join(' ')}>
-                  {button}
+                (!!buttonTitle && (!!buttonAction || !!buttonTo)) &&
+                <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+                  <Button
+                    text
+                    to={buttonTo}
+                    onClick={buttonAction}
+                    className={[_s.default, _s.cursorPointer, _s.fontWeightBold, _s.text, _s.colorBrand, _s.fontSize13PX, _s.noUnderline].join(' ')}
+                  >
+                    {buttonTitle}
+                  </Button>
                 </div>
               }
             </div>
-            {subtitle && <h2 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightBold, styles.marginTop5PX].join(' ')}>{subtitle}</h2>}
+            {
+              subtitle &&
+              <Heading size='h4'>
+                {subtitle}
+              </Heading>
+            }
           </div>
         }
-        <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
-          {children}
-        </div>
+
+        {
+          !noPadding &&
+          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+            {children}
+          </div>
+        }
+
+        {
+          noPadding && children
+        }
       </aside>
     )
   }

app/javascript/gabsocial/components/panel/sign_up_panel.js

@@ -26,7 +26,9 @@ class SignUpPanel extends PureComponent {
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
       >
-        <Button href="/auth/sign_up">{intl.formatMessage(messages.register)}</Button>
+        <Button href="/auth/sign_up">
+          {intl.formatMessage(messages.register)}
+        </Button>
       </PanelLayout>
     )
   }

app/javascript/gabsocial/components/panel/trends_panel.js

@@ -1,49 +1,50 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import { fetchTrends } from '../../actions/trends';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import TrendingItem from '../../components/trending_item';
-import PanelLayout from './panel_layout';
+import { injectIntl, defineMessages } from 'react-intl'
+// import { fetchTrends } from '../../actions/trends'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import TrendingItem from '../../components/trending_item'
+import PanelLayout from './panel_layout'
 
 const messages = defineMessages({
-  title: { id:'trends.title', defaultMessage: 'Trends for you' },
-});
+  title: { id:'trends.title', defaultMessage: 'Trending right now' },
+})
 
-const mapStateToProps = state => ({
-  trends: state.getIn(['trends', 'items']),
-});
+// const mapStateToProps = state => ({
+//   trends: state.getIn(['trends', 'items']),
+// })
 
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchTrends: () => dispatch(fetchTrends()),
-  }
-};
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     fetchTrends: () => dispatch(fetchTrends()),
+//   }
+// }
 
-export default @connect(mapStateToProps, mapDispatchToProps)
+export default
+// @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class TrendsPanel extends ImmutablePureComponent {
 
   static propTypes = {
     trends: ImmutablePropTypes.list.isRequired,
-    fetchTrends: PropTypes.func.isRequired,
+    // fetchTrends: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
+  }
 
   componentDidMount () {
-    this.props.fetchTrends();
+    // this.props.fetchTrends()
   }
 
   render() {
-    const { intl, trends } = this.props;
+    const { intl, trends } = this.props
 
     // !!! TESTING !!!
     // if (trends.isEmpty()) {
-    //   return null;
+    //   return null
     // }
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-        <div className={styles.default}>
+        <div className={_s.default}>
           { /* trends && trends.map(hashtag => (
             <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
           )) */ }
@@ -54,6 +55,6 @@ class TrendsPanel extends ImmutablePureComponent {
           <TrendingItem />
         </div>
       </PanelLayout>
-    );
+    )
   }
-};
+}

app/javascript/gabsocial/components/panel/user_panel.js

@@ -0,0 +1,87 @@
+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 { makeGetAccount } from '../../selectors'
+import { shortNumberFormat } from '../../utils/numbers'
+import DisplayName from '../display_name'
+import Avatar from '../avatar'
+import Image from '../image'
+import UserStat from '../user_stat'
+import PanelLayout from './panel_layout'
+
+const messages = defineMessages({
+  gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' }
+})
+
+const mapStateToProps = state => {
+  const getAccount = makeGetAccount()
+
+  return {
+    account: getAccount(state, me),
+  }
+}
+
+export default @connect(mapStateToProps)
+@injectIntl
+class UserPanel extends ImmutablePureComponent {
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+  }
+
+  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>
+        <Image
+          className={_s.height122PX}
+          src={account.get('header_static')}
+        />
+
+        <NavLink
+          className={[_s.default, _s.flexRow, _s.paddingVertical10PX, _s.paddingHorizontal15PX, _s.noUnderline].join(' ')}
+          to={`/${account.get('acct')}`}
+        >
+          <div className={[_s.default, _s.marginTopNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
+            <Avatar account={account} size={62} />
+          </div>
+          <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+            <DisplayName account={account} multiline />
+          </div>
+        </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}`} />
+            ))
+          }
+        </div>
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -41,8 +41,6 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     // : testing!!! :
     const suggestions = [
       "1",
-      "1",
-      "1",
     ]
     // if (suggestions.isEmpty()) {
     //   return null;
@@ -50,7 +48,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-        <div className={styles.default}>
+        <div className={_s.default}>
           {suggestions && suggestions.map(accountId => (
             <AccountContainer
               key={accountId}