From c878c7f366d35c04887c5c82c8eee87dd8cc86f5 Mon Sep 17 00:00:00 2001 From: Onuwa Nnachi Isaac Date: Fri, 26 Apr 2019 09:54:33 +0100 Subject: [PATCH] Setup Profile page --- src/common/assets/images/chat.svg | 3 + src/common/data/profile.js | 6 + src/modules/Profile/Profile.container.js | 7 ++ src/modules/Profile/Profile.jsx | 129 ++++++++++++++++++++ src/modules/Profile/Profile.module.scss | 144 +++++++++++++++++++++++ src/modules/Profile/Profile.reducer.js | 42 +++++++ src/modules/Profile/index.js | 3 + 7 files changed, 334 insertions(+) create mode 100644 src/common/assets/images/chat.svg create mode 100644 src/common/data/profile.js create mode 100644 src/modules/Profile/Profile.container.js create mode 100644 src/modules/Profile/Profile.jsx create mode 100644 src/modules/Profile/Profile.module.scss create mode 100644 src/modules/Profile/Profile.reducer.js create mode 100644 src/modules/Profile/index.js diff --git a/src/common/assets/images/chat.svg b/src/common/assets/images/chat.svg new file mode 100644 index 0000000..88355a2 --- /dev/null +++ b/src/common/assets/images/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/data/profile.js b/src/common/data/profile.js new file mode 100644 index 0000000..f9ea202 --- /dev/null +++ b/src/common/data/profile.js @@ -0,0 +1,6 @@ +const profile = { + visible: false, + dapp: '', +} + +export default profile diff --git a/src/modules/Profile/Profile.container.js b/src/modules/Profile/Profile.container.js new file mode 100644 index 0000000..3876426 --- /dev/null +++ b/src/modules/Profile/Profile.container.js @@ -0,0 +1,7 @@ +import { connect } from 'react-redux' + +import Profile from './Profile' + +const mapStateToProps = state => state + +export default connect(mapStateToProps)(Profile) diff --git a/src/modules/Profile/Profile.jsx b/src/modules/Profile/Profile.jsx new file mode 100644 index 0000000..62e1288 --- /dev/null +++ b/src/modules/Profile/Profile.jsx @@ -0,0 +1,129 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import ReactImageFallback from 'react-image-fallback' +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' + +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 + ) : ( + + )} + + ) +} + +const ProfileContent = ({ + name, + url, + description, + image, + isRanked, + position, + category, +}) => { + return ( + <> +
+
+ +
+
+

{name}

+ {category} + + Open + +
+
+ Description +

{description}

+
+
+ + Chat + {`Open ${name} chat`} +
+
+ URL +

+ + {url} +  → + +

+
+
+ Ranking +
+
+ {position} +
+ + № + {position} in {category} + +
+
+ + {position} + + + № + {position} in highest ranked DApps + +
+
+
+ + ) +} + +const Profile = props => { + const { innerWidth } = window + return innerWidth >= 1024 ? ( + + + + ) : ( + + + + ) +} + +Profile.propTypes = { + visible: PropTypes.bool.isRequired, + dapp: PropTypes.object, +} + +Profile.defaultProps = { + visible: false, +} + +export default Profile diff --git a/src/modules/Profile/Profile.module.scss b/src/modules/Profile/Profile.module.scss new file mode 100644 index 0000000..aa1a20b --- /dev/null +++ b/src/modules/Profile/Profile.module.scss @@ -0,0 +1,144 @@ +@import '../../common/styles/variables'; + +a { + text-decoration: none; +} + +.container { + font-family: $font; + background-color: #ffffff; +} + +.banner { + height: calculateRem(140); + background-color: $blue-bg; + display: flex; + justify-content: center; +} + +.image { + border-radius: calculateRem(100); + width: calculateRem(100); + height: calculateRem(100); + margin: calculateRem(80) auto; + z-index: 99; + box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08), + 0px 2px 4px rgba(0, 34, 51, 0.16); +} + +.header { + color: $headline-color; + font-size: calculateRem(15); + line-height: calculateRem(22); + margin-bottom: calculateRem(4); + margin-top: calculateRem(12); + font-weight: 600; + cursor: pointer; +} + +.category { + margin-bottom: calculateRem(20); +} + +.heading { + color: $text-color; + font-size: calculateRem(13); + line-height: calculateRem(18); + margin-bottom: calculateRem(2); + margin-top: 0; + max-height: calculateRem(40); + overflow-y: hidden; + cursor: pointer; +} + +.information { + display: flex; + flex-direction: column; + align-items: center; + margin: calculateRem(40) auto; +} + +.button { + border-radius: 20px; + background-color: #4360df; + color: #ffffff; + padding: calculateRem(12) calculateRem(20); +} + +.description { + border-bottom: 1px solid #eef2f5; + box-shadow: inset 0px 1px 0px #eef2f5; + padding: calculateRem(10) calculateRem(20); +} + +.chat { + display: flex; + align-items: center; + border-bottom: 1px solid #eef2f5; + box-shadow: inset 0px 1px 0px #eef2f5; + padding: calculateRem(10) calculateRem(20); +} + +.chat_image { + width: calculateRem(40); + height: calculateRem(40); + margin-top: calculateRem(20); + border-radius: 20px; +} + +.chat_link { + margin: calculateRem(10); + margin-top: calculateRem(25); +} + +.chat_icon { + margin-left: calculateRem(-10); + margin-bottom: calculateRem(10); +} + +.url { + border-bottom: 1px solid #eef2f5; + box-shadow: inset 0px 1px 0px #eef2f5; + padding: calculateRem(10) calculateRem(20); +} + +.ranking { + border-bottom: 1px solid #eef2f5; + box-shadow: inset 0px 1px 0px #eef2f5; + padding: calculateRem(10) calculateRem(20); +} + +.rank { + display: flex; + margin-top: calculateRem(10); +} + +.rank_position_1 { + border-radius: 40px; + width: calculateRem(40); + margin-right: calculateRem(15); + height: calculateRem(40); + background-color: $blue; + display: flex; + justify-content: center; +} + +.rank_position_2 { + border-radius: 40px; + width: calculateRem(40); + margin-right: calculateRem(15); + height: calculateRem(40); + background-color: $red; + display: flex; + justify-content: center; +} + +.rank_position_span { + padding: calculateRem(10); + color: #ffffff; + font-weight: 600; +} + +.rank_position_text { + margin-top: calculateRem(10); +} diff --git a/src/modules/Profile/Profile.reducer.js b/src/modules/Profile/Profile.reducer.js new file mode 100644 index 0000000..72e0846 --- /dev/null +++ b/src/modules/Profile/Profile.reducer.js @@ -0,0 +1,42 @@ +import profileState from '../../common/data/profile' +import reducerUtil from '../../common/utils/reducer' +import { history } from '../../common/redux/store' + +const DESKTOP_NAVIGATE = 'DESKTOP_NAVIGATE' +const MOBILE_NAVIGATE = 'MOBILE_NAVIGATE' + +export const toggleProfileModalAction = dapp => { + const { innerWidth } = window + if (innerWidth <= 1024) { + history.push(`/${dapp.name.toLowerCase()}`, dapp) + return { + type: MOBILE_NAVIGATE, + payload: dapp, + } + } else { + return { + type: DESKTOP_NAVIGATE, + payload: dapp, + } + } +} + +const toggleProfileModal = (state, payload) => { + return Object.assign({}, state, { + visible: !state.visible, + dapp: payload, + }) +} + +const navigateProfile = (state, payload) => { + return Object.assign({}, state, { + visible: false, + dapp: payload, + }) +} +const map = { + [DESKTOP_NAVIGATE]: toggleProfileModal, + [MOBILE_NAVIGATE]: navigateProfile, +} + +export default reducerUtil(map, profileState) diff --git a/src/modules/Profile/index.js b/src/modules/Profile/index.js new file mode 100644 index 0000000..4bc4a5e --- /dev/null +++ b/src/modules/Profile/index.js @@ -0,0 +1,3 @@ +import Profile from './Profile.container' + +export default Profile