Add market price on feed for every crypto

src/client/app/Sidebar/RightSidebar.js

@@ -19,6 +19,7 @@ import PostRecommendation from '../../components/Sidebar/PostRecommendation';
 import Loading from '../../components/Icon/Loading';
 import UserActivitySearch from '../../activity/UserActivitySearch';
 import WalletSidebar from '../../components/Sidebar/WalletSidebar';
+import FeedSidebar from '../../components/Sidebar/FeedSidebar';
 
 @withRouter
 @connect(
@@ -74,6 +75,11 @@ export default class RightSidebar extends React.Component {
           <Route path="/activity" component={UserActivitySearch} />
           <Route path="/@:name/activity" component={UserActivitySearch} />
           <Route path="/@:name/transfers" render={() => <WalletSidebar />} />
+          <Route path="/trending/:tag" component={FeedSidebar} />
+          <Route path="/created/:tag" component={FeedSidebar} />
+          <Route path="/active/:tag" component={FeedSidebar} />
+          <Route path="/hot/:tag" component={FeedSidebar} />
+          <Route path="/promoted/:tag" component={FeedSidebar} />
           <Route
             path="/@:name"
             render={() =>

src/client/components/Sidebar/CryptoChart.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import fetch from 'isomorphic-fetch';
+import Trend from 'react-trend';
+import { getCryptoDetails } from '../../helpers/cryptosHelper';
+import USDDisplay from '../../components/Utils/USDDisplay';
+import Loading from '../Icon/Loading';
+
+const fetchCryptoPriceHistory = symbol =>
+  fetch(
+    `https://min-api.cryptocompare.com/data/histoday?fsym=${symbol}&tsym=USD&limit=7`,
+  ).then(res => res.json());
+
+class CryptoChart extends React.Component {
+  static propTypes = {
+    crypto: PropTypes.string,
+  };
+
+  static defaultProps = {
+    crypto: '',
+  };
+
+  constructor(props) {
+    super(props);
+    const currentCrypto = getCryptoDetails(props.crypto);
+    this.state = {
+      currentCrypto,
+      currentCryptoPriceHistory: [],
+      loading: false,
+    };
+
+    this.getCryptoPriceHistory = this.getCryptoPriceHistory.bind(this);
+  }
+
+  componentDidMount() {
+    const { currentCrypto } = this.state;
+    if (!_.isEmpty(currentCrypto)) {
+      this.getCryptoPriceHistory(currentCrypto.symbol);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const currentCrypto = getCryptoDetails(nextProps.crypto);
+    if (!_.isEmpty(currentCrypto)) {
+      this.setState(
+        {
+          currentCrypto,
+        },
+        () => this.getCryptoPriceHistory(currentCrypto.symbol),
+      );
+    } else {
+      this.setState({
+        currentCrypto,
+      });
+    }
+  }
+
+  getCryptoPriceHistory(symbol) {
+    this.setState({
+      loading: true,
+    });
+    fetchCryptoPriceHistory(symbol).then((response) => {
+      const currentCryptoPriceHistory = _.map(response.Data, data => data.close);
+      this.setState({
+        currentCryptoPriceHistory,
+        loading: false,
+      });
+    });
+  }
+
+  render() {
+    const { currentCryptoPriceHistory, loading, currentCrypto } = this.state;
+
+    if (_.isEmpty(currentCrypto)) return null;
+
+    const currentCryptoPrice = _.last(currentCryptoPriceHistory);
+    const previousCryptoPrice = _.nth(currentCryptoPriceHistory, -2);
+    const cryptoPriceIncrease = currentCryptoPrice > previousCryptoPrice;
+
+    return (
+      <div>
+        <div className="CryptoTrendingCharts__chart-header">
+          <span>
+            {currentCrypto.name}
+          </span>
+          {!loading &&
+            <span className="CryptoTrendingCharts__chart-value">
+              <USDDisplay value={currentCryptoPrice} />
+              {cryptoPriceIncrease
+                ? <i className="iconfont icon-caret-up CryptoTrendingCharts__chart-caret-up" />
+                : <i className="iconfont icon-caretbottom CryptoTrendingCharts__chart-caret-down" />}
+            </span>}
+        </div>
+        {loading
+          ? <Loading />
+          : <Trend data={currentCryptoPriceHistory} stroke={'#4757b2'} strokeWidth={5} />}
+      </div>
+    );
+  }
+}
+
+export default CryptoChart;

src/client/components/Sidebar/CryptoTrendingCharts.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { getCryptoDetails } from '../../helpers/cryptosHelper';
+import CryptoChart from './CryptoChart';
+import './CryptoTrendingCharts.less';
+
+class CryptoTrendingCharts extends React.Component {
+  static propTypes = {
+    crypto: PropTypes.string,
+  };
+
+  static defaultProps = {
+    crypto: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.handleOnClickRefresh = this.handleOnClickRefresh.bind(this);
+  }
+
+  handleOnClickRefresh() {
+    this.forceUpdate();
+  }
+
+  render() {
+    const { crypto } = this.props;
+    const currentCrypto = getCryptoDetails(crypto);
+
+    if (_.isEmpty(currentCrypto)) return null;
+
+    return (
+      <div className="CryptoTrendingCharts">
+        <h4 className="CryptoTrendingCharts__title">
+          <i className="iconfont icon-chart CryptoTrendingCharts__icon" />
+          <FormattedMessage id="market" defaultMessage="Market" />
+          <i
+            role="presentation"
+            onClick={this.handleOnClickRefresh}
+            className="iconfont icon-refresh CryptoTrendingCharts__icon-refresh"
+          />
+        </h4>
+        <div className="CryptoTrendingCharts__divider" />
+        <CryptoChart crypto={crypto} />
+      </div>
+    );
+  }
+}
+
+export default CryptoTrendingCharts;

src/client/components/Sidebar/SteemTrendingCharts.less → src/client/components/Sidebar/CryptoTrendingCharts.less

@@ -1,10 +1,11 @@
 @import (reference) "../../styles/custom.less";
 
-.SteemTrendingCharts {
+.CryptoTrendingCharts {
   background: @white;
   border-radius: 4px;
   border: 1px solid @white-gainsboro;
   padding: 8px 16px 16px 16px;
+  margin-bottom: 10px;
 
   &__title {
     color: @blue-botticelli;

src/client/components/Sidebar/FeedSidebar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { getIsAuthenticated, getRecommendations } from '../../reducers';
+import { updateRecommendations } from '../../user/userActions';
+import InterestingPeople from './InterestingPeople';
+import CryptoTrendingCharts from './CryptoTrendingCharts';
+
+@connect(
+  state => ({
+    authenticated: getIsAuthenticated(state),
+    recommendations: getRecommendations(state),
+  }),
+  { updateRecommendations },
+)
+class FeedSidebar extends React.Component {
+  static propTypes = {
+    authenticated: PropTypes.bool.isRequired,
+    recommendations: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })).isRequired,
+    updateRecommendations: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.handleInterestingPeopleRefresh = this.handleInterestingPeopleRefresh.bind(this);
+  }
+
+  handleInterestingPeopleRefresh() {
+    this.props.updateRecommendations();
+  }
+
+  render() {
+    const { authenticated, recommendations } = this.props;
+    const isAuthenticated = authenticated && recommendations.length > 0;
+    const currentTag = _.get(this.props, 'match.params.tag', '');
+
+    return (
+      <div>
+        <CryptoTrendingCharts crypto={currentTag} />
+        {isAuthenticated &&
+          <InterestingPeople
+            users={recommendations}
+            onRefresh={this.handleInterestingPeopleRefresh}
+          />}
+      </div>
+    );
+  }
+}
+
+export default FeedSidebar;

src/client/components/Sidebar/SteemTrendingCharts.js

@@ -1,96 +1,34 @@
-import React, { Component } from 'react';
-import Trend from 'react-trend';
-import fetch from 'isomorphic-fetch';
-import _ from 'lodash';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Loading from '../Icon/Loading';
-import './SteemTrendingCharts.less';
-import USDDisplay from '../../components/Utils/USDDisplay';
-
-const getSteemPriceHistory = () =>
-  fetch('https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=USD&limit=7').then(res =>
-    res.json(),
-  );
-
-const getSteemDollarPriceHistory = () =>
-  fetch('https://min-api.cryptocompare.com/data/histoday?fsym=SBD&tsym=USD&limit=7').then(res =>
-    res.json(),
-  );
-
-class SteemTrendingCharts extends Component {
-  state = {
-    steemPriceHistory: [],
-    steemDollarPriceHistory: [],
-    loading: false,
-  };
-
-  componentDidMount() {
-    this.getSteemPriceHistories();
+import { STEEM, SBD } from '../../../common/constants/cryptos';
+import CryptoCharts from './CryptoChart';
+import './CryptoTrendingCharts.less';
+
+class SteemTrendingCharts extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleOnClickRefresh = this.handleOnClickRefresh.bind(this);
   }
 
-  getSteemPriceHistories = () => {
-    this.setState({
-      loading: true,
-    });
-    Promise.all([getSteemPriceHistory(), getSteemDollarPriceHistory()]).then((response) => {
-      const steemPriceHistory = _.map(response[0].Data, data => data.close);
-      const steemDollarPriceHistory = _.map(response[1].Data, data => data.close);
-      this.setState({
-        steemPriceHistory,
-        steemDollarPriceHistory,
-        loading: false,
-      });
-    });
-  };
+  handleOnClickRefresh() {
+    this.forceUpdate();
+  }
 
   render() {
-    const { steemPriceHistory, steemDollarPriceHistory, loading } = this.state;
-    const currentSteemPrice = _.last(steemPriceHistory);
-    const currentSteemDollarPrice = _.last(steemDollarPriceHistory);
-    const previousSteemPrice = _.nth(steemPriceHistory, -2);
-    const previousSteemDollarPrice = _.nth(steemDollarPriceHistory, -2);
-    const steemPriceIncrease = currentSteemPrice > previousSteemPrice;
-    const steemDollarPriceIncrease = currentSteemDollarPrice > previousSteemDollarPrice;
-
     return (
-      <div className="SteemTrendingCharts">
-        <h4 className="SteemTrendingCharts__title">
-          <i className="iconfont icon-chart SteemTrendingCharts__icon" />
+      <div className="CryptoTrendingCharts">
+        <h4 className="CryptoTrendingCharts__title">
+          <i className="iconfont icon-chart CryptoTrendingCharts__icon" />
           <FormattedMessage id="market" defaultMessage="Market" />
           <i
             role="presentation"
-            onClick={this.getSteemPriceHistories}
-            className="iconfont icon-refresh SteemTrendingCharts__icon-refresh"
+            onClick={this.handleOnClickRefresh}
+            className="iconfont icon-refresh CryptoTrendingCharts__icon-refresh"
           />
         </h4>
-        <div className="SteemTrendingCharts__divider" />
-        <div className="SteemTrendingCharts__chart-header">
-          <FormattedMessage id="steem" defaultMessage="Steem" />
-          {!loading &&
-            <span className="SteemTrendingCharts__chart-value">
-              <USDDisplay value={currentSteemPrice} />
-              {steemPriceIncrease
-                ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
-                : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
-            </span>}
-        </div>
-        {loading
-          ? <Loading />
-          : <Trend data={steemPriceHistory} stroke={'#4757b2'} strokeWidth={5} />}
-        <div className="SteemTrendingCharts__divider" />
-        <div className="SteemTrendingCharts__chart-header">
-          <FormattedMessage id="steem_dollar" defaultMessage="Steem Dollar" />
-          {!loading &&
-            <span className="SteemTrendingCharts__chart-value">
-              <USDDisplay value={currentSteemDollarPrice} />
-              {steemDollarPriceIncrease
-                ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
-                : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
-            </span>}
-        </div>
-        {loading
-          ? <Loading />
-          : <Trend data={steemDollarPriceHistory} stroke={'#4757b2'} strokeWidth={5} />}
+        <CryptoCharts crypto={STEEM.symbol} />
+        <div className="CryptoTrendingCharts__divider" />
+        <CryptoCharts crypto={SBD.symbol} />
       </div>
     );
   }

src/client/helpers/cryptosHelper.js

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { CRYPTO_MAP } from '../../common/constants/cryptos';
+
+export function getCryptoDetails(cryptoQuery) {
+  const getCryptoBySymbol = _.get(CRYPTO_MAP, _.toUpper(cryptoQuery), {});
+
+  if (!_.isEmpty(getCryptoBySymbol)) {
+    return getCryptoBySymbol;
+  }
+
+  const cryptoDetails = _.find(CRYPTO_MAP, (crypto) => {
+    const formattedCryptoName = _.toLower(crypto.name).replace(/\s/g, ''); // lowercase & remove spaces
+    return _.includes(formattedCryptoName, cryptoQuery);
+  });
+
+  return cryptoDetails || {};
+}
+
+export default null;

src/client/wallet/UserWalletTransactions.less

@@ -3,7 +3,6 @@
 
 .UserWalletTransactions {
   background-color: @white;
-  border: 1px solid @white-gainsboro;
   border-right: 0;
   border-left: 0;
   border-radius: 0;
@@ -105,7 +104,6 @@
   }
 
   @media @small {
-    border: 1px solid @white-gainsboro;
     border-radius: @border-radius-base;
   }