Update dappListItem to support onClick for profile

This commit is contained in:
Onuwa Nnachi Isaac 2019-04-26 09:40:04 +01:00
parent 183a6d2b38
commit 764fedb113
3 changed files with 36 additions and 3 deletions

View File

@ -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(

View File

@ -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}
&nbsp;&rarr; &nbsp;&rarr;

View File

@ -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 {