Commit e28e13a6 authored by Dan Notestein's avatar Dan Notestein
Browse files

Merge branch '97-social-tab' into 'develop'

Resolve "Move badges into Social tab"

Closes #97

See merge request !148
parents fea34ff5 5f91a8e4
......@@ -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() : [],
......
......@@ -2,9 +2,6 @@
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import _ from 'lodash';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import Icon from 'app/components/elements/Icon';
import Follow from 'app/components/elements/Follow';
import Tooltip from 'app/components/elements/Tooltip';
......@@ -20,59 +17,7 @@ import DropdownMenu from 'app/components/elements/DropdownMenu';
class UserProfileHeader extends React.Component {
render() {
const { current_user, accountname, profile, badges } = 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="UserProfile__badge_image"
key={badge.get('id')}
href={`https://hivebuzz.me/@${accountname}`}
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="UserProfile__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 isMyAccount = current_user === accountname;
const { current_user, accountname, profile } = this.props;
const { name, location, about, website, cover_image } = profile
? profile.getIn(['metadata', 'profile']).toJS()
: {};
......@@ -134,7 +79,7 @@ class UserProfileHeader extends React.Component {
})}
>
<a
href={`http://hivebuzz.me/@${accountname}`}
href={`https://hivebuzz.me/@${accountname}`}
target="_blank"
rel="noopener noreferrer"
>
......@@ -223,54 +168,6 @@ class UserProfileHeader extends React.Component {
<Icon name="calendar" /> Active{' '}
<TimeAgoWrapper date={profile.get('active')} />
</p>
{(hivebuzzBadges.size > 0 || peakdBadges.size > 0) && (
<div className="UserProfile__badges row">
<div className="UserProfile__badges_tabs_container">
<Tabs>
<TabList>
{badgesTypes.badges.length > 0 && (
<Tab>Badges</Tab>
)}
{badgesTypes.activity.length >
0 && <Tab>Activity</Tab>}
{badgesTypes.perso.length > 0 && (
<Tab>Personal</Tab>
)}
{badgesTypes.meetup.length > 0 && (
<Tab>Meetups</Tab>
)}
{badgesTypes.challenge.length >
0 && <Tab>Challenges</Tab>}
</TabList>
{badgesTypes.badges.length > 0 && (
<TabPanel>
{badgesTypes.badges}
</TabPanel>
)}
{badgesTypes.activity.length > 0 && (
<TabPanel>
{badgesTypes.activity}
</TabPanel>
)}
{badgesTypes.perso.length > 0 && (
<TabPanel>
{badgesTypes.perso}
</TabPanel>
)}
{badgesTypes.meetup.length > 0 && (
<TabPanel>
{badgesTypes.meetup}
</TabPanel>
)}
{badgesTypes.challenge.length > 0 && (
<TabPanel>
{badgesTypes.challenge}
</TabPanel>
)}
</Tabs>
</div>
</div>
)}
</div>
<div className="UserProfile__buttons_mobile show-for-small-only">
<Follow
......
......@@ -28,3 +28,52 @@
width: 40px;
}
}
.BadgesAchievements {
.BadgesAchievements_tabs_container {
padding: 5px 15px;
}
@media screen and (max-width: 39.9375em) {
margin: 0;
}
a {
display: inline-block;
}
.BadgesAchievements__badge_image {
margin: 5px;
img {
vertical-align: top;
width: 64px;
@media screen and (max-width: 39.9375em) {
width: 48px;
}
}
}
.react-tabs__tab-list {
background-color: $color-background-off-white;
}
.react-tabs__tab {
color: $color-text-dark;
font-weight: bold;
}
.react-tabs__tab--selected {
background-color: $color-blue-dark;
border-color: transparent;
border-radius: 0;
color: white;
}
.react-tabs__tab-panel {
min-height: 58px;
}
}
.article_section {
margin-bottom: 40px;
}
......@@ -217,6 +217,10 @@ export default class UserProfile extends React.Component {
<SubscriptionsList
username={accountname}
subscriptions={subscriptions}
badges={{
hivebuzz: hivebuzzBadges,
peakd: peakdBadges,
}}
/>
);
} else if (section === 'settings') {
......@@ -285,7 +289,7 @@ export default class UserProfile extends React.Component {
<li>{_tablink('blog', tt('g.blog'))}</li>
<li>{_tablink('posts', tt('g.posts'))}</li>
<li>{_tablink('replies', tt('g.replies'))}</li>
<li>{_tablink('communities', tt('g.communities'))}</li>
<li>{_tablink('communities', tt('g.social'))}</li>
<li>
{_tablink('notifications', tt('g.notifications'))}
</li>
......@@ -320,10 +324,6 @@ export default class UserProfile extends React.Component {
current_user={username}
accountname={accountname}
profile={profile}
badges={{
hivebuzz: hivebuzzBadges,
peakd: peakdBadges,
}}
/>
<div className="UserProfile__top-nav row expanded">
{top_menu}
......@@ -367,6 +367,8 @@ module.exports = {
? section
: null;
const profile = state.userProfiles.getIn(['profiles', accountname]);
return {
posts: state.global.getIn([
'discussion_idx',
......
......@@ -245,43 +245,3 @@
left: 26px;
}
}
.UserProfile__badges {
.UserProfile__badges_tabs_container {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
padding: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
@media screen and (max-width: 39.9375em) {
margin: 0;
}
a {
display: inline-block;
}
.UserProfile__badge_image {
margin: 3px 2px;
img {
vertical-align: top;
width: 28px;
transition: width 0.25s;
&:hover {
width: 35px;
}
}
}
.react-tabs {
min-height: 85px;
}
.react-tabs__tab {
font-size: 12px;
padding: 3px 8px;
}
}
......@@ -7,6 +7,10 @@
"and": "and",
"are_you_sure": "Are you sure?",
"ask": "Ask",
"badges_and_achievements": "Badges and achievements",
"badges_and_achievements_description":
"These are badges received by the author via the third-party apps",
"badges_and_achievements_none": "You haven't received any badges yet.",
"balance": "Balance: %(balanceValue)s",
"balances": "Balances",
"beneficiaries": "Beneficiaries",
......@@ -25,6 +29,9 @@
"close": "Close",
"collapse_or_expand": "Collapse/Expand",
"communities": "Communities",
"community_subscriptions": "Community Subscriptions",
"community_subscriptions_description":
"The author has subscribed to the following Hive Communities",
"community_settings_header": "Community Settings",
"community_settings_description": "What does your community stand for?",
"community_list_header": "Communities",
......@@ -36,6 +43,8 @@
"community_user_role_edit_header": "Change User Role",
"community_user_title_edit_header": "Change User Title",
"community_user_title_edit_description": "Set Title for @%(username)s",
"community_no_subscriptions":
"Welcome! You don't have any subscriptions yet.",
"comments": "Comments",
"confirm": "Confirm",
"convert": "Convert",
......@@ -124,6 +133,7 @@
"sell": "Sell",
"settings": "Settings",
"share_this_post": "Share this post",
"social": "Social",
"mute_this_post": "Mute post/comment",
"mute_this_post_description":
"Please provide a note regarding your decision to mute this content.",
......@@ -135,7 +145,6 @@
"sign_up": "Sign up",
"since": "since %(date)s",
"submit": "Submit",
"subscriptions": "Subscriptions",
"power_up": "Power Up",
"submit_a_story": "Post",
"tag": "Tag",
......
......@@ -18,7 +18,6 @@ export function* fetchUserProfile(action) {
const { account, observer } = action.payload;
const ret = yield call(callBridge, 'get_profile', { account, observer });
const hive_power = yield getHivePowerForUser(account);
if (!ret) throw new Error('Account not found');
yield put(
userProfileActions.addProfile({
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment