Develop

src/app/components/cards/SubscriptionsList.jsx

@@ -2,30 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
-import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
+import _ from 'lodash';
+import 'react-tabs/style/react-tabs.css';
+import tt from 'counterpart';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import LoadingIndicator from 'app/components/elements/LoadingIndicator';
 import { actions as fetchDataSagaActions } from 'app/redux/FetchDataSaga';
-import * as globalActions from 'app/redux/GlobalReducer';
-import ClaimBox from 'app/components/elements/ClaimBox';
 import Callout from 'app/components/elements/Callout';
-import tt from 'counterpart';
 
 class SubscriptionsList extends React.Component {
-    static propTypes = {
-        username: PropTypes.string.isRequired,
-        subscriptions: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-        loading: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        subscriptions: [],
-        loading: true,
-    };
-
-    constructor() {
-        super();
-    }
-
     componentWillMount() {
         const { username, getAccountSubscriptions } = this.props;
         if (username) {
@@ -41,7 +26,57 @@ class SubscriptionsList extends React.Component {
     }
 
     render() {
-        const { subscriptions, loading } = this.props;
+        const { subscriptions, loading, badges, username } = this.props;
+        const badgesTypes = {
+            activity: [],
+            perso: [],
+            meetup: [],
+            challenge: [],
+            badges: [],
+        };
+        const hivebuzzBadges = _.get(badges, 'hivebuzz', []);
+        const peakdBadges = _.get(badges, 'peakd', []);
+        if (hivebuzzBadges) {
+            hivebuzzBadges.forEach(badge => {
+                const type = badge.get('type');
+                badgesTypes[type].push(
+                    <a
+                        className="BadgesAchievements__badge_image"
+                        key={badge.get('id')}
+                        href={`https://hivebuzz.me/@${username}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            src={badge.get('url')}
+                            alt={badge.get('title')}
+                            title={badge.get('title')}
+                        />
+                    </a>
+                );
+            });
+        }
+        if (peakdBadges) {
+            peakdBadges.forEach(badge => {
+                const type = badge.get('type');
+                badgesTypes[type].push(
+                    <a
+                        className="BadgesAchievements__badge_image"
+                        key={badge.get('id')}
+                        href={`https://peakd.com/b/${badge.get('name')}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            src={badge.get('url')}
+                            alt={badge.get('title')}
+                            title={badge.get('title')}
+                            className="UserProfile__badge_image"
+                        />
+                    </a>
+                );
+            });
+        }
 
         const renderItem = tuple => {
             const [hive, name, role, title] = tuple;
@@ -55,41 +90,131 @@ class SubscriptionsList extends React.Component {
         };
 
         return (
-            <div className="">
-                <h4>{tt('g.subscriptions')}</h4>
-                {subscriptions &&
-                    subscriptions.length > 0 && (
+            <div>
+                <div className="article_section">
+                    <h4>{tt('g.community_subscriptions')}</h4>
+                    <p>{tt('g.community_subscriptions_description')}</p>
+                    {!_.isEmpty(subscriptions) && (
                         <ul>{subscriptions.map(item => renderItem(item))}</ul>
                     )}
-                {subscriptions.length === 0 &&
-                    !loading && (
-                        <Callout>
-                            Welcome! You don't have any subscriptions yet.
-                        </Callout>
+                    {_.isEmpty(subscriptions) &&
+                        !loading && (
+                            <Callout>
+                                {tt('g.community_no_subscriptions')}
+                            </Callout>
+                        )}
+                    {loading && (
+                        <center>
+                            <LoadingIndicator
+                                style={{ marginBottom: '2rem' }}
+                                type="circle"
+                            />
+                        </center>
                     )}
-
-                {loading && (
-                    <center>
-                        <LoadingIndicator
-                            style={{ marginBottom: '2rem' }}
-                            type="circle"
-                        />
-                    </center>
-                )}
+                </div>
+                <div className="article_section">
+                    <h4>{tt('g.badges_and_achievements')}</h4>
+                    {(!_.isEmpty(hivebuzzBadges) ||
+                        !_.isEmpty(peakdBadges.size)) && (
+                        <div>
+                            <p>
+                                {tt('g.badges_and_achievements_description')}{' '}
+                                <a
+                                    href="https://peakd.com/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    Peakd
+                                </a>{' '}
+                                &{' '}
+                                <a
+                                    href="https://hivebuzz.me"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    Hivebuzz
+                                </a>
+                                .
+                            </p>
+                            <div className="BadgesAchievements row">
+                                <div className="BadgesAchievements_tabs_container">
+                                    <Tabs>
+                                        <TabList>
+                                            {!_.isEmpty(badgesTypes.badges) && (
+                                                <Tab>Badges</Tab>
+                                            )}
+                                            {!_.isEmpty(
+                                                badgesTypes.activity
+                                            ) && <Tab>Activity</Tab>}
+                                            {!_.isEmpty(badgesTypes.perso) && (
+                                                <Tab>Personal</Tab>
+                                            )}
+                                            {!_.isEmpty(badgesTypes.meetup) && (
+                                                <Tab>Meetups</Tab>
+                                            )}
+                                            {!_.isEmpty(
+                                                badgesTypes.challenge
+                                            ) && <Tab>Challenges</Tab>}
+                                        </TabList>
+                                        {!_.isEmpty(badgesTypes.badges) && (
+                                            <TabPanel>
+                                                {badgesTypes.badges}
+                                            </TabPanel>
+                                        )}
+                                        {!_.isEmpty(badgesTypes.activity) && (
+                                            <TabPanel>
+                                                {badgesTypes.activity}
+                                            </TabPanel>
+                                        )}
+                                        {!_.isEmpty(badgesTypes.perso) && (
+                                            <TabPanel>
+                                                {badgesTypes.perso}
+                                            </TabPanel>
+                                        )}
+                                        {!_.isEmpty(badgesTypes.meetup) && (
+                                            <TabPanel>
+                                                {badgesTypes.meetup}
+                                            </TabPanel>
+                                        )}
+                                        {!_.isEmpty(badgesTypes.challenge) && (
+                                            <TabPanel>
+                                                {badgesTypes.challenge}
+                                            </TabPanel>
+                                        )}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    {_.isEmpty(hivebuzzBadges) &&
+                        !_.isEmpty(peakdBadges.size) && (
+                            <p>{tt('g.badges_and_achievements_none')}</p>
+                        )}
+                </div>
             </div>
         );
     }
 }
 
+SubscriptionsList.defaultProps = {
+    subscriptions: [],
+    loading: true,
+};
+
+SubscriptionsList.propTypes = {
+    username: PropTypes.string.isRequired,
+    subscriptions: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    loading: PropTypes.bool,
+};
+
 export default connect(
     (state, props) => {
+        const { username } = props;
+        const { user, global } = state;
         const isOwnAccount =
-            state.user.getIn(['current', 'username'], '') === props.username;
-        const loading = state.global.getIn(['subscriptions', 'loading']);
-        const subscriptions = state.global.getIn([
-            'subscriptions',
-            props.username,
-        ]);
+            user.getIn(['current', 'username'], '') === username;
+        const loading = global.getIn(['subscriptions', 'loading']);
+        const subscriptions = global.getIn(['subscriptions', username]);
         return {
             ...props,
             subscriptions: subscriptions ? subscriptions.toJS() : [],