1  import React, { Component } from 'react'
  2  import PropTypes from 'prop-types'
  3  import ReactImageFallback from 'react-image-fallback'
  4  import { push } from 'connected-react-router'
  5  import Modal from '../../common/components/Modal'
  6  import styles from './Profile.module.scss'
  7  import icon from '../../common/assets/images/icon.svg'
  8  import chat from '../../common/assets/images/chat.svg'
  9  
 10  const DesktopScreen = props => {
 11    return <Modal visible={props.visible}>{props.children}</Modal>
 12  }
 13  
 14  const MobileScreen = props => {
 15    return <>{props.children}</>
 16  }
 17  
 18  const ProfileContent = ({
 19    name,
 20    url,
 21    description,
 22    image,
 23    position,
 24    category,
 25  }) => {
 26    return (
 27      <>
 28        <div className={styles.container}>
 29          <div className={styles.banner}>
 30            <ReactImageFallback
 31              className={styles.image}
 32              src={image}
 33              fallbackImage={icon}
 34              alt="App icon"
 35            />
 36          </div>
 37          <div className={styles.information}>
 38            <h4 className={styles.header}>{name}</h4>
 39            <span className={styles.category}>{category}</span>
 40            <a href="#" target="_blank" className={styles.button}>
 41              Open
 42            </a>
 43          </div>
 44          <div className={styles.description}>
 45            <span className={styles.heading}>Description</span>
 46            <p>{description}</p>
 47          </div>
 48          <div className={styles.chat}>
 49            <ReactImageFallback
 50              className={styles.chat_image}
 51              src={image}
 52              fallbackImage={icon}
 53              alt="App icon"
 54            />
 55            <img src={chat} className={styles.chat_icon} alt="Chat" />
 56            <a href="#" target="_blank" className={styles.chat_link}>
 57              {`Open ${name} chat`}
 58            </a>
 59          </div>
 60          <div className={styles.url}>
 61            <span className={styles.heading}>URL</span>
 62            <p>
 63              <a href={url}>
 64                {url}
 65                &nbsp;&rarr;
 66              </a>
 67            </p>
 68          </div>
 69          <div className={styles.ranking}>
 70            <span className={styles.heading}>Ranking</span>
 71            <div className={styles.rank}>
 72              <div className={styles.rank_position_1}>
 73                <span className={styles.rank_position_span}>{position}</span>
 74              </div>
 75              <span className={styles.rank_position_text}>
 76                <span>№</span>
 77                {position} in {category}
 78              </span>
 79            </div>
 80            <div className={styles.rank}>
 81              <span className={styles.rank_position_2}>
 82                <span className={styles.rank_position_span}>{position}</span>
 83              </span>
 84              <span className={styles.rank_position_text}>
 85                <span>№</span>
 86                {position} in highest ranked DApps
 87              </span>
 88            </div>
 89          </div>
 90        </div>
 91      </>
 92    )
 93  }
 94  
 95  class Profile extends Component {
 96    constructor(props) {
 97      super(props)
 98      this.state = {
 99        screenSize: 0,
100        visible: true,
101      }
102    }
103  
104    componentDidMount() {
105      const { innerWidth } = window
106      const { match, openModal } = this.props
107      const { params } = match
108      const { dapp_name } = params
109      if (innerWidth >= 1024) {
110        openModal(dapp_name)
111      }
112  
113      this.setState({
114        screenSize: innerWidth,
115        visible: true,
116      })
117    }
118  
119    render() {
120      const { match, dapps } = this.props
121      const { params } = match
122      const { dapp_name } = params
123  
124      const { screenSize, visible } = this.state
125      if (
126        dapps.highestRankedFetched === true &&
127        dapps.recentlyAddedFetched === true
128      ) {
129        const dapp = dapps.dapps.find(item =>
130          item.name.toLowerCase() === dapp_name.toLowerCase() ? item : '',
131        )
132        return screenSize >= 1024 ? (
133          <DesktopScreen visible={visible}>
134            <ProfileContent {...dapp} />
135          </DesktopScreen>
136        ) : (
137          <MobileScreen {...this.props}>
138            <ProfileContent {...dapp} />
139          </MobileScreen>
140        )
141      }
142      return null
143    }
144  }
145  Profile.propTypes = {
146    visible: PropTypes.bool,
147    dapp: PropTypes.object,
148  }
149  
150  Profile.defaultProps = {
151    // visible: false,
152  }
153  
154  export default Profile