feat(issue-3133): hide player matches if player profile is private

src/components/Player/Header/PlayerHeader.jsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Avatar from 'material-ui/Avatar';
 import Badge from 'material-ui/Badge';
+import LockIcon from '@material-ui/icons/Lock';
 import styled from 'styled-components';
 import { Facebook } from 'react-content-loader';
 import { rankTierToString } from '../../../utility';
 import Error from '../../Error';
 import PlayerStats from './PlayerStats';
 import PlayerBadges from './PlayerBadges';
-import PlayerButtons from './PlayerButtons';
+import PlayerButtons from './PlayerButtons'
 import constants from '../../constants';
 
 const Styled = styled.div`
@@ -42,6 +43,7 @@ grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
+  margin-bottom: 2%;
 
   @media only screen and (max-width: 768px) {
     flex-direction: column;
@@ -188,6 +190,11 @@ grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr;
   }
 }
 
+.lockIcon {
+  @media only screen and (max-width: 768px) {
+    text-align: center;
+  }
+}
 `;
 
 const LARGE_IMAGE_SIZE = 124;
@@ -285,6 +292,7 @@ const PlayerHeader = ({
   rankTier,
   leaderboardRank,
   strings,
+  isPlayerProfilePrivate,
 }) => {
   if (error) {
     return <Error />;
@@ -340,8 +348,16 @@ const PlayerHeader = ({
               <span className="playerName">{officialPlayerName || playerName}</span>
               <PlayerBadges playerId={playerId} />
             </div>
-            <PlayerStats playerId={playerId} loggedInId={loggedInUser && String(loggedInUser.account_id)} compact={!small} />
-            <PlayerButtons playerId={playerId} playerSoloCompetitiveRank={playerSoloCompetitiveRank} compact={!small} />
+            {isPlayerProfilePrivate ? (
+              <div className="lockIcon">
+                <LockIcon />   
+              </div>
+            ) : (
+              <>
+                <PlayerStats playerId={playerId} loggedInId={loggedInUser && String(loggedInUser.account_id)} compact={!small} />
+                <PlayerButtons playerId={playerId} playerSoloCompetitiveRank={playerSoloCompetitiveRank} compact={!small} />
+              </>
+            )}
           </div>
           <div style={{ display: 'flex' }}>
             {getDotaPlusBadge(plus, strings)}
@@ -368,6 +384,7 @@ PlayerHeader.propTypes = {
   rankTier: PropTypes.number,
   leaderboardRank: PropTypes.number,
   strings: PropTypes.shape({}),
+  isPlayerProfilePrivate: PropTypes.bool,
 };
 
 const mapStateToProps = state => ({

src/components/Player/Player.jsx

@@ -7,11 +7,13 @@ import Long from 'long';
 import {
   getPlayer,
   getPlayerWinLoss,
+  getProPlayers,
 } from '../../actions';
 import TabBar from '../TabBar';
 import Spinner from '../Spinner';
 import TableFilterForm from './TableFilterForm';
 import PlayerHeader from './Header/PlayerHeader';
+import PlayerProfilePrivate from './PlayerProfilePrivate';
 // import Error from '../Error';
 import playerPages from './playerPages';
 
@@ -32,13 +34,16 @@ class RequestLayer extends React.Component {
     playerName: PropTypes.string,
     playerLoading: PropTypes.bool,
     strings: PropTypes.shape({}),
+    proPlayerIds: PropTypes.arrayOf(PropTypes.number),
+    isPlayerMatchHistoryDisabled: PropTypes.bool,
   }
 
   componentDidMount() {
     const { props } = this;
     const { playerId } = props.match.params;
     props.getPlayer(playerId);
     props.getPlayerWinLoss(playerId, props.location.search);
+    props.getProPlayers();
   }
 
   componentDidUpdate(prevProps) {
@@ -53,8 +58,11 @@ class RequestLayer extends React.Component {
   }
 
   render() {
-    const { location, match, strings } = this.props;
+    const { location, match, strings, proPlayerIds, isPlayerMatchHistoryDisabled } = this.props;
     const { playerId } = this.props.match.params;
+    const isProPlayer = proPlayerIds.filter((id) => playerId === id).length > 0;
+    const isPlayerProfilePrivate = isPlayerMatchHistoryDisabled && !isProPlayer;
+
     if (Long.fromString(playerId).greaterThan('76561197960265728')) {
       this.props.history.push(`/players/${Long.fromString(playerId).subtract('76561197960265728')}`);
     }
@@ -66,13 +74,17 @@ class RequestLayer extends React.Component {
       <div>
         {!this.props.playerLoading && <Helmet title={title} />}
         <div>
-          <PlayerHeader playerId={playerId} location={location} />
-          <TabBar info={info} tabs={playerPages(playerId, strings)} />
-        </div>
-        <div>
-          <TableFilterForm playerId={playerId} />
-          {page ? page.content(playerId, match.params, location) : <Spinner />}
+          <PlayerHeader playerId={playerId} location={location} isPlayerProfilePrivate={isPlayerProfilePrivate} />
+          <TabBar info={info} tabs={playerPages(playerId, strings, isPlayerProfilePrivate)} />
         </div>
+        {isPlayerProfilePrivate ? (
+          <PlayerProfilePrivate />
+        ) : (
+          <div>
+            <TableFilterForm playerId={playerId} />
+            {page ? page.content(playerId, match.params, location) : <Spinner />}
+          </div>
+        )}
       </div>
     );
   }
@@ -83,11 +95,14 @@ const mapStateToProps = state => ({
   playerLoading: (state.app.player.loading),
   officialPlayerName: (state.app.player.data.profile || {}).name,
   strings: state.app.strings,
-});
+  proPlayerIds: state.app.proPlayers.data.map((p) => p.account_id),
+  isPlayerMatchHistoryDisabled: (state.app.player.data.profile || {}).fh_unavailable,
+})
 
 const mapDispatchToProps = dispatch => ({
   getPlayer: playerId => dispatch(getPlayer(playerId)),
   getPlayerWinLoss: (playerId, options) => dispatch(getPlayerWinLoss(playerId, options)),
+  getProPlayers: () => dispatch(getProPlayers()),
 });
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RequestLayer));

src/components/Player/PlayerProfilePrivate/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import LockIcon from '@material-ui/icons/Lock';
+import config from '../../../config';
+
+const Styled = styled.div`
+text-align: center;
+padding-top: 5%;
+
+.playerProfilePrivateTitle {
+  font-size: 2rem;
+  margin-bottom: 1%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lockIcon {
+  font-size: 1.8rem;
+  margin-right: 2%;
+}
+
+.playerProfilePrivateDescription {
+  margin-bottom: 2%;
+}
+
+.signInWithSteamButton {
+  border: solid 1px #FFFFFF;
+  color: #FFFFFF;
+  padding: 1% 2%;
+}
+`
+
+const PlayerProfilePrivate = ({ strings }) => {
+  const handleButtonClick = () => window.location.href = `${config.VITE_API_HOST}/login`
+
+  return (
+    <Styled>
+      <div>
+        <div className="playerProfilePrivateTitle">
+          <LockIcon className="lockIcon" />
+          <div>{(strings.player_profile_private_title)}</div>
+        </div>
+        <div className="playerProfilePrivateDescription">{strings.player_profile_private_description}</div>
+        <Button
+          className="signInWithSteamButton"
+          onClick={handleButtonClick}
+        >
+          {strings.sign_in_with_steam}
+        </Button>
+      </div>
+    </Styled>
+  );
+}
+
+PlayerProfilePrivate.PropTypes = {
+  strings: PropTypes.shape({}),
+}
+
+const mapStateToProps = state => ({
+  strings: state.app.strings,
+})
+
+export default connect(mapStateToProps)(PlayerProfilePrivate);

src/components/Player/playerPages.jsx

@@ -90,7 +90,8 @@ const playerPages = strings => [{
   content: (playerId, routeParams, location) => (<ActivityPage playerId={playerId} routeParams={routeParams} location={location} />),
 }];
 
-export default (playerId, strings) => playerPages(strings).map(page => ({
+export default (playerId, strings, isPlayerProfilePrivate) => playerPages(strings).map(page => ({
   ...page,
   route: `/players/${playerId}/${page.key}`,
+  disabled: isPlayerProfilePrivate,
 }));

src/lang/en-US.json

@@ -1203,5 +1203,8 @@
   "killed": "killed",
   "team_courier": "{team}'s courier",
   "slain_roshan": "Have slain Roshan",
-  "drew_first_blood": "Drew First Blood"
+  "drew_first_blood": "Drew First Blood",
+  "player_profile_private_title": "THIS PROFILE IS PRIVATE" ,
+  "player_profile_private_description": "If this is your profile, sign in with Steam in order to view your statistics.",
+  "sign_in_with_steam": "Sign in with Steam"
 }