Update dappListItem to support onClick for profile
This commit is contained in:
parent
183a6d2b38
commit
764fedb113
|
@ -4,10 +4,12 @@ import {
|
||||||
showDownVoteAction,
|
showDownVoteAction,
|
||||||
showUpVoteAction,
|
showUpVoteAction,
|
||||||
} from '../../../modules/Vote/Vote.reducer'
|
} from '../../../modules/Vote/Vote.reducer'
|
||||||
|
import { toggleProfileModalAction } from '../../../modules/Profile/Profile.reducer'
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
onClickUpVote: () => dispatch(showUpVoteAction()),
|
onClickUpVote: () => dispatch(showUpVoteAction()),
|
||||||
onClickDownVote: () => dispatch(showDownVoteAction()),
|
onClickDownVote: () => dispatch(showDownVoteAction()),
|
||||||
|
onToggleProfileModal: data => dispatch(toggleProfileModalAction(data)),
|
||||||
})
|
})
|
||||||
|
|
||||||
export default connect(
|
export default connect(
|
||||||
|
|
|
@ -16,15 +16,29 @@ const DappListItem = props => {
|
||||||
image,
|
image,
|
||||||
isRanked,
|
isRanked,
|
||||||
position,
|
position,
|
||||||
|
category,
|
||||||
showActionButtons,
|
showActionButtons,
|
||||||
onClickUpVote,
|
onClickUpVote,
|
||||||
onClickDownVote,
|
onClickDownVote,
|
||||||
|
onToggleProfileModal,
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={isRanked ? styles.rankedListItem : styles.listItem}>
|
<div className={isRanked ? styles.rankedListItem : styles.listItem}>
|
||||||
{isRanked && <div className={styles.position}>{position}</div>}
|
{isRanked && <div className={styles.position}>{position}</div>}
|
||||||
<div>
|
<div
|
||||||
|
onClick={() =>
|
||||||
|
onToggleProfileModal({
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
description,
|
||||||
|
image,
|
||||||
|
isRanked,
|
||||||
|
position,
|
||||||
|
category,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
<ReactImageFallback
|
<ReactImageFallback
|
||||||
className={styles.image}
|
className={styles.image}
|
||||||
src={image}
|
src={image}
|
||||||
|
@ -33,8 +47,22 @@ const DappListItem = props => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<div
|
||||||
|
onClick={() =>
|
||||||
|
onToggleProfileModal({
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
description,
|
||||||
|
image,
|
||||||
|
isRanked,
|
||||||
|
position,
|
||||||
|
category,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
<h2 className={styles.header}>{name}</h2>
|
<h2 className={styles.header}>{name}</h2>
|
||||||
<p className={styles.description}>{description}</p>
|
<p className={styles.description}>{description}</p>
|
||||||
|
</div>
|
||||||
<a className={styles.url} href={url}>
|
<a className={styles.url} href={url}>
|
||||||
{url}
|
{url}
|
||||||
→
|
→
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
margin-bottom: calculateRem(2);
|
margin-bottom: calculateRem(2);
|
||||||
margin-top: calculateRem(12);
|
margin-top: calculateRem(12);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
|
@ -32,6 +33,7 @@
|
||||||
margin-top: calculateRem(15);
|
margin-top: calculateRem(15);
|
||||||
margin-right: calculateRem(16);
|
margin-right: calculateRem(16);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.url {
|
.url {
|
||||||
|
@ -48,6 +50,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
max-height: calculateRem(40);
|
max-height: calculateRem(40);
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.position {
|
.position {
|
||||||
|
|
Loading…
Reference in New Issue