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

feat(issue-3133): include logged in user scenario

src/components/Player/Player.jsx

@@ -14,6 +14,7 @@ import TableFilterForm from './TableFilterForm';
 import PlayerHeader from './Header/PlayerHeader';
 // import Error from '../Error';
 import playerPages from './playerPages';
+import PlayerProfilePrivate from './PlayerProfilePrivate';
 
 class RequestLayer extends React.Component {
   static propTypes = {
@@ -32,6 +33,7 @@ class RequestLayer extends React.Component {
     playerName: PropTypes.string,
     playerLoading: PropTypes.bool,
     strings: PropTypes.shape({}),
+    isPlayerProfilePublic: PropTypes.bool,
   }
 
   componentDidMount() {
@@ -53,7 +55,7 @@ class RequestLayer extends React.Component {
   }
 
   render() {
-    const { location, match, strings } = this.props;
+    const { location, match, strings, isPlayerProfilePublic } = this.props;
     const { playerId } = this.props.match.params;
     if (Long.fromString(playerId).greaterThan('76561197960265728')) {
       this.props.history.push(`/players/${Long.fromString(playerId).subtract('76561197960265728')}`);
@@ -67,23 +69,35 @@ class RequestLayer extends React.Component {
         {!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 />}
+          <TabBar info={info} tabs={playerPages(playerId, strings, isPlayerProfilePublic)} />
         </div>
+        {isPlayerProfilePublic ? (
+          <div>
+            <TableFilterForm playerId={playerId} />
+            {page ? page.content(playerId, match.params, location) : <Spinner />}
+          </div>
+        ) : (
+          <PlayerProfilePrivate />
+        )}
       </div>
     );
   }
 }
 
-const mapStateToProps = state => ({
-  playerName: (state.app.player.data.profile || {}).personaname,
-  playerLoading: (state.app.player.loading),
-  officialPlayerName: (state.app.player.data.profile || {}).name,
-  strings: state.app.strings,
-});
+const mapStateToProps = state => {
+  const playerProfile = state.app.player.data.profile || {};
+  const loggedInUser = state.app.metadata.data.user || {};
+
+  return {
+    playerName: playerProfile.personaname,
+    playerLoading: state.app.player.loading,
+    officialPlayerName: playerProfile.name,
+    strings: state.app.strings,
+    isPlayerProfilePublic: !!playerProfile.name 
+      || !playerProfile.fh_unavailable 
+      || (playerProfile.fh_unavailable && loggedInUser.account_id === playerProfile.account_id)
+  }
+};
 
 const mapDispatchToProps = dispatch => ({
   getPlayer: playerId => dispatch(getPlayer(playerId)),

src/components/Player/PlayerProfilePrivate/index.jsx

@@ -0,0 +1,70 @@
+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, isPlayerProfilePublic) => playerPages(strings).map(page => ({
   ...page,
   route: `/players/${playerId}/${page.key}`,
+  disabled: !isPlayerProfilePublic,
 }));

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"
 }