From 49573a65b9e59ab828b24b9e4eb440d712a7c9a7 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 25 Sep 2018 20:12:07 -0400 Subject: [PATCH] add logic for reward codes --- .eslintrc.json | 3 +- package.json | 4 +- src/renderer/component/rewardTile/index.js | 11 ++- src/renderer/component/rewardTile/view.jsx | 6 +- src/renderer/modal/modalRewardCode/index.js | 28 +++++++ src/renderer/modal/modalRewardCode/view.jsx | 81 +++++++++++++++++++++ src/renderer/modal/modalRouter/view.jsx | 17 ++++- src/renderer/page/rewards/view.jsx | 9 +++ src/renderer/scss/component/_card.scss | 12 ++- src/renderer/scss/component/_modal.scss | 2 +- webpack.renderer.additions.js | 2 +- yarn.lock | 8 +- 12 files changed, 161 insertions(+), 22 deletions(-) create mode 100644 src/renderer/modal/modalRewardCode/index.js create mode 100644 src/renderer/modal/modalRewardCode/view.jsx diff --git a/.eslintrc.json b/.eslintrc.json index fb260f101..bb482f3f2 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -39,6 +39,7 @@ "no-return-assign": 0, "react/require-default-props": 0, "react/jsx-closing-tag-location": 0, - "jsx-a11y/no-noninteractive-element-to-interactive-role": 0 + "jsx-a11y/no-noninteractive-element-to-interactive-role": 0, + "class-methods-use-this": 0 } } diff --git a/package.json b/package.json index 914d5066c..0a4b70651 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9", - "lbryinc": "lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f", + "lbry-redux": "lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301", + "lbryinc": "lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9", "localforage": "^1.7.1", "mammoth": "^1.4.6", "mime": "^2.3.1", diff --git a/src/renderer/component/rewardTile/index.js b/src/renderer/component/rewardTile/index.js index ade2a1db9..5dc6eedd4 100644 --- a/src/renderer/component/rewardTile/index.js +++ b/src/renderer/component/rewardTile/index.js @@ -1,5 +1,12 @@ -import React from 'react'; import { connect } from 'react-redux'; +import { MODALS, doNotify } from 'lbry-redux'; import RewardTile from './view'; -export default connect(null, null)(RewardTile); +const perform = dispatch => ({ + openRewardCodeModal: () => dispatch(doNotify({ id: MODALS.REWARD_GENERATED_CODE })), +}); + +export default connect( + null, + perform +)(RewardTile); diff --git a/src/renderer/component/rewardTile/view.jsx b/src/renderer/component/rewardTile/view.jsx index 9bfcfc507..0bacd52ac 100644 --- a/src/renderer/component/rewardTile/view.jsx +++ b/src/renderer/component/rewardTile/view.jsx @@ -7,6 +7,7 @@ import { rewards } from 'lbryinc'; import * as icons from 'constants/icons'; type Props = { + openRewardCodeModal: () => void, reward: { id: string, reward_title: string, @@ -19,7 +20,7 @@ type Props = { }; const RewardTile = (props: Props) => { - const { reward } = props; + const { reward, openRewardCodeModal } = props; const claimed = !!reward.transaction_id; return ( @@ -27,6 +28,9 @@ const RewardTile = (props: Props) => {
{reward.reward_title}
{reward.reward_description}
+ {reward.reward_type === rewards.TYPE_GENERATED_CODE && ( +
+ + ); + } +} + +export default ModalRewardCode; diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx index 826f35a9c..d9683f148 100644 --- a/src/renderer/modal/modalRouter/view.jsx +++ b/src/renderer/modal/modalRouter/view.jsx @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import { MODALS } from 'lbry-redux'; import ModalError from 'modal/modalError'; @@ -27,13 +28,15 @@ import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload'; import ModalWalletEncrypt from 'modal/modalWalletEncrypt'; import ModalWalletDecrypt from 'modal/modalWalletDecrypt'; import ModalWalletUnlock from 'modal/modalWalletUnlock'; +import ModalRewardCode from 'modal/modalRewardCode'; type Props = { - modal: string, + notification: { id: string }, + notificationProps: {}, }; class ModalRouter extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -51,7 +54,7 @@ class ModalRouter extends React.PureComponent { } showTransitionModals(props) { - const { modal, modalProps, openModal, page } = props; + const { modal, openModal, page } = props; if (modal) { return; @@ -80,6 +83,8 @@ class ModalRouter extends React.PureComponent { if (!isWelcomeAcknowledged && user && !user.is_reward_approved && !user.is_identity_verified) { return MODALS.WELCOME; } + + return undefined; } checkShowEmail(props) { @@ -92,6 +97,8 @@ class ModalRouter extends React.PureComponent { ) { return MODALS.EMAIL_COLLECTION; } + + return undefined; } checkShowCreditIntro(props) { @@ -104,6 +111,8 @@ class ModalRouter extends React.PureComponent { ) { return MODALS.INSUFFICIENT_CREDITS; } + + return undefined; } isPaidShowPage(props) { @@ -177,6 +186,8 @@ class ModalRouter extends React.PureComponent { return ; case MODALS.WALLET_UNLOCK: return ; + case MODALS.REWARD_GENERATED_CODE: + return ; default: return null; } diff --git a/src/renderer/page/rewards/view.jsx b/src/renderer/page/rewards/view.jsx index 7f98b50e8..79f2095c3 100644 --- a/src/renderer/page/rewards/view.jsx +++ b/src/renderer/page/rewards/view.jsx @@ -7,6 +7,7 @@ import Button from 'component/button'; import Page from 'component/page'; import classnames from 'classnames'; import type { Reward } from 'types/reward'; +import { rewards as REWARD_TYPES } from 'lbryinc'; type Props = { doAuth: () => void, @@ -125,6 +126,14 @@ class RewardsPage extends React.PureComponent { 'card--disabled': isNotEligible, })} > + {rewards.map(reward => )} ); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index c8fcf54b2..11afc62f8 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -430,15 +430,13 @@ } .card__list--rewards { + column-count: 2; + column-gap: $spacing-vertical * 1/3; + .card { display: inline-block; - width: calc(50% - 10px); - margin-bottom: 20px; - vertical-align: top; - - &:not(:nth-child(2n + 1)) { - margin-left: 20px; - } + margin: 0 0 $spacing-vertical * 1/3; + width: 100%; } } diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss index 5c8120b42..f84e051ee 100644 --- a/src/renderer/scss/component/_modal.scss +++ b/src/renderer/scss/component/_modal.scss @@ -74,8 +74,8 @@ } .modal__header { + font-size: 2em; margin-bottom: $spacing-vertical * 2/3; - text-align: center; } .modal__buttons { diff --git a/webpack.renderer.additions.js b/webpack.renderer.additions.js index a04ecab0f..cb9523c55 100644 --- a/webpack.renderer.additions.js +++ b/webpack.renderer.additions.js @@ -31,7 +31,7 @@ module.exports = { }, plugins: isDev ? [ new FilewatcherPlugin({ - watchFileRegex: [require.resolve('lbry-redux')], + watchFileRegex: [require.resolve('lbry-redux'), require.resolve('lbryinc')], }), ] : [], }; diff --git a/yarn.lock b/yarn.lock index 2b2961765..45ca35bcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5662,16 +5662,16 @@ lbry-redux@lbryio/lbry-redux: proxy-polyfill "0.1.6" reselect "^3.0.0" -lbry-redux@lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9: +lbry-redux@lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/fa141b9175500b874bb77da0258e18d902e069b9" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c079b108c3bc4ba2b4fb85fb112b52cfc040c301" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0" -lbryinc@lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f: +lbryinc@lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/c09aa2645ecccb33c83e9a9545ff119232910f6f" + resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5050001a63bbde1c461c87dbc2b65f330f5aacc9" dependencies: lbry-redux lbryio/lbry-redux reselect "^3.0.0"