Skip to content

Commit

Permalink
feat(issue-3133): include logged in user scenariio
Browse files Browse the repository at this point in the history
  • Loading branch information
jeyren95 committed Feb 20, 2024
1 parent cbb7b53 commit 024cf07
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 14 deletions.
38 changes: 26 additions & 12 deletions src/components/Player/Player.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -32,6 +33,7 @@ class RequestLayer extends React.Component {
playerName: PropTypes.string,
playerLoading: PropTypes.bool,
strings: PropTypes.shape({}),
isPlayerProfilePublic: PropTypes.bool,
}

componentDidMount() {
Expand All @@ -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')}`);
Expand All @@ -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)),
Expand Down
70 changes: 70 additions & 0 deletions src/components/Player/PlayerProfilePrivate/index.jsx
Original file line number Diff line number Diff line change
@@ -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);
3 changes: 2 additions & 1 deletion src/components/Player/playerPages.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));
5 changes: 4 additions & 1 deletion src/lang/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}

0 comments on commit 024cf07

Please sign in to comment.