refact: refactor userDetails (#5467)
This commit is contained in:
José Chaves Neto
Ben Halpern
parent
a4b86e3ff1
commit
eff7bac9d8
3 changed files with 215 additions and 184 deletions
|
|
@ -34,6 +34,8 @@ module.exports = {
|
|||
'react/jsx-no-target-blank': [2, { enforceDynamicLinks: 'always' }],
|
||||
},
|
||||
globals: {
|
||||
getCsrfToken: false,
|
||||
sendFetch: false,
|
||||
InstantClick: false,
|
||||
filterXSS: false,
|
||||
Pusher: false,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
||||
<div>
|
||||
<img
|
||||
alt="bojackhorseman profile image"
|
||||
alt="bojackhorseman profile"
|
||||
src="https://media.giphy.com/media/3o7WTHb2WjEXbsmWDS/giphy.gif"
|
||||
style={
|
||||
Object {
|
||||
|
|
@ -24,6 +24,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
|||
>
|
||||
<a
|
||||
href="/bojackhorseman"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Bojack Horseman
|
||||
|
|
@ -165,6 +166,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
|||
class="no"
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
No
|
||||
|
|
@ -202,6 +204,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
|||
<a
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
Yes, Block
|
||||
|
|
@ -210,6 +213,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
|||
class="no"
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
No
|
||||
|
|
@ -222,7 +226,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
|||
exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
||||
<div>
|
||||
<img
|
||||
alt="mrpeanutbutter profile image"
|
||||
alt="mrpeanutbutter profile"
|
||||
src="https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif"
|
||||
style={
|
||||
Object {
|
||||
|
|
@ -243,6 +247,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
|||
>
|
||||
<a
|
||||
href="/mrpeanutbutter"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Mr. Peanutbutter
|
||||
|
|
@ -347,11 +352,13 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
|||
>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Block User
|
||||
</button>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Report Abuse
|
||||
</button>
|
||||
|
|
@ -395,6 +402,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
|||
class="no"
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
No
|
||||
|
|
@ -432,6 +440,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
|||
<a
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
Yes, Block
|
||||
|
|
@ -440,6 +449,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
|||
class="no"
|
||||
onClick={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
No
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { h, Component } from 'preact';
|
||||
import { h } from 'preact';
|
||||
import { PropTypes } from 'prop-types';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import twitterImage from 'images/twitter-logo.svg';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import githubImage from 'images/github-logo.svg';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import websiteImage from 'images/external-link-logo.svg';
|
||||
|
||||
function blockUser(blockedUserId) {
|
||||
|
|
@ -16,6 +20,7 @@ function blockUser(blockedUserId) {
|
|||
const setUpButton = ({ modalId = '', otherModalId = '', btnName = '' }) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const modal = document.getElementById(`${modalId}`);
|
||||
const otherModal = document.getElementById(`${otherModalId}`);
|
||||
|
|
@ -34,6 +39,12 @@ const setUpButton = ({ modalId = '', otherModalId = '', btnName = '' }) => {
|
|||
);
|
||||
};
|
||||
|
||||
setUpButton.propTypes = {
|
||||
modalId: PropTypes.string.isRequired,
|
||||
otherModalId: PropTypes.string.isRequired,
|
||||
btnName: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const userDetailsConfig = {
|
||||
twitter_username: {
|
||||
hostUrl: 'https://twitter.com/',
|
||||
|
|
@ -53,200 +64,208 @@ const userDetailsConfig = {
|
|||
},
|
||||
};
|
||||
|
||||
export default class UserDetails extends Component {
|
||||
render() {
|
||||
const { user } = this.props;
|
||||
const channelId = this.props.activeChannelId;
|
||||
const channel = this.props.activeChannel || {};
|
||||
const socialIcons = [];
|
||||
const userMeta = ['twitter_username', 'github_username', 'website_url'];
|
||||
userMeta.forEach(metaProp => {
|
||||
if (user[metaProp]) {
|
||||
const {
|
||||
className,
|
||||
hostUrl,
|
||||
srcImage,
|
||||
imageAltText,
|
||||
} = userDetailsConfig[metaProp];
|
||||
socialIcons.push(
|
||||
<a
|
||||
href={`${hostUrl}${user[metaProp]}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className={className}
|
||||
src={srcImage}
|
||||
style={{ width: '30px', margin: '5px 15px 15px 0px' }}
|
||||
alt={imageAltText}
|
||||
/>
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
});
|
||||
let userLocation = '';
|
||||
if (user.location && user.location.length > 0) {
|
||||
userLocation = (
|
||||
<div>
|
||||
<div className="key">location</div>
|
||||
<div className="value">{user.location}</div>
|
||||
</div>
|
||||
const UserDetails = ({ user, activeChannelId, activeChannel }) => {
|
||||
const channelId = activeChannelId;
|
||||
const channel = activeChannel || {};
|
||||
const socialIcons = [];
|
||||
const userMeta = ['twitter_username', 'github_username', 'website_url'];
|
||||
userMeta.forEach(metaProp => {
|
||||
if (user[metaProp]) {
|
||||
const { className, hostUrl, srcImage, imageAltText } = userDetailsConfig[
|
||||
metaProp
|
||||
];
|
||||
socialIcons.push(
|
||||
<a
|
||||
href={`${hostUrl}${user[metaProp]}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
className={className}
|
||||
src={srcImage}
|
||||
style={{ width: '30px', margin: '5px 15px 15px 0px' }}
|
||||
alt={imageAltText}
|
||||
/>
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
let blockButton = '';
|
||||
if (channel.channel_type === 'direct' && window.currentUser.id != user.id) {
|
||||
blockButton = setUpButton({
|
||||
modalId: 'userdetails__blockmsg',
|
||||
otherModalId: 'userdetails__reportabuse',
|
||||
btnName: 'Block User',
|
||||
});
|
||||
}
|
||||
|
||||
let reportButton = '';
|
||||
if (window.currentUser.id !== user.id) {
|
||||
reportButton = setUpButton({
|
||||
modalId: 'userdetails__reportabuse',
|
||||
otherModalId: 'userdetails__blockmsg',
|
||||
btnName: 'Report Abuse',
|
||||
});
|
||||
}
|
||||
return (
|
||||
});
|
||||
let userLocation = '';
|
||||
if (user.location && user.location.length > 0) {
|
||||
userLocation = (
|
||||
<div>
|
||||
<img
|
||||
src={user.profile_image}
|
||||
alt={`${user.username} profile image`}
|
||||
style={{
|
||||
height: '210px',
|
||||
width: '210px',
|
||||
margin: ' 15px auto',
|
||||
display: 'block',
|
||||
borderRadius: '500px',
|
||||
}}
|
||||
/>
|
||||
<h1 style={{ textAlign: 'center' }}>
|
||||
<a href={`/${user.username}`} target="_blank">
|
||||
{user.name}
|
||||
<div className="key">location</div>
|
||||
<div className="value">{user.location}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
let blockButton = '';
|
||||
if (channel.channel_type === 'direct' && window.currentUser.id !== user.id) {
|
||||
blockButton = setUpButton({
|
||||
modalId: 'userdetails__blockmsg',
|
||||
otherModalId: 'userdetails__reportabuse',
|
||||
btnName: 'Block User',
|
||||
});
|
||||
}
|
||||
|
||||
let reportButton = '';
|
||||
if (window.currentUser.id !== user.id) {
|
||||
reportButton = setUpButton({
|
||||
modalId: 'userdetails__reportabuse',
|
||||
otherModalId: 'userdetails__blockmsg',
|
||||
btnName: 'Report Abuse',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<img
|
||||
src={user.profile_image}
|
||||
alt={`${user.username} profile`}
|
||||
style={{
|
||||
height: '210px',
|
||||
width: '210px',
|
||||
margin: ' 15px auto',
|
||||
display: 'block',
|
||||
borderRadius: '500px',
|
||||
}}
|
||||
/>
|
||||
<h1 style={{ textAlign: 'center' }}>
|
||||
<a href={`/${user.username}`} target="_blank" rel="noopener noreferrer">
|
||||
{user.name}
|
||||
</a>
|
||||
</h1>
|
||||
<div style={{ height: '50px', margin: 'auto', width: '96%' }}>
|
||||
{socialIcons}
|
||||
</div>
|
||||
<div style={{ fontStyle: 'italic' }}>{user.summary}</div>
|
||||
<div className="activechatchannel__activecontentuserdetails">
|
||||
{userLocation}
|
||||
<div className="key">joined</div>
|
||||
<div className="value">{user.joined_at}</div>
|
||||
</div>
|
||||
<div className="userdetails__blockreport">
|
||||
{blockButton}
|
||||
{reportButton}
|
||||
</div>
|
||||
<div id="userdetails__reportabuse" style={{ display: 'none' }}>
|
||||
<div className="userdetails__reportabuse">
|
||||
<p>Reporting abuse will: </p>
|
||||
<ul>
|
||||
<li>
|
||||
close this chat and prevent this user from re-opening chat with
|
||||
you
|
||||
</li>
|
||||
<li>
|
||||
give the DEV team your consent to read messages in this chat to
|
||||
understand your report and take appropriate action
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Blocking is only on Connect right now and has not been implemented
|
||||
across DEV yet.
|
||||
</p>
|
||||
<h5>Are you sure?</h5>
|
||||
<a
|
||||
tabIndex="0"
|
||||
href="/report-abuse"
|
||||
onClick={() => {
|
||||
blockUser(channelId);
|
||||
}}
|
||||
>
|
||||
Yes, Report
|
||||
</a>
|
||||
</h1>
|
||||
<div style={{ height: '50px', margin: 'auto', width: '96%' }}>
|
||||
{socialIcons}
|
||||
</div>
|
||||
<div style={{ fontStyle: 'italic' }}>{user.summary}</div>
|
||||
<div className="activechatchannel__activecontentuserdetails">
|
||||
{userLocation}
|
||||
<div className="key">joined</div>
|
||||
<div className="value">{user.joined_at}</div>
|
||||
</div>
|
||||
<div className="userdetails__blockreport">
|
||||
{blockButton}
|
||||
{reportButton}
|
||||
</div>
|
||||
<div id="userdetails__reportabuse" style={{ display: 'none' }}>
|
||||
<div className="userdetails__reportabuse">
|
||||
<p>Reporting abuse will: </p>
|
||||
<ul>
|
||||
<li>
|
||||
close this chat and prevent this user from re-opening chat with
|
||||
you
|
||||
</li>
|
||||
<li>
|
||||
give the DEV team your consent to read messages in this chat to
|
||||
understand your report and take appropriate action
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Blocking is only on Connect right now and has not been implemented
|
||||
across DEV yet.
|
||||
</p>
|
||||
<h5>Are you sure?</h5>
|
||||
<a
|
||||
tabIndex="0"
|
||||
href="/report-abuse"
|
||||
onClick={() => {
|
||||
blockUser(channelId);
|
||||
}}
|
||||
>
|
||||
Yes, Report
|
||||
</a>
|
||||
<a
|
||||
tabIndex="0"
|
||||
className="no"
|
||||
onClick={() => {
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
className="no"
|
||||
onClick={() => {
|
||||
document.getElementById(
|
||||
'userdetails__reportabuse',
|
||||
).style.display = 'none';
|
||||
window.location.href = `#`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
document.getElementById(
|
||||
'userdetails__reportabuse',
|
||||
).style.display = 'none';
|
||||
window.location.href = `#`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
document.getElementById(
|
||||
'userdetails__reportabuse',
|
||||
).style.display = 'none';
|
||||
window.location.href = `#`;
|
||||
}
|
||||
}}
|
||||
>
|
||||
No
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
>
|
||||
No
|
||||
</a>
|
||||
</div>
|
||||
<div id="userdetails__blockmsg" style={{ display: 'none' }}>
|
||||
<div className="userdetails__blockmsg">
|
||||
<p>Blocking on connect will: </p>
|
||||
<ul>
|
||||
<li>
|
||||
close this chat and prevent this user from re-opening chat with
|
||||
you
|
||||
</li>
|
||||
<li>
|
||||
NOT notify the user you will block--this channel will become
|
||||
inaccessible for both users
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Blocking is only on Connect right now and has not been implemented
|
||||
across DEV yet. Consider reporting abuse to the DEV team if this
|
||||
user is spamming or harassing elsewhere on dev.to, so we can take
|
||||
further action.
|
||||
</p>
|
||||
<h5>Are you sure?</h5>
|
||||
<a
|
||||
tabIndex="0"
|
||||
onClick={() => {
|
||||
</div>
|
||||
<div id="userdetails__blockmsg" style={{ display: 'none' }}>
|
||||
<div className="userdetails__blockmsg">
|
||||
<p>Blocking on connect will: </p>
|
||||
<ul>
|
||||
<li>
|
||||
close this chat and prevent this user from re-opening chat with
|
||||
you
|
||||
</li>
|
||||
<li>
|
||||
NOT notify the user you will block--this channel will become
|
||||
inaccessible for both users
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Blocking is only on Connect right now and has not been implemented
|
||||
across DEV yet. Consider reporting abuse to the DEV team if this
|
||||
user is spamming or harassing elsewhere on dev.to, so we can take
|
||||
further action.
|
||||
</p>
|
||||
<h5>Are you sure?</h5>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
onClick={() => {
|
||||
blockUser(user.id);
|
||||
window.location.href = `/connect`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
blockUser(user.id);
|
||||
window.location.href = `/connect`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
blockUser(user.id);
|
||||
window.location.href = `/connect`;
|
||||
}
|
||||
}}
|
||||
>
|
||||
Yes, Block
|
||||
</a>
|
||||
<a
|
||||
tabIndex="0"
|
||||
className="no"
|
||||
onClick={() => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
Yes, Block
|
||||
</a>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
className="no"
|
||||
onClick={() => {
|
||||
document.getElementById('userdetails__blockmsg').style.display =
|
||||
'none';
|
||||
window.location.href = `#`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
document.getElementById('userdetails__blockmsg').style.display =
|
||||
'none';
|
||||
window.location.href = `#`;
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (e.keyCode === 13) {
|
||||
document.getElementById(
|
||||
'userdetails__blockmsg',
|
||||
).style.display = 'none';
|
||||
window.location.href = `#`;
|
||||
}
|
||||
}}
|
||||
>
|
||||
No
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
>
|
||||
No
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UserDetails.propTypes = {
|
||||
user: PropTypes.objectOf().isRequired,
|
||||
activeChannelId: PropTypes.string.isRequired,
|
||||
activeChannel: PropTypes.objectOf().isRequired,
|
||||
};
|
||||
|
||||
export default UserDetails;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue