1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import ReactImageFallback from 'react-image-fallback'
 4  import { DappModel } from '../../utils/models'
 5  import styles from './DappListItem.module.scss'
 6  import icon from '../../assets/images/icon.svg'
 7  import sntIcon from '../../assets/images/SNT.svg'
 8  import upvoteArrowIcon from '../../assets/images/upvote-arrow.svg'
 9  import downvoteArrowIcon from '../../assets/images/downvote-arrow.svg'
10  
11  const DappListItem = props => {
12    const {
13      dapp,
14      onClickUpVote,
15      onClickDownVote,
16      isRanked,
17      position,
18      category,
19      showActionButtons,
20      onToggleProfileModal,
21    } = props
22  
23    const { name, description, url, image } = dapp
24  
25    const handleUpVote = () => {
26      onClickUpVote(dapp)
27    }
28  
29    const handleDownVote = () => {
30      onClickDownVote(dapp)
31    }
32  
33    return (
34      <div className={isRanked ? styles.rankedListItem : styles.listItem}>
35        {isRanked && <div className={styles.position}>{position}</div>}
36        <div
37          className={styles.imgWrapper}
38          onClick={() => onToggleProfileModal(name)}
39        >
40          <ReactImageFallback
41            className={styles.image}
42            src={image}
43            fallbackImage={icon}
44            alt="App icon"
45          />
46        </div>
47        <div className={styles.column}>
48          <div onClick={() => onToggleProfileModal(name)}>
49            <h2 className={styles.header}>{name}</h2>
50            <p
51              className={styles.description}
52              style={{ WebkitBoxOrient: 'vertical' }}
53            >
54              {description}
55            </p>
56          </div>
57          <a className={styles.url} href={url}>
58            {url}
59            &nbsp;&rarr;
60          </a>
61          {showActionButtons && (
62            <div className={styles.actionArea}>
63              <span className={styles.sntAmount}>
64                <img src={sntIcon} alt="SNT" width="16" height="16" />
65                {dapp.sntValue}
66              </span>
67              <div className={styles.voteTriggers}>
68                <span className={styles.vote} onClick={handleUpVote}>
69                  <img src={upvoteArrowIcon} alt="" />
70                  Upvote
71                </span>
72                <span className={styles.vote} onClick={handleDownVote}>
73                  <img src={downvoteArrowIcon} alt="" />
74                  Downvote
75                </span>
76              </div>
77            </div>
78          )}
79        </div>
80      </div>
81    )
82  }
83  
84  DappListItem.defaultProps = {
85    isRanked: false,
86    showActionButtons: false,
87  }
88  
89  DappListItem.propTypes = {
90    dapp: PropTypes.shape(DappModel).isRequired,
91    isRanked: PropTypes.bool,
92    showActionButtons: PropTypes.bool,
93    position: PropTypes.number.isRequired,
94    onClickUpVote: PropTypes.func.isRequired,
95    onClickDownVote: PropTypes.func.isRequired,
96  }
97  
98  export default DappListItem