Merge branch 'develop' of github.com:status-im/discover-dapps into develop

Merge issues

.eslintrc.json

@@ -2,7 +2,9 @@
   "extends": ["airbnb", "plugin:prettier/recommended"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": ["error", {
+     "endOfLine":"auto"
+   }]
   },
   "env": {
     "browser": true,

src/common/components/DappList/DappList.jsx

@@ -20,7 +20,7 @@ const DappList = props => {
 }
 
 DappList.defaultProps = {
-  showActionButtons: false,
+  showActionButtons: true,
 }
 
 DappList.propTypes = {

src/common/components/DappListItem/DappListItem.container.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import DappListItem from './DappListItem'
+import {
+  showDownVoteAction,
+  showUpVoteAction,
+} from '../../../modules/Vote/Vote.reducer'
+
+const mapDispatchToProps = dispatch => ({
+  onClickUpVote: () => dispatch(showUpVoteAction()),
+  onClickDownVote: () => dispatch(showDownVoteAction()),
+})
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(DappListItem)

src/common/components/DappListItem/DappListItem.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ReactImageFallback from 'react-image-fallback'
 import { DappModel } from '../../utils/models'
 import styles from './DappListItem.module.scss'
@@ -16,6 +17,8 @@ const DappListItem = props => {
     isRanked,
     position,
     showActionButtons,
+    onClickUpVote,
+    onClickDownVote,
   } = props
 
   return (
@@ -42,14 +45,14 @@ const DappListItem = props => {
               <img src={sntIcon} alt="SNT" width="16" height="16" />
               12,345
             </span>
-            <a className={styles.vote} href="/vote">
+            <span className={styles.vote} onClick={onClickUpVote}>
               <img src={upvoteArrowIcon} alt="" />
               Upvote
-            </a>
-            <a className={styles.vote} href="/vote">
+            </span>
+            <span className={styles.vote} onClick={onClickDownVote}>
               <img src={downvoteArrowIcon} alt="" />
               Downvote
-            </a>
+            </span>
           </p>
         )}
       </div>
@@ -62,6 +65,9 @@ DappListItem.defaultProps = {
   showActionButtons: false,
 }
 
-DappListItem.propTypes = DappModel
+DappListItem.propTypes = Object.assign({}, DappModel, {
+  onClickUpVote: PropTypes.func.isRequired,
+  onClickDownVote: PropTypes.func.isRequired,
+})
 
 export default DappListItem

src/common/components/DappListItem/DappListItem.module.scss

@@ -59,8 +59,9 @@
 .sntAmount {
   font-size: calculateRem(12);
   font-weight: 500;
-  width: 80px;
+  // width: 80px;
   display: inline-block;
+  margin-right: calculateRem(12);
 }
 
 .sntAmount img {
@@ -74,8 +75,13 @@
   color: $link-color;
   font-weight: 600;
   text-decoration: none;
-  width: calculateRem(80);
+  // width: calculateRem(80);
   display: inline-block;
+  cursor: pointer;
+}
+
+.vote:not(:last-child) {
+  margin-right: calculateRem(12);
 }
 
 .vote img {

src/common/components/DappListItem/index.js

@@ -1,3 +1,3 @@
-import DappListItem from './DappListItem'
+import DappListItem from './DappListItem.container'
 
 export default DappListItem

src/common/components/Modal/Modal.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Modal.module.scss'
+
+const Modal = props => {
+  const { visible, children, modalClassName, contentClassName } = props
+
+  return (
+    <div
+      className={`${modalClassName} ${styles.wrapper} ${
+        visible ? styles.active : ''
+      }`}
+    >
+      <div className={styles.window}>
+        <div className={styles.close}>+</div>
+        <div className={contentClassName}>{visible && children}</div>
+      </div>
+    </div>
+  )
+}
+
+Modal.defaultProps = {
+  modalClassName: '',
+  contentClassName: '',
+}
+
+Modal.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  modalClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+}
+
+export default Modal

src/common/components/Modal/Modal.module.scss

@@ -0,0 +1,53 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 4096;
+
+  transition-property: opacity;
+  transition-duration: 0.25s;
+
+  .window {
+    width: 800px;
+    max-height: 90%;
+    line-height: normal;
+    position: relative;
+    background: #f3f3f3;
+    box-shadow: 0px 0px 17px 0px #bbb;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+.wrapper.active {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+// .PopupWindowWrapper > .PopupWindow > .Close {
+//     width:16px; height:16px; line-height:16px;
+//     position:absolute;
+//     right:0; top:0;
+//     font-size:24px;
+//     padding:8px;
+//     transform:rotate(45deg);
+//     z-index:1;
+//     cursor:pointer;
+// }
+
+// .PopupWindowWrapper {
+//     background:transparent;
+// }
+
+// .PopupWindowWrapper > .PopupWindow {
+//     background:transparent;
+//     box-shadow:none;
+// }

src/common/components/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal'
+
+export default Modal

src/common/data/vote.js

@@ -0,0 +1,5 @@
+const vote = {
+  visible: false,
+}
+
+export default vote

src/common/redux/reducers.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux'
 import { connectRouter } from 'connected-react-router'
 import dapps from '../../modules/Dapps/Dapps.reducer'
 import selectedCategory from '../../modules/CategorySelector/CategorySelector.reducer'
+import vote from '../../modules/Vote/Vote.reducer'
 
 export default history =>
   combineReducers({
     router: connectRouter(history),
     dapps,
     selectedCategory,
+    vote,
   })

src/modules/App/Router.jsx

@@ -3,15 +3,15 @@ import { Route, Switch } from 'react-router-dom'
 import Home from '../Home'
 import Filtered from '../Filtered'
 import RecentlyAdded from '../RecentlyAdded'
-import Vote from '../Vote'
 import Dapps from '../Dapps'
+import Vote from '../Vote'
 
-export default () => (
-  <Switch>
+export default () => [
+  <Switch key={1}>
     <Route exact path="/" component={Home} />
     <Route path="/categories" component={Filtered} />
     <Route path="/all" component={Dapps} />
     <Route path="/recently-added" component={RecentlyAdded} />
-    <Route path="/vote" component={Vote} />
-  </Switch>
-)
+  </Switch>,
+  <Vote key={2} />,
+]

src/modules/Home/Home.jsx

@@ -37,7 +37,7 @@ class Home extends React.Component {
             </div>
             <FeaturedDapps featured={featured} />
             <Categories />
-            {/* <HighestRanked /> */}
+            <HighestRanked />
             <RecentlyAdded />
             <Footer />
           </>

src/modules/RecentlyAdded/RecentlyAdded.module.scss

@@ -18,7 +18,15 @@
 
   @media (min-width: $desktop) {
     grid-auto-flow: row;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     overflow-x: hidden;
   }
+
+  @media (min-width: 970px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  @media (min-width: 1300px) {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
 }

src/modules/Vote/Vote.container.js

@@ -1,9 +1,7 @@
 import { connect } from 'react-redux'
 import Vote from './Vote'
 
-const mapDispatchToProps = dispatch => ({})
+const mapStateToProps = state => state.vote
+// const mapDispatchToProps = dispatch => ({})
 
-export default connect(
-  null,
-  mapDispatchToProps,
-)(Vote)
+export default connect(mapStateToProps)(Vote)

src/modules/Vote/Vote.jsx

@@ -1,11 +1,12 @@
 import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
+import PropTypes from 'prop-types'
 import ReactImageFallback from 'react-image-fallback'
 import styles from './Vote.module.scss'
 import sntIcon from '../../common/assets/images/SNT.svg'
 import CategoriesUtils from '../Categories/Categories.utils'
 import Categories from '../../common/utils/categories'
 import icon from '../../common/assets/images/icon.svg'
+import Modal from '../../common/components/Modal'
 
 const getCategoryName = category =>
   Categories.find(x => x.key === category).value
@@ -33,6 +34,7 @@ class Vote extends Component {
 
   render() {
     const { isUpvote, sntValue } = this.state
+    const { visible } = this.props
 
     // TODO: extract these to props
 
@@ -52,7 +54,7 @@ class Vote extends Component {
     const downvoteSNTcost = 3244
 
     return (
-      <div>
+      <Modal visible={visible}>
         <div className={styles.tabs}>
           <button
             className={isUpvote ? styles.active : ''}
@@ -145,11 +147,13 @@ class Vote extends Component {
             {isUpvote ? 'Upvote' : 'Downvote'}
           </button>
         </div>
-      </div>
+      </Modal>
     )
   }
 }
 
-Vote.propTypes = {}
+Vote.propTypes = {
+  visible: PropTypes.bool.isRequired,
+}
 
 export default Vote

src/modules/Vote/Vote.module.scss

@@ -37,7 +37,7 @@
 }
 
 .footer {
-  position: fixed;
+  // position: fixed;
   bottom: 0;
   width: 100%;
   text-align: center;
@@ -123,7 +123,8 @@
 .inputArea {
   text-align: center;
   width: 300px;
-  position: fixed;
+  position: relative;
+  // position: fixed;
   top: 40%;
 }
 

src/modules/Vote/Vote.reducer.js

@@ -0,0 +1,34 @@
+import voteState from '../../common/data/vote'
+import reducerUtil from '../../common/utils/reducer'
+
+const SHOW_UP_VOTE = 'SHOW_UP_VOTE'
+const SHOW_DOWN_VOTE = 'SHOW_DOWN_VOTE'
+
+export const showUpVoteAction = () => ({
+  type: SHOW_UP_VOTE,
+  payload: null,
+})
+
+export const showDownVoteAction = () => ({
+  type: SHOW_DOWN_VOTE,
+  payload: null,
+})
+
+const showUpVote = state => {
+  return Object.assign({}, state, {
+    visible: true,
+  })
+}
+
+const showDownVote = state => {
+  return Object.assign({}, state, {
+    visible: true,
+  })
+}
+
+const map = {
+  [SHOW_UP_VOTE]: showUpVote,
+  [SHOW_DOWN_VOTE]: showDownVote,
+}
+
+export default reducerUtil(map, voteState)