From d886b5bc3916cc50a29068a83c94d08073a20ae0 Mon Sep 17 00:00:00 2001
From: Onuwa Nnachi Isaac <matrix4u2002@gmail.com>
Date: Sat, 27 Apr 2019 12:27:48 +0100
Subject: [PATCH] UpdaUpdate changes

---
 .../components/DappListItem/DappListItem.jsx  | 28 +-------
 src/modules/App/Router.jsx                    |  3 +-
 src/modules/Profile/Profile.container.js      | 10 ++-
 src/modules/Profile/Profile.jsx               | 69 ++++++++++++-------
 src/modules/Profile/Profile.reducer.js        |  8 +--
 5 files changed, 56 insertions(+), 62 deletions(-)

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 (
     <div className={isRanked ? styles.rankedListItem : styles.listItem}>
       {isRanked && <div className={styles.position}>{position}</div>}
-      <div
-        onClick={() =>
-          onToggleProfileModal({
-            name,
-            url,
-            description,
-            image,
-            isRanked,
-            position,
-            category,
-          })
-        }
-      >
+      <div onClick={() => onToggleProfileModal(name)}>
         <ReactImageFallback
           className={styles.image}
           src={image}
@@ -47,19 +35,7 @@ const DappListItem = props => {
         />
       </div>
       <div>
-        <div
-          onClick={() =>
-            onToggleProfileModal({
-              name,
-              url,
-              description,
-              image,
-              isRanked,
-              position,
-              category,
-            })
-          }
-        >
+        <div onClick={() => onToggleProfileModal(name)}>
           <h2 className={styles.header}>{name}</h2>
           <p className={styles.description}>{description}</p>
         </div>
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 () => [
     <Route path="/categories" component={Filtered} />
     <Route path="/all" component={Dapps} />
     <Route path="/recently-added" component={RecentlyAdded} />
-    <Route path="/:dapp-name" component={Profile} />
+    <Route path="/:dapp_name" component={Profile} />
   </Switch>,
   <Vote key={2} />,
-  <Profile key={3} />,
 ]
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 <Modal visible={props.visible}>{props.children}</Modal>
 }
 
 const MobileScreen = props => {
-  return (
-    <>
-      {props.router.location.state &&
-      props.router.location.state.name === props.profile.dapp.name ? (
-        props.children
-      ) : (
-        <Redirect to={'/'} />
-      )}
-    </>
-  )
+  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 ? (
-    <DesktopScreen {...props.profile}>
-      <ProfileContent {...props.profile.dapp} />
-    </DesktopScreen>
-  ) : (
-    <MobileScreen {...props}>
-      <ProfileContent {...props.profile.dapp} />
-    </MobileScreen>
-  )
-}
+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 ? (
+      <DesktopScreen visible={this.state.visible}>
+        <ProfileContent {...this.state.dapp} />
+      </DesktopScreen>
+    ) : (
+      <MobileScreen {...this.props}>
+        <ProfileContent {...this.state.dapp} />
+      </MobileScreen>
+    )
+  }
+}
 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,