From e7bca9b6371f979693d08435b0417593d173b0bd Mon Sep 17 00:00:00 2001 From: Kamen Stoykov Date: Thu, 25 Apr 2019 17:36:48 +0300 Subject: [PATCH] modals & categories url issue & hightest rating mobile issue --- .../DappListItem/DappListItem.module.scss | 1 + src/common/components/Modal/Modal.jsx | 18 +- src/common/components/Modal/Modal.module.scss | 59 +++-- src/common/redux/reducers.js | 4 +- src/modules/App/Router.jsx | 2 +- .../Categories/Categories.container.js | 6 +- .../CategorySelector.container.js | 12 +- .../CategorySelector.reducer.js | 26 +- src/modules/Filtered/Filtered.container.js | 5 +- src/modules/Filtered/Filtered.jsx | 22 +- src/modules/Filtered/Filtered.selector.js | 16 +- .../HighestRanked/HighestRanked.module.scss | 10 +- src/modules/Vote/Vote.container.js | 10 +- src/modules/Vote/Vote.jsx | 83 +++--- src/modules/Vote/Vote.module.scss | 243 ++++++++++-------- src/modules/Vote/Vote.reducer.js | 13 + 16 files changed, 328 insertions(+), 202 deletions(-) diff --git a/src/common/components/DappListItem/DappListItem.module.scss b/src/common/components/DappListItem/DappListItem.module.scss index 8028825..33f95b7 100644 --- a/src/common/components/DappListItem/DappListItem.module.scss +++ b/src/common/components/DappListItem/DappListItem.module.scss @@ -4,6 +4,7 @@ font-family: $font; background: $background; display: flex; + height: calculateRem(145); margin: 0 calculateRem(16) calculateRem(11) calculateRem(16); position: relative; } diff --git a/src/common/components/Modal/Modal.jsx b/src/common/components/Modal/Modal.jsx index 2fd0c96..d9f57b5 100644 --- a/src/common/components/Modal/Modal.jsx +++ b/src/common/components/Modal/Modal.jsx @@ -3,7 +3,14 @@ import PropTypes from 'prop-types' import styles from './Modal.module.scss' const Modal = props => { - const { visible, children, modalClassName, contentClassName } = props + const { + visible, + children, + modalClassName, + windowClassName, + contentClassName, + onClickClose, + } = props return (
{ visible ? styles.active : '' }`} > -
-
+
+
+
+ + +
{visible && children}
@@ -21,17 +30,20 @@ const Modal = props => { Modal.defaultProps = { modalClassName: '', + windowClassName: '', contentClassName: '', } Modal.propTypes = { visible: PropTypes.bool.isRequired, modalClassName: PropTypes.string, + windowClassName: PropTypes.string, contentClassName: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]).isRequired, + onClickClose: PropTypes.func.isRequired, } export default Modal diff --git a/src/common/components/Modal/Modal.module.scss b/src/common/components/Modal/Modal.module.scss index fb82459..d96f136 100644 --- a/src/common/components/Modal/Modal.module.scss +++ b/src/common/components/Modal/Modal.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/variables'; + .wrapper { width: 100%; height: 100%; @@ -9,22 +11,40 @@ top: 0; pointer-events: none; opacity: 0; - background: rgba(0, 0, 0, 0.5); + background: rgba(255, 255, 255, 0.5); z-index: 4096; transition-property: opacity; transition-duration: 0.25s; .window { - width: 800px; - max-height: 90%; + width: 100%; line-height: normal; position: relative; - background: #f3f3f3; - box-shadow: 0px 0px 17px 0px #bbb; + border-radius: 16px; + background: #fff; + box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12); overflow-x: hidden; overflow-y: auto; } + + .close { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 8px; + top: 8px; + color: #fff; + font-size: 22px; + font-weight: 700; + border-radius: 50%; + background: #939ba1; + cursor: pointer; + transform: rotate(45deg); + } } .wrapper.active { @@ -32,22 +52,15 @@ 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; -// } +@media (min-width: $desktop) { + .wrapper { + .window { + width: 400px; + max-height: 90%; + } -// .PopupWindowWrapper { -// background:transparent; -// } - -// .PopupWindowWrapper > .PopupWindow { -// background:transparent; -// box-shadow:none; -// } + // .close { + // display:flex; + // } + } +} diff --git a/src/common/redux/reducers.js b/src/common/redux/reducers.js index 3d6a30f..2defed0 100644 --- a/src/common/redux/reducers.js +++ b/src/common/redux/reducers.js @@ -1,13 +1,13 @@ 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 selectedCategory from '../../modules/CategorySelector/CategorySelector.reducer' import vote from '../../modules/Vote/Vote.reducer' export default history => combineReducers({ router: connectRouter(history), dapps, - selectedCategory, + // selectedCategory, vote, }) diff --git a/src/modules/App/Router.jsx b/src/modules/App/Router.jsx index 6dbe35f..bfcdd47 100644 --- a/src/modules/App/Router.jsx +++ b/src/modules/App/Router.jsx @@ -9,7 +9,7 @@ import Vote from '../Vote' export default () => [ - + , diff --git a/src/modules/Categories/Categories.container.js b/src/modules/Categories/Categories.container.js index 0bc5191..0b63631 100644 --- a/src/modules/Categories/Categories.container.js +++ b/src/modules/Categories/Categories.container.js @@ -1,12 +1,12 @@ import { connect } from 'react-redux' import { push } from 'connected-react-router' -import { selectCategory } from '../CategorySelector/CategorySelector.reducer' +// import { selectCategory } from '../CategorySelector/CategorySelector.reducer' import Categories from './Categories' const mapDispatchToProps = dispatch => ({ select: category => { - dispatch(push('/categories')) - dispatch(selectCategory(category)) + dispatch(push(`/categories/${category}`)) + // dispatch(selectCategory(category)) }, }) diff --git a/src/modules/CategorySelector/CategorySelector.container.js b/src/modules/CategorySelector/CategorySelector.container.js index 1beba8c..eb26ed6 100644 --- a/src/modules/CategorySelector/CategorySelector.container.js +++ b/src/modules/CategorySelector/CategorySelector.container.js @@ -1,13 +1,17 @@ import { connect } from 'react-redux' +import { push } from 'connected-react-router' import CategorySelector from './CategorySelector' -import { selectCategory } from './CategorySelector.reducer' +// import { selectCategory } from './CategorySelector.reducer' -const mapStateToProps = state => ({ category: state.selectedCategory }) +// const mapStateToProps = state => ({ category: state.selectedCategory }) const mapDispatchToProps = dispatch => ({ - select: category => dispatch(selectCategory(category)), + select: category => { + dispatch(push(`/categories/${category}`)) + //dispatch(selectCategory(category)) + }, }) export default connect( - mapStateToProps, + null, mapDispatchToProps, )(CategorySelector) diff --git a/src/modules/CategorySelector/CategorySelector.reducer.js b/src/modules/CategorySelector/CategorySelector.reducer.js index fb9e97b..0e9dc60 100644 --- a/src/modules/CategorySelector/CategorySelector.reducer.js +++ b/src/modules/CategorySelector/CategorySelector.reducer.js @@ -1,19 +1,19 @@ -import reducerUtil from '../../common/utils/reducer' -import { EXCHANGES } from '../../common/data/categories' +// import reducerUtil from '../../common/utils/reducer' +// import { EXCHANGES } from '../../common/data/categories' -const UPDATE_CATEGORY = 'UPDATE_CATEGORY' +// const UPDATE_CATEGORY = 'UPDATE_CATEGORY' -export const selectCategory = category => ({ - type: UPDATE_CATEGORY, - payload: category, -}) +// export const selectCategory = category => ({ +// type: UPDATE_CATEGORY, +// payload: category, +// }) -const initialState = EXCHANGES +// const initialState = EXCHANGES -const categoryChange = (_, category) => category +// const categoryChange = (_, category) => category -const map = { - [UPDATE_CATEGORY]: categoryChange, -} +// const map = { +// [UPDATE_CATEGORY]: categoryChange, +// } -export default reducerUtil(map, initialState) +// export default reducerUtil(map, initialState) diff --git a/src/modules/Filtered/Filtered.container.js b/src/modules/Filtered/Filtered.container.js index 76d3bb0..8f04fd3 100644 --- a/src/modules/Filtered/Filtered.container.js +++ b/src/modules/Filtered/Filtered.container.js @@ -1,9 +1,10 @@ import { connect } from 'react-redux' import Filtered from './Filtered' -import filteredDapps from './Filtered.selector' +// import filteredDapps from './Filtered.selector' +// dapps: filteredDapps(state), const mapStateToProps = state => ({ - dapps: filteredDapps(state), + dapps: state.dapps, }) export default connect(mapStateToProps)(Filtered) diff --git a/src/modules/Filtered/Filtered.jsx b/src/modules/Filtered/Filtered.jsx index 5863ef0..5552cb1 100644 --- a/src/modules/Filtered/Filtered.jsx +++ b/src/modules/Filtered/Filtered.jsx @@ -1,24 +1,40 @@ import React from 'react' +import PropTypes from 'prop-types' import { DappListModel } from '../../common/utils/models' import CategorySelector from '../CategorySelector' import DappList from '../../common/components/DappList' import styles from './Filtered.module.scss' const Filtered = props => { - const { dapps } = props + const { dapps, match } = props + const result = + match !== undefined + ? dapps.filter(dapp => dapp.category === match.params.id) + : dapps return ( <> - +
- +
) } +Filtered.defaultProps = { + match: undefined, +} + Filtered.propTypes = { dapps: DappListModel.isRequired, + match: PropTypes.shape({ + params: PropTypes.shape({ + id: PropTypes.node, + }).isRequired, + }), } export default Filtered diff --git a/src/modules/Filtered/Filtered.selector.js b/src/modules/Filtered/Filtered.selector.js index 9b375aa..6471ee5 100644 --- a/src/modules/Filtered/Filtered.selector.js +++ b/src/modules/Filtered/Filtered.selector.js @@ -1,10 +1,10 @@ -import { createSelector } from 'reselect' +// import { createSelector } from 'reselect' -const getCategory = state => state.selectedCategory -const getDapps = state => state.dapps +// const getCategory = state => state.selectedCategory +// const getDapps = state => state.dapps -export default createSelector( - [getCategory, getDapps], - (category, dapps) => - category ? dapps.filter(dapp => dapp.category === category) : dapps, -) +// export default createSelector( +// [getCategory, getDapps], +// (category, dapps) => +// category ? dapps.filter(dapp => dapp.category === category) : dapps, +// ) diff --git a/src/modules/HighestRanked/HighestRanked.module.scss b/src/modules/HighestRanked/HighestRanked.module.scss index 100f7d0..b71379d 100644 --- a/src/modules/HighestRanked/HighestRanked.module.scss +++ b/src/modules/HighestRanked/HighestRanked.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; + } } diff --git a/src/modules/Vote/Vote.container.js b/src/modules/Vote/Vote.container.js index d22d48f..a2ac893 100644 --- a/src/modules/Vote/Vote.container.js +++ b/src/modules/Vote/Vote.container.js @@ -1,7 +1,13 @@ import { connect } from 'react-redux' import Vote from './Vote' +import { closeVoteAction } from './Vote.reducer' const mapStateToProps = state => state.vote -// const mapDispatchToProps = dispatch => ({}) +const mapDispatchToProps = dispatch => ({ + onClickClose: () => dispatch(closeVoteAction()), +}) -export default connect(mapStateToProps)(Vote) +export default connect( + mapStateToProps, + mapDispatchToProps, +)(Vote) diff --git a/src/modules/Vote/Vote.jsx b/src/modules/Vote/Vote.jsx index 32647f6..7d8b21a 100644 --- a/src/modules/Vote/Vote.jsx +++ b/src/modules/Vote/Vote.jsx @@ -29,12 +29,16 @@ class Vote extends Component { } handleChange(e) { - this.setState({ sntValue: e.target.value }) + const { value } = e.target + if (value !== '' && /^[1-9][0-9]*$/.test(value) === false) return + if (parseInt(value, 10) > 1571296) return + + this.setState({ sntValue: value }) } render() { const { isUpvote, sntValue } = this.state - const { visible } = this.props + const { visible, onClickClose } = this.props // TODO: extract these to props @@ -50,11 +54,16 @@ class Vote extends Component { const currentSNTamount = 23456 const categoryPosition = 2 - const upvoteSNTcost = 12422 + const upvoteSNTcost = currentSNTamount + parseInt(sntValue, 10) const downvoteSNTcost = 3244 return ( - +