diff --git a/src/common/components/DappListItem/DappListItem.jsx b/src/common/components/DappListItem/DappListItem.jsx index 3c6a88e..0f04e3b 100644 --- a/src/common/components/DappListItem/DappListItem.jsx +++ b/src/common/components/DappListItem/DappListItem.jsx @@ -26,19 +26,7 @@ const DappListItem = props => { return (
{isRanked &&
{position}
} -
- onToggleProfileModal({ - name, - url, - description, - image, - isRanked, - position, - category, - }) - } - > +
onToggleProfileModal(name)}> { />
-
- onToggleProfileModal({ - name, - url, - description, - image, - isRanked, - position, - category, - }) - } - > +
onToggleProfileModal(name)}>

{name}

{description}

diff --git a/src/modules/App/Router.jsx b/src/modules/App/Router.jsx index 9e5b94c..9c686fd 100644 --- a/src/modules/App/Router.jsx +++ b/src/modules/App/Router.jsx @@ -13,8 +13,7 @@ export default () => [ - + , , - , ] diff --git a/src/modules/Profile/Profile.container.js b/src/modules/Profile/Profile.container.js index 3876426..bbfa559 100644 --- a/src/modules/Profile/Profile.container.js +++ b/src/modules/Profile/Profile.container.js @@ -1,7 +1,15 @@ import { connect } from 'react-redux' import Profile from './Profile' +import { toggleProfileModalAction } from './Profile.reducer' const mapStateToProps = state => state -export default connect(mapStateToProps)(Profile) +const mapDispatchToProps = dispatch => ({ + openModal: dapp => dispatch(toggleProfileModalAction(dapp)), +}) + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(Profile) diff --git a/src/modules/Profile/Profile.jsx b/src/modules/Profile/Profile.jsx index 62e1288..ddf1afe 100644 --- a/src/modules/Profile/Profile.jsx +++ b/src/modules/Profile/Profile.jsx @@ -5,23 +5,14 @@ import Modal from '../../common/components/Modal' import styles from './Profile.module.scss' import icon from '../../common/assets/images/icon.svg' import chat from '../../common/assets/images/chat.svg' -import { Redirect } from 'react-router-dom' +import { push } from 'connected-react-router' const DesktopScreen = props => { return {props.children} } const MobileScreen = props => { - return ( - <> - {props.router.location.state && - props.router.location.state.name === props.profile.dapp.name ? ( - props.children - ) : ( - - )} - - ) + return <>{props.children} } const ProfileContent = ({ @@ -29,7 +20,6 @@ const ProfileContent = ({ url, description, image, - isRanked, position, category, }) => { @@ -104,26 +94,53 @@ const ProfileContent = ({ ) } -const Profile = props => { - const { innerWidth } = window - return innerWidth >= 1024 ? ( - - - - ) : ( - - - - ) -} +class Profile extends Component { + constructor(props) { + super(props) + this.state = { + screenSize: 0, + visible: true, + dapp: {}, + } + } + componentDidMount() { + const { innerWidth } = window + const { dapp_name } = this.props.match.params + + this.props.dapps.find(dapp => { + if (dapp.name.toLowerCase() === dapp_name.toLowerCase()) { + if (innerWidth >= 1024) { + this.props.openModal(dapp.name) + } + this.setState({ + screenSize: innerWidth, + visible: true, + dapp, + }) + } + }) + } + + render() { + return this.state.screenSize >= 1024 ? ( + + + + ) : ( + + + + ) + } +} Profile.propTypes = { - visible: PropTypes.bool.isRequired, + visible: PropTypes.bool, dapp: PropTypes.object, } Profile.defaultProps = { - visible: false, + // visible: false, } export default Profile diff --git a/src/modules/Profile/Profile.reducer.js b/src/modules/Profile/Profile.reducer.js index 31fe816..03c66db 100644 --- a/src/modules/Profile/Profile.reducer.js +++ b/src/modules/Profile/Profile.reducer.js @@ -7,14 +7,8 @@ const MOBILE_NAVIGATE = 'MOBILE_NAVIGATE' export const toggleProfileModalAction = dapp => { const { innerWidth } = window + history.push(`/${dapp.trim()}`, dapp) if (innerWidth <= 1024) { - history.push( - `/${dapp.name - .toLowerCase() - .trim() - .replace(' ', '-')}`, - dapp, - ) return { type: MOBILE_NAVIGATE, payload: dapp,