From 5bec6accc2b9f591f317ed4a821b263cbe4b8277 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Fri, 18 Aug 2017 13:09:40 -0400 Subject: [PATCH] mostly done refactor modals and settings, clean-up CHANGELOG --- CHANGELOG.md | 17 ++-- ui/js/app.js | 5 +- ui/js/component/app/view.jsx | 40 +-------- ui/js/component/fileActions/view.jsx | 4 +- ui/js/component/modalWelcome/view.jsx | 84 ------------------- ui/js/component/publishForm/view.jsx | 2 +- ui/js/component/rewardLink/view.jsx | 2 +- .../component/router/{index.jsx => index.js} | 0 ui/js/component/splash/view.jsx | 8 +- .../component/video/internal/play-button.jsx | 2 +- ui/js/component/walletSend/view.jsx | 2 +- ui/js/constants/modal_types.js | 3 +- ui/js/constants/settings.js | 5 ++ ui/js/{component => modal}/modal.js | 4 +- .../modalAuthFailure/index.js | 0 .../modalAuthFailure/view.jsx | 12 ++- .../modalCreditIntro}/index.js | 7 +- ui/js/modal/modalCreditIntro/view.jsx | 44 ++++++++++ .../modalDownloading/index.js | 0 .../modalDownloading/view.jsx | 4 +- .../{component => modal}/modalError/index.js | 0 .../{component => modal}/modalError/view.jsx | 2 +- .../modalFirstReward/index.js | 0 .../modalFirstReward/view.jsx | 2 +- .../modalIncompatibleDaemon/index.js | 0 .../modalIncompatibleDaemon/view.jsx | 4 +- .../modalInsufficientCredits/index.js | 0 .../modalInsufficientCredits/view.jsx | 2 +- .../modalRemoveFile/index.js | 0 .../modalRemoveFile/view.jsx | 4 +- ui/js/modal/modalRouter/index.js | 20 +++++ ui/js/modal/modalRouter/view.jsx | 60 +++++++++++++ .../modalUpgrade/index.js | 0 .../modalUpgrade/view.jsx | 2 +- ui/js/modal/modalWelcome/index.js | 17 ++++ ui/js/modal/modalWelcome/view.jsx | 32 +++++++ ui/js/page/settings/view.jsx | 7 +- ui/js/selectors/app.js | 8 +- ui/scss/component/_modal.scss | 2 +- 39 files changed, 242 insertions(+), 165 deletions(-) delete mode 100644 ui/js/component/modalWelcome/view.jsx rename ui/js/component/router/{index.jsx => index.js} (100%) create mode 100644 ui/js/constants/settings.js rename ui/js/{component => modal}/modal.js (98%) rename ui/js/{component => modal}/modalAuthFailure/index.js (100%) rename ui/js/{component => modal}/modalAuthFailure/view.jsx (63%) rename ui/js/{component/modalWelcome => modal/modalCreditIntro}/index.js (81%) create mode 100644 ui/js/modal/modalCreditIntro/view.jsx rename ui/js/{component => modal}/modalDownloading/index.js (100%) rename ui/js/{component => modal}/modalDownloading/view.jsx (95%) rename ui/js/{component => modal}/modalError/index.js (100%) rename ui/js/{component => modal}/modalError/view.jsx (97%) rename ui/js/{component => modal}/modalFirstReward/index.js (100%) rename ui/js/{component => modal}/modalFirstReward/view.jsx (97%) rename ui/js/{component => modal}/modalIncompatibleDaemon/index.js (100%) rename ui/js/{component => modal}/modalIncompatibleDaemon/view.jsx (89%) rename ui/js/{component => modal}/modalInsufficientCredits/index.js (100%) rename ui/js/{component => modal}/modalInsufficientCredits/view.jsx (93%) rename ui/js/{component => modal}/modalRemoveFile/index.js (100%) rename ui/js/{component => modal}/modalRemoveFile/view.jsx (95%) create mode 100644 ui/js/modal/modalRouter/index.js create mode 100644 ui/js/modal/modalRouter/view.jsx rename ui/js/{component => modal}/modalUpgrade/index.js (100%) rename ui/js/{component => modal}/modalUpgrade/view.jsx (93%) create mode 100644 ui/js/modal/modalWelcome/index.js create mode 100644 ui/js/modal/modalWelcome/view.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bdc2e57b..63f592cf8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,23 +8,24 @@ Web UI version numbers should always match the corresponding version of LBRY App ## [Unreleased] ### Added - * Added a new component, `FormFieldPrice` which is now used in Publish and Settings - * Added wallet backup guide reference - * Added feature: forward history - * + * Added a forward button and improved history behavior. Back/forward disable when unusable. + * Added a new component, `FormFieldPrice` which is now used in Publish and Settings. + * Added wallet backup guide reference. ### Changed * Updated to daemon [0.15](https://github.com/lbryio/lbry/releases). Most relevant changes for app are improved announcing of content and a fix for the daemon getting stuck running. - * Some form field refactoring as we progress towards form sanity. + * Continued to refine first-run process, process for new users, and introducing people to LBRY and LBRY credits. + * Changed the default price settings. * When an "Open" button is clicked on a show page, if the file fails to open, the app will try to open the file's folder. - * Removed confusing placeholder text from email input - * Updated several packages and fixed warnings in build process (all but the [fsevents warning](https://github.com/yarnpkg/yarn/issues/3738), which is rather dramatic) + * Some form field refactoring as we take baby steps towards form sanity. + * Replaced confusing placeholder text from email input. + * Refactored modal and settings logic. + * Updated several packages and fixed warnings in build process (all but the [fsevents warning](https://github.com/yarnpkg/yarn/issues/3738), which is a rather dramatic debate) ### Fixed * Tiles will no longer be blurry on hover (Windows only bug) * Removed placeholder values from price selection form fields, which was causing confusion that these were real values (#426) * Fixed showing "other currency" help tip in publish form, which was caused due to not "setting" state for price - * Now using setState in formFieldPrice * Public page now properly checks for all required fields are filled * Fixed pagination styling for pages > 5 (#416) * Fixed sizing on squat videos (#419) diff --git a/ui/js/app.js b/ui/js/app.js index c5bfdcfbd..2504b72e8 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -1,12 +1,13 @@ import store from "store.js"; import lbry from "./lbry.js"; +import * as settings from "constants/settings"; const env = ENV; const config = { ...require(`./config/${env}`), }; -const language = lbry.getClientSetting("language") - ? lbry.getClientSetting("language") +const language = lbry.getClientSetting(settings.LANGUAGE) + ? lbry.getClientSetting(settings.LANGUAGE) : "en"; const i18n = require("y18n")({ directory: "app/locales", diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index e8ebbcd09..32cb74247 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -1,15 +1,8 @@ import React from "react"; -import Router from "component/router"; +import Router from "component/router/index"; import Header from "component/header"; -import ModalError from "component/modalError"; -import ModalAuthFailure from "component/modalAuthFailure"; -import ModalDownloading from "component/modalDownloading"; -import ModalInsufficientCredits from "component/modalInsufficientCredits"; -import ModalUpgrade from "component/modalUpgrade"; -import ModalWelcome from "component/modalWelcome"; -import ModalFirstReward from "component/modalFirstReward"; +import ModalRouter from "modal/modalRouter"; import lbry from "lbry"; -import * as modals from "constants/modal_types"; class App extends React.PureComponent { componentWillMount() { @@ -34,50 +27,23 @@ class App extends React.PureComponent { fetchRewardedContent(); - this.showWelcome(this.props); - this.scrollListener = () => this.props.recordScroll(window.scrollY); window.addEventListener("scroll", this.scrollListener); } - componentWillReceiveProps(nextProps) { - this.showWelcome(nextProps); - } - - showWelcome(props) { - const { isWelcomeAcknowledged, openWelcomeModal, user } = props; - - if ( - !isWelcomeAcknowledged && - user && - !user.is_reward_approved && - !user.is_identity_verified - ) { - openWelcomeModal(); - } - } - componentWillUnmount() { window.removeEventListener("scroll", this.scrollListener); } render() { - const { modal } = this.props; - return (
- {modal == modals.UPGRADE && } - {modal == modals.DOWNLOADING && } - {modal == modals.ERROR && } - {modal == modals.INSUFFICIENT_CREDITS && } - {modal == modals.WELCOME && } - {modal == modals.FIRST_REWARD && } - {modal == modals.AUTHENTICATION_FAILURE && } +
); } diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index df624a345..7b3463d3d 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -1,11 +1,11 @@ import React from "react"; import { Icon, BusyMessage } from "component/common"; import FilePrice from "component/filePrice"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; import Link from "component/link"; import { ToolTip } from "component/tooltip"; import { DropDownMenu, DropDownMenuItem } from "component/menu"; -import ModalRemoveFile from "component/modalRemoveFile"; +import ModalRemoveFile from "modal/modalRemoveFile"; import * as modals from "constants/modal_types"; class FileActions extends React.PureComponent { diff --git a/ui/js/component/modalWelcome/view.jsx b/ui/js/component/modalWelcome/view.jsx deleted file mode 100644 index 42ed50a15..000000000 --- a/ui/js/component/modalWelcome/view.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import { Modal } from "component/modal"; -import { CreditAmount } from "component/common"; -import Link from "component/link"; -import RewardLink from "component/rewardLink"; - -class ModalWelcome extends React.PureComponent { - constructor(props) { - super(props); - this.state = { - isFirstScreen: true, - }; - } - - render() { - const { closeModal, totalRewardValue, verifyAccount } = this.props; - - const totalRewardRounded = Math.round(totalRewardValue / 10) * 10; - - return ( - - {this.state.isFirstScreen && -
-

{__("Welcome to LBRY")}

-

- {__( - "Using LBRY is like dating a centaur. Totally normal up top, and" - )} - {" "}{__("way different")} {__("underneath.")} -

-

{__("Up top, LBRY is similar to popular media sites.")}

-

- {__( - "Below, LBRY is controlled by users -- you -- via blockchain and decentralization." - )} -

-
- { - this.setState({ isFirstScreen: false }); - }} - label={__("Continue")} - /> -
-
} - {!this.state.isFirstScreen && -
-

{__("Claim Your Credits")}

-

- The LBRY network is controlled and powered by credits called{" "} - LBC, a blockchain asset. -

-

- {__("New patrons receive ")} {" "} - {totalRewardValue - ? - : {__("credits")}} - {" "} {__("in rewards for usage and influence of the network.")} -

-

- {__( - "You'll also earn weekly bonuses for checking out the greatest new stuff." - )} -

-
- - -
-
} - - ); - } -} - -export default ModalWelcome; diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index 4b0d2e3d3..39bce0d4d 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/ui/js/component/publishForm/view.jsx @@ -5,7 +5,7 @@ import FormField from "component/formField"; import { FormRow } from "component/form.js"; import Link from "component/link"; import FormFieldPrice from "component/formFieldPrice"; -import Modal from "component/modal"; +import Modal from "modal/modal"; import { BusyMessage } from "component/common"; import ChannelSection from "./internal/channelSection"; diff --git a/ui/js/component/rewardLink/view.jsx b/ui/js/component/rewardLink/view.jsx index 36a504d3e..1f36dd86e 100644 --- a/ui/js/component/rewardLink/view.jsx +++ b/ui/js/component/rewardLink/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Modal from "component/modal"; +import Modal from "modal/modal"; import Link from "component/link"; const RewardLink = props => { diff --git a/ui/js/component/router/index.jsx b/ui/js/component/router/index.js similarity index 100% rename from ui/js/component/router/index.jsx rename to ui/js/component/router/index.js diff --git a/ui/js/component/splash/view.jsx b/ui/js/component/splash/view.jsx index cb99615b4..7d6952b16 100644 --- a/ui/js/component/splash/view.jsx +++ b/ui/js/component/splash/view.jsx @@ -1,9 +1,9 @@ import React from "react"; -import lbry from "../../lbry.js"; +import lbry from "lbry.js"; import LoadScreen from "../load_screen.js"; -import ModalIncompatibleDaemon from "../modalIncompatibleDaemon"; -import ModalUpgrade from "component/modalUpgrade"; -import ModalDownloading from "component/modalDownloading"; +import ModalIncompatibleDaemon from "modal/modalIncompatibleDaemon"; +import ModalUpgrade from "modal/modalUpgrade"; +import ModalDownloading from "modal/modalDownloading"; export class SplashScreen extends React.PureComponent { static propTypes = { diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx index 266d3b617..bb49d05b4 100644 --- a/ui/js/component/video/internal/play-button.jsx +++ b/ui/js/component/video/internal/play-button.jsx @@ -1,7 +1,7 @@ import React from "react"; import FilePrice from "component/filePrice"; import Link from "component/link"; -import Modal from "component/modal"; +import Modal from "modal/modal"; class VideoPlayButton extends React.PureComponent { componentDidMount() { diff --git a/ui/js/component/walletSend/view.jsx b/ui/js/component/walletSend/view.jsx index 1fe377b7d..444acca4a 100644 --- a/ui/js/component/walletSend/view.jsx +++ b/ui/js/component/walletSend/view.jsx @@ -1,6 +1,6 @@ import React from "react"; import Link from "component/link"; -import Modal from "component/modal"; +import Modal from "modal/modal"; import { FormRow } from "component/form"; const WalletSend = props => { diff --git a/ui/js/constants/modal_types.js b/ui/js/constants/modal_types.js index 153996e00..d6686f15f 100644 --- a/ui/js/constants/modal_types.js +++ b/ui/js/constants/modal_types.js @@ -6,4 +6,5 @@ export const INSUFFICIENT_CREDITS = "insufficient_credits"; export const UPGRADE = "upgrade"; export const WELCOME = "welcome"; export const FIRST_REWARD = "first_reward"; -export const AUTHENTICATION_FAILURE = "auth_failure"; \ No newline at end of file +export const AUTHENTICATION_FAILURE = "auth_failure"; +export const CREDIT_INTRO = "credit_intro"; diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js new file mode 100644 index 000000000..5187baea1 --- /dev/null +++ b/ui/js/constants/settings.js @@ -0,0 +1,5 @@ +export const CREDIT_INTRO_ACKNOWLEDGED = "credit_intro_acknowledged"; +export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged"; +export const LANGUAGE = "language"; +export const SHOW_NSFW = "showNsfw"; +export const SHOW_UNAVAILABLE = "showUnavailable"; diff --git a/ui/js/component/modal.js b/ui/js/modal/modal.js similarity index 98% rename from ui/js/component/modal.js rename to ui/js/modal/modal.js index 7a1955624..8061bb678 100644 --- a/ui/js/component/modal.js +++ b/ui/js/modal/modal.js @@ -1,7 +1,7 @@ import React from "react"; import ReactModal from "react-modal"; -import Link from "component/link"; -import app from "../app.js"; +import Link from "component/link/index"; +import app from "app.js"; export class Modal extends React.PureComponent { static propTypes = { diff --git a/ui/js/component/modalAuthFailure/index.js b/ui/js/modal/modalAuthFailure/index.js similarity index 100% rename from ui/js/component/modalAuthFailure/index.js rename to ui/js/modal/modalAuthFailure/index.js diff --git a/ui/js/component/modalAuthFailure/view.jsx b/ui/js/modal/modalAuthFailure/view.jsx similarity index 63% rename from ui/js/component/modalAuthFailure/view.jsx rename to ui/js/modal/modalAuthFailure/view.jsx index d3abe8112..ada5e2340 100644 --- a/ui/js/component/modalAuthFailure/view.jsx +++ b/ui/js/modal/modalAuthFailure/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; class ModalAuthFailure extends React.PureComponent { render() { @@ -12,11 +12,17 @@ class ModalAuthFailure extends React.PureComponent { type="confirm" confirmButtonLabel={__("Reload")} abortButtonLabel={__("Continue")} - onConfirmed={() => { window.location.reload() }} + onConfirmed={() => { + window.location.reload(); + }} onAborted={close} >

{__("Authentication Failure")}

-

{__("If reloading does not fix this, or you see this at every start up, please email help@lbry.io.")}

+

+ {__( + "If reloading does not fix this, or you see this at every start up, please email help@lbry.io." + )} +

); } diff --git a/ui/js/component/modalWelcome/index.js b/ui/js/modal/modalCreditIntro/index.js similarity index 81% rename from ui/js/component/modalWelcome/index.js rename to ui/js/modal/modalCreditIntro/index.js index 3cb4a44d6..0626eee8f 100644 --- a/ui/js/component/modalWelcome/index.js +++ b/ui/js/modal/modalCreditIntro/index.js @@ -9,7 +9,8 @@ import { makeSelectRewardByType, selectTotalRewardValue, } from "selectors/rewards"; -import ModalWelcome from "./view"; +import * as settings from "constants/settings"; +import ModalCreditIntro from "./view"; const select = (state, props) => { const selectHasClaimed = makeSelectHasClaimedReward(), @@ -24,7 +25,7 @@ const select = (state, props) => { const perform = dispatch => () => { const closeModal = () => { - dispatch(doSetClientSetting("welcome_acknowledged", true)); + dispatch(doSetClientSetting(settings.CREDIT_INTRO_ACKNOWLEDGED, true)); dispatch(doCloseModal()); }; @@ -37,4 +38,4 @@ const perform = dispatch => () => { }; }; -export default connect(select, perform)(ModalWelcome); +export default connect(select, perform)(ModalCreditIntro); diff --git a/ui/js/modal/modalCreditIntro/view.jsx b/ui/js/modal/modalCreditIntro/view.jsx new file mode 100644 index 000000000..8a2b7b500 --- /dev/null +++ b/ui/js/modal/modalCreditIntro/view.jsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Modal } from "modal/modal"; +import { CreditAmount } from "component/common"; +import Link from "component/link/index"; + +const ModalCreditIntro = props => { + const { closeModal, totalRewardValue, verifyAccount } = props; + + const totalRewardRounded = Math.round(totalRewardValue / 10) * 10; + + return ( + +
+

{__("Claim Your Credits")}

+

+ The LBRY network is controlled and powered by credits called{" "} + LBC, a blockchain asset. +

+

+ {__("New patrons receive ")} {" "} + {totalRewardValue + ? + : {__("credits")}} + {" "} {__("in rewards for usage and influence of the network.")} +

+

+ {__( + "You'll also earn weekly bonuses for checking out the greatest new stuff." + )} +

+
+ + +
+
+ + ); +}; + +export default ModalCreditIntro; diff --git a/ui/js/component/modalDownloading/index.js b/ui/js/modal/modalDownloading/index.js similarity index 100% rename from ui/js/component/modalDownloading/index.js rename to ui/js/modal/modalDownloading/index.js diff --git a/ui/js/component/modalDownloading/view.jsx b/ui/js/modal/modalDownloading/view.jsx similarity index 95% rename from ui/js/component/modalDownloading/view.jsx rename to ui/js/modal/modalDownloading/view.jsx index 9b5bed354..373f83ae1 100644 --- a/ui/js/component/modalDownloading/view.jsx +++ b/ui/js/modal/modalDownloading/view.jsx @@ -1,7 +1,7 @@ import React from "react"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; import { Line } from "rc-progress"; -import Link from "component/link"; +import Link from "component/link/index"; class ModalDownloading extends React.PureComponent { render() { diff --git a/ui/js/component/modalError/index.js b/ui/js/modal/modalError/index.js similarity index 100% rename from ui/js/component/modalError/index.js rename to ui/js/modal/modalError/index.js diff --git a/ui/js/component/modalError/view.jsx b/ui/js/modal/modalError/view.jsx similarity index 97% rename from ui/js/component/modalError/view.jsx rename to ui/js/modal/modalError/view.jsx index 49b4e51c7..ceb998dee 100644 --- a/ui/js/component/modalError/view.jsx +++ b/ui/js/modal/modalError/view.jsx @@ -1,6 +1,6 @@ import React from "react"; import lbry from "lbry"; -import { ExpandableModal } from "component/modal"; +import { ExpandableModal } from "modal/modal"; class ModalError extends React.PureComponent { render() { diff --git a/ui/js/component/modalFirstReward/index.js b/ui/js/modal/modalFirstReward/index.js similarity index 100% rename from ui/js/component/modalFirstReward/index.js rename to ui/js/modal/modalFirstReward/index.js diff --git a/ui/js/component/modalFirstReward/view.jsx b/ui/js/modal/modalFirstReward/view.jsx similarity index 97% rename from ui/js/component/modalFirstReward/view.jsx rename to ui/js/modal/modalFirstReward/view.jsx index 1fc0540bb..5317bd9d9 100644 --- a/ui/js/component/modalFirstReward/view.jsx +++ b/ui/js/modal/modalFirstReward/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; import { CreditAmount } from "component/common"; class ModalFirstReward extends React.PureComponent { diff --git a/ui/js/component/modalIncompatibleDaemon/index.js b/ui/js/modal/modalIncompatibleDaemon/index.js similarity index 100% rename from ui/js/component/modalIncompatibleDaemon/index.js rename to ui/js/modal/modalIncompatibleDaemon/index.js diff --git a/ui/js/component/modalIncompatibleDaemon/view.jsx b/ui/js/modal/modalIncompatibleDaemon/view.jsx similarity index 89% rename from ui/js/component/modalIncompatibleDaemon/view.jsx rename to ui/js/modal/modalIncompatibleDaemon/view.jsx index bf5c3a84d..e4b1e5561 100644 --- a/ui/js/component/modalIncompatibleDaemon/view.jsx +++ b/ui/js/modal/modalIncompatibleDaemon/view.jsx @@ -1,6 +1,6 @@ import React from "react"; -import { Modal } from "component/modal"; -import Link from "component/link"; +import { Modal } from "modal/modal"; +import Link from "component/link/index"; class ModalIncompatibleDaemon extends React.PureComponent { render() { diff --git a/ui/js/component/modalInsufficientCredits/index.js b/ui/js/modal/modalInsufficientCredits/index.js similarity index 100% rename from ui/js/component/modalInsufficientCredits/index.js rename to ui/js/modal/modalInsufficientCredits/index.js diff --git a/ui/js/component/modalInsufficientCredits/view.jsx b/ui/js/modal/modalInsufficientCredits/view.jsx similarity index 93% rename from ui/js/component/modalInsufficientCredits/view.jsx rename to ui/js/modal/modalInsufficientCredits/view.jsx index fd214cd11..681fc4c9f 100644 --- a/ui/js/component/modalInsufficientCredits/view.jsx +++ b/ui/js/modal/modalInsufficientCredits/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; class ModalInsufficientCredits extends React.PureComponent { render() { diff --git a/ui/js/component/modalRemoveFile/index.js b/ui/js/modal/modalRemoveFile/index.js similarity index 100% rename from ui/js/component/modalRemoveFile/index.js rename to ui/js/modal/modalRemoveFile/index.js diff --git a/ui/js/component/modalRemoveFile/view.jsx b/ui/js/modal/modalRemoveFile/view.jsx similarity index 95% rename from ui/js/component/modalRemoveFile/view.jsx rename to ui/js/modal/modalRemoveFile/view.jsx index e4d819386..6dfa9152f 100644 --- a/ui/js/component/modalRemoveFile/view.jsx +++ b/ui/js/modal/modalRemoveFile/view.jsx @@ -1,6 +1,6 @@ import React from "react"; -import { Modal } from "component/modal"; -import FormField from "component/formField"; +import { Modal } from "modal/modal"; +import FormField from "component/formField/index"; class ModalRemoveFile extends React.PureComponent { constructor(props) { diff --git a/ui/js/modal/modalRouter/index.js b/ui/js/modal/modalRouter/index.js new file mode 100644 index 000000000..971f83139 --- /dev/null +++ b/ui/js/modal/modalRouter/index.js @@ -0,0 +1,20 @@ +import React from "react"; +import { connect } from "react-redux"; +import { selectCurrentModal } from "selectors/app"; +import { doOpenModal } from "actions/app"; +import { selectWelcomeModalAcknowledged } from "selectors/app"; +import { selectUser } from "selectors/user"; +import ModalRouter from "./view"; +import * as modals from "constants/modal_types"; + +const select = (state, props) => ({ + modal: selectCurrentModal(state), + isWelcomeAcknowledged: selectWelcomeModalAcknowledged(state), + user: selectUser(state), +}); + +const perform = dispatch => ({ + openWelcomeModal: () => dispatch(doOpenModal(modals.WELCOME)), +}); + +export default connect(select, perform)(ModalRouter); diff --git a/ui/js/modal/modalRouter/view.jsx b/ui/js/modal/modalRouter/view.jsx new file mode 100644 index 000000000..d2280821e --- /dev/null +++ b/ui/js/modal/modalRouter/view.jsx @@ -0,0 +1,60 @@ +import React from "react"; +import ModalError from "modal/modalError"; +import ModalAuthFailure from "modal/modalAuthFailure"; +import ModalDownloading from "modal/modalDownloading"; +import ModalInsufficientCredits from "modal/modalInsufficientCredits"; +import ModalUpgrade from "modal/modalUpgrade"; +import ModalWelcome from "modal/modalWelcome"; +import ModalFirstReward from "modal/modalFirstReward"; +import * as modals from "constants/modal_types"; +import ModalCreditIntro from "modal/modalCreditIntro"; + +class ModalRouter extends React.PureComponent { + componentWillMount() { + this.showWelcome(this.props); + } + + componentWillReceiveProps(nextProps) { + this.showWelcome(nextProps); + } + + showWelcome(props) { + const { isWelcomeAcknowledged, openWelcomeModal, user } = props; + + if ( + !isWelcomeAcknowledged && + user && + !user.is_reward_approved && + !user.is_identity_verified + ) { + openWelcomeModal(); + } + } + + render() { + const { modal } = this.props; + + switch (modal) { + case modals.UPGRADE: + return ; + case modals.DOWNLOADING: + return ; + case modals.ERROR: + return ; + case modals.INSUFFICIENT_CREDITS: + return ; + case modals.WELCOME: + return ; + case modals.FIRST_REWARD: + return ; + case modals.AUTHENTICATION_FAILURE: + return ; + case modals.CREDIT_INTRO: + return ; + default: + return null; + } + } +} + +export default ModalRouter; diff --git a/ui/js/component/modalUpgrade/index.js b/ui/js/modal/modalUpgrade/index.js similarity index 100% rename from ui/js/component/modalUpgrade/index.js rename to ui/js/modal/modalUpgrade/index.js diff --git a/ui/js/component/modalUpgrade/view.jsx b/ui/js/modal/modalUpgrade/view.jsx similarity index 93% rename from ui/js/component/modalUpgrade/view.jsx rename to ui/js/modal/modalUpgrade/view.jsx index 2d364bd31..a55d9ae31 100644 --- a/ui/js/component/modalUpgrade/view.jsx +++ b/ui/js/modal/modalUpgrade/view.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Modal } from "component/modal"; +import { Modal } from "modal/modal"; class ModalUpgrade extends React.PureComponent { render() { diff --git a/ui/js/modal/modalWelcome/index.js b/ui/js/modal/modalWelcome/index.js new file mode 100644 index 000000000..1b62eba42 --- /dev/null +++ b/ui/js/modal/modalWelcome/index.js @@ -0,0 +1,17 @@ +import React from "react"; +import * as settings from "constants/settings"; +import * as modals from "constants/modal_types"; +import { connect } from "react-redux"; +import { doCloseModal, doOpenModal } from "actions/app"; +import { doSetClientSetting } from "actions/settings"; +import ModalWelcome from "./view"; + +const perform = dispatch => () => ({ + closeModal: () => { + dispatch(doSetClientSetting(settings.FIRST_RUN_ACKNOWLEDGED, true)); + dispatch(doCloseModal()); + dispatch(doOpenModal(modals.CREDIT_INTRO)); + }, +}); + +export default connect(null, perform)(ModalWelcome); diff --git a/ui/js/modal/modalWelcome/view.jsx b/ui/js/modal/modalWelcome/view.jsx new file mode 100644 index 000000000..85b33a224 --- /dev/null +++ b/ui/js/modal/modalWelcome/view.jsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Modal } from "modal/modal"; +import Link from "component/link/index"; + +const ModalWelcome = props => { + const { closeModal } = props; + + return ( + +
+

{__("Welcome to LBRY")}

+

+ {__( + "Using LBRY is like dating a centaur. Totally normal up top, and" + )} + {" "}{__("way different")} {__("underneath.")} +

+

{__("Up top, LBRY is similar to popular media sites.")}

+

+ {__( + "Below, LBRY is controlled by users -- you -- via blockchain and decentralization." + )} +

+
+ +
+
+ + ); +}; + +export default ModalWelcome; diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index e796847bd..275adae72 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -2,6 +2,7 @@ import React from "react"; import FormField from "component/formField"; import { FormRow } from "component/form.js"; import SubHeader from "component/subHeader"; +import * as settings from "constants/settings"; import lbry from "lbry.js"; import Link from "component/link"; import FormFieldPrice from "component/formFieldPrice"; @@ -17,8 +18,8 @@ class SettingsPage extends React.PureComponent { this.state = { // isMaxUpload: daemonSettings && daemonSettings.max_upload != 0, // isMaxDownload: daemonSettings && daemonSettings.max_download != 0, - showUnavailable: lbry.getClientSetting("showUnavailable"), - language: lbry.getClientSetting("language"), + showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE), + language: lbry.getClientSetting(settings.LANGUAGE), clearingCache: false, }; } @@ -92,7 +93,7 @@ class SettingsPage extends React.PureComponent { // } onShowNsfwChange(event) { - this.props.setClientSetting("showNsfw", event.target.checked); + this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked); } // onLanguageChange(language) { diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index 80e66466d..574494c7f 100644 --- a/ui/js/selectors/app.js +++ b/ui/js/selectors/app.js @@ -1,5 +1,6 @@ import { createSelector } from "reselect"; import { parseQueryParams, toQueryString } from "util/query_params"; +import * as settings from "constants/settings.js"; import lbry from "lbry"; import lbryuri from "lbryuri"; @@ -202,9 +203,14 @@ export const selectSnackBarSnacks = createSelector( snackBar => snackBar.snacks || [] ); +export const selectCreditsIntroAcknowledged = createSelector( + _selectState, + state => lbry.getClientSetting(settings.CREDIT_INTRO_ACKNOWLEDGED) +); + export const selectWelcomeModalAcknowledged = createSelector( _selectState, - state => lbry.getClientSetting("welcome_acknowledged") + state => lbry.getClientSetting(settings.FIRST_RUN_ACKNOWLEDGED) ); export const selectBadgeNumber = createSelector( diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss index c28ba313e..4ebba6799 100644 --- a/ui/scss/component/_modal.scss +++ b/ui/scss/component/_modal.scss @@ -73,7 +73,7 @@ max-width: none; width: 400px; } -.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/ +.error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/ border: 1px solid #eee; padding: 8px; list-style: none;