Merge pull request #3151 from jeyren95/feature/issue-3133

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

src/components/Player/Header/PlayerHeader.jsx

@@ -187,7 +187,6 @@ grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr;
     position: absolute;
   }
 }
-
 `;
 
 const LARGE_IMAGE_SIZE = 124;
@@ -285,6 +284,7 @@ const PlayerHeader = ({
   rankTier,
   leaderboardRank,
   strings,
+  isPlayerProfilePrivate,
 }) => {
   if (error) {
     return <Error />;
@@ -340,8 +340,12 @@ 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 && (
+              <>
+                <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 +372,7 @@ PlayerHeader.propTypes = {
   rankTier: PropTypes.number,
   leaderboardRank: PropTypes.number,
   strings: PropTypes.shape({}),
+  isPlayerProfilePrivate: PropTypes.bool,
 };
 
 const mapStateToProps = state => ({

src/components/Player/Player.jsx

@@ -4,14 +4,12 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 import Long from 'long';
-import {
-  getPlayer,
-  getPlayerWinLoss,
-} from '../../actions';
+import { getPlayer, getPlayerWinLoss } 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,6 +30,7 @@ class RequestLayer extends React.Component {
     playerName: PropTypes.string,
     playerLoading: PropTypes.bool,
     strings: PropTypes.shape({}),
+    isPlayerProfilePrivate: PropTypes.bool,
   }
 
   componentDidMount() {
@@ -53,8 +52,9 @@ class RequestLayer extends React.Component {
   }
 
   render() {
-    const { location, match, strings } = this.props;
+    const { location, match, strings, isPlayerProfilePrivate } = this.props;
     const { playerId } = this.props.match.params;
+
     if (Long.fromString(playerId).greaterThan('76561197960265728')) {
       this.props.history.push(`/players/${Long.fromString(playerId).subtract('76561197960265728')}`);
     }
@@ -66,13 +66,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,7 +87,8 @@ const mapStateToProps = state => ({
   playerLoading: (state.app.player.loading),
   officialPlayerName: (state.app.player.data.profile || {}).name,
   strings: state.app.strings,
-});
+  isPlayerProfilePrivate: (state.app.player.data.profile || {}).fh_unavailable && !(state.app.player.data.profile || {}).name,
+})
 
 const mapDispatchToProps = dispatch => ({
   getPlayer: playerId => dispatch(getPlayer(playerId)),

src/components/Player/PlayerProfilePrivate/index.jsx

@@ -0,0 +1,68 @@
+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`;
+  const playerProfilePrivateTitle = (strings.player_profile_private_title || "").toUpperCase();
+
+  return (
+    <Styled>
+      <div>
+        <div className="playerProfilePrivateTitle">
+          <LockIcon className="lockIcon" />
+          <div>{playerProfilePrivateTitle}</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"
 }