refactor: sidebar widgets (#2157)

src/client/app/Sidebar/RightSidebar.js

@@ -2,114 +2,52 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Route, Switch, withRouter } from 'react-router-dom';
-import {
-  getIsAuthenticated,
-  getAuthenticatedUser,
-  getIsAuthFetching,
-  getRecommendations,
-  getFollowingList,
-  getIsFetchingFollowingList,
-} from '../../reducers';
-import { updateRecommendations } from '../../user/userActions';
-import InterestingPeople from '../../components/Sidebar/InterestingPeople';
-import InterestingPeopleWithAPI from '../../components/Sidebar/InterestingPeopleWithAPI';
+import { getIsAuthenticated, getIsAuthFetching } from '../../reducers';
+import InterestingPeopleContainer from '../../containers/InterestingPeopleContainer';
+import PostRecommendationContainer from '../../containers/PostRecommendationContainer';
 import SignUp from '../../components/Sidebar/SignUp';
-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(
-  state => ({
-    authenticated: getIsAuthenticated(state),
-    authenticatedUser: getAuthenticatedUser(state),
-    isAuthFetching: getIsAuthFetching(state),
-    recommendations: getRecommendations(state),
-    followingList: getFollowingList(state),
-    isFetchingFollowingList: getIsFetchingFollowingList(state),
-  }),
-  {
-    updateRecommendations,
-  },
-)
-export default class RightSidebar extends React.Component {
-  static propTypes = {
-    authenticated: PropTypes.bool.isRequired,
-    authenticatedUser: PropTypes.shape().isRequired,
-    isAuthFetching: PropTypes.bool.isRequired,
-    showPostRecommendation: PropTypes.bool,
-    recommendations: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })).isRequired,
-    updateRecommendations: PropTypes.func,
-    followingList: PropTypes.arrayOf(PropTypes.string).isRequired,
-    isFetchingFollowingList: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    showPostRecommendation: false,
-    updateRecommendations: () => {},
-  };
+const RightSidebar = ({ authenticated, isAuthFetching }) => {
+  if (isAuthFetching) {
+    return <Loading />;
+  }
 
-  handleInterestingPeopleRefresh = () => this.props.updateRecommendations();
+  return (
+    <div>
+      {!authenticated && <SignUp />}
+      <Switch>
+        <Route exact path="/activity" component={UserActivitySearch} />
+        <Route exact path="/@:name/activity" component={UserActivitySearch} />
+        <Route exact path="/@:name/transfers" render={WalletSidebar} />
+        <Route exact path="/(trending|created|hot|promoted)/:tag?" component={FeedSidebar} />
+        <Route exact path="/(replies|bookmarks)?" component={InterestingPeopleContainer} />
+        <Route
+          exact
+          path="/@:user/(comments|followed|followers)?"
+          component={InterestingPeopleContainer}
+        />
+        <Route
+          exact
+          path="/:category?/@:author/:permlink"
+          component={PostRecommendationContainer}
+        />
+      </Switch>
+    </div>
+  );
+};
 
-  render() {
-    const {
-      authenticated,
-      authenticatedUser,
-      showPostRecommendation,
-      isAuthFetching,
-      followingList,
-      isFetchingFollowingList,
-    } = this.props;
+RightSidebar.propTypes = {
+  authenticated: PropTypes.bool.isRequired,
+  isAuthFetching: PropTypes.bool.isRequired,
+};
 
-    if (isAuthFetching) {
-      return <Loading />;
-    }
+const mapStateToProps = state => ({
+  authenticated: getIsAuthenticated(state),
+  isAuthFetching: getIsAuthFetching(state),
+});
 
-    return (
-      <div>
-        {!authenticated && <SignUp />}
-        <Switch>
-          <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="/hot/:tag" component={FeedSidebar} />
-          <Route path="/promoted/:tag" component={FeedSidebar} />
-          <Route
-            path="/@:name"
-            render={() =>
-              authenticated && (
-                <InterestingPeopleWithAPI
-                  authenticatedUser={authenticatedUser}
-                  followingList={followingList}
-                  isFetchingFollowingList={isFetchingFollowingList}
-                />
-              )
-            }
-          />
-          <Route
-            path="/"
-            render={() => (
-              <div>
-                {authenticated &&
-                this.props.recommendations.length > 0 &&
-                !showPostRecommendation ? (
-                  <InterestingPeople
-                    users={this.props.recommendations}
-                    onRefresh={this.handleInterestingPeopleRefresh}
-                  />
-                ) : (
-                  <div />
-                )}
-              </div>
-            )}
-          />
-        </Switch>
-        {showPostRecommendation && <PostRecommendation isAuthFetching={isAuthFetching} />}
-      </div>
-    );
-  }
-}
+export default withRouter(connect(mapStateToProps)(RightSidebar));

src/client/components/Sidebar/FeedSidebar.js

@@ -1,54 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { connect } from 'react-redux';
-import { getIsAuthenticated, getRecommendations } from '../../reducers';
 import { getCryptoDetails } from '../../helpers/cryptosHelper';
-import { updateRecommendations } from '../../user/userActions';
-import InterestingPeople from './InterestingPeople';
+import InterestingPeopleContainer from '../../containers/InterestingPeopleContainer';
 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,
-  };
+const FeedSidebar = ({ match }) => {
+  const currentTag = _.get(match, 'params.tag', '');
+  const currentCrypto = getCryptoDetails(currentTag);
 
-  constructor(props) {
-    super(props);
-    this.handleInterestingPeopleRefresh = this.handleInterestingPeopleRefresh.bind(this);
-  }
+  return (
+    <div>
+      {!_.isEmpty(currentCrypto) && <CryptoTrendingCharts cryptos={[currentTag]} />}
+      <InterestingPeopleContainer />
+    </div>
+  );
+};
 
-  handleInterestingPeopleRefresh() {
-    this.props.updateRecommendations();
-  }
-
-  render() {
-    const { authenticated, recommendations } = this.props;
-    const isAuthenticated = authenticated && recommendations.length > 0;
-    const currentTag = _.get(this.props, 'match.params.tag', '');
-    const currentCrypto = getCryptoDetails(currentTag);
-
-    return (
-      <div>
-        {!_.isEmpty(currentCrypto) && <CryptoTrendingCharts cryptos={[currentTag]} />}
-        {isAuthenticated && (
-          <InterestingPeople
-            users={recommendations}
-            onRefresh={this.handleInterestingPeopleRefresh}
-          />
-        )}
-      </div>
-    );
-  }
-}
+FeedSidebar.propTypes = {
+  match: PropTypes.shape().isRequired,
+};
 
 export default FeedSidebar;

src/client/containers/InterestingPeopleContainer.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { getRecommendations } from '../reducers';
+import { updateRecommendations } from '../user/userActions';
+import InterestingPeople from '../components/Sidebar/InterestingPeople';
+
+const mapStateToProps = state => ({
+  users: getRecommendations(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onRefresh: () => dispatch(updateRecommendations()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(InterestingPeople);

src/client/containers/PostRecommendationContainer.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { getIsAuthFetching } from '../reducers';
+import PostRecommendation from '../components/Sidebar/PostRecommendation';
+
+const mapStateToProps = state => ({
+  isAuthFetching: getIsAuthFetching(state),
+});
+
+export default connect(mapStateToProps)(PostRecommendation);