beginnings of new flow

ui/js/actions/app.js

@@ -8,11 +8,13 @@ import {
   selectPageTitle,
   selectCurrentPage,
   selectCurrentParams,
+  selectWelcomeModalAcknowledged,
 } from "selectors/app";
 import { doSearch } from "actions/search";
 import { doFetchDaemonSettings } from "actions/settings";
 import { doAuthenticate } from "actions/user";
 import { doFileList } from "actions/file_info";
+import * as modals from "constants/modal_types";
 
 const { remote, ipcRenderer, shell } = require("electron");
 const path = require("path");
@@ -219,12 +221,16 @@ export function doAlertError(errorList) {
 
 export function doDaemonReady() {
   return function(dispatch, getState) {
+    const showWelcome = !selectWelcomeModalAcknowledged(getState());
     dispatch(doAuthenticate());
     dispatch({
       type: types.DAEMON_READY,
     });
     dispatch(doFetchDaemonSettings());
     dispatch(doFileList());
+    if (showWelcome) {
+      dispatch(doOpenModal(modals.WELCOME));
+    }
   };
 }
 

ui/js/actions/content.js

@@ -15,8 +15,8 @@ import { selectBadgeNumber } from "selectors/app";
 import { selectTotalDownloadProgress } from "selectors/file_info";
 import setBadge from "util/setBadge";
 import setProgressBar from "util/setProgressBar";
-import { doFileList } from "actions/file_info";
 import batchActions from "util/batchActions";
+import * as modals from "constants/modal_types";
 
 const { ipcRenderer } = require("electron");
 
@@ -293,7 +293,7 @@ export function doPurchaseUri(uri, purchaseModalName) {
     }
 
     if (cost > balance) {
-      dispatch(doOpenModal("notEnoughCredits"));
+      dispatch(doOpenModal(modals.INSUFFICIENT_CREDITS));
     } else {
       dispatch(doOpenModal(purchaseModalName));
     }

ui/js/component/app/view.jsx

@@ -3,10 +3,11 @@ import Router from "component/router";
 import Header from "component/header";
 import ModalError from "component/modalError";
 import ModalDownloading from "component/modalDownloading";
+import ModalInsufficientCredits from "component/modalInsufficientCredits";
 import ModalUpgrade from "component/modalUpgrade";
 import ModalWelcome from "component/modalWelcome";
 import lbry from "lbry";
-import { Line } from "rc-progress";
+import * as modals from "constants/modal_types";
 
 class App extends React.PureComponent {
   componentWillMount() {
@@ -32,10 +33,11 @@ class App extends React.PureComponent {
         <div id="main-content">
           <Router />
         </div>
-        {modal == "upgrade" && <ModalUpgrade />}
-        {modal == "downloading" && <ModalDownloading />}
-        {modal == "error" && <ModalError />}
-        {modal == "welcome" && <ModalWelcome />}
+        {modal == modals.UPGRADE && <ModalUpgrade />}
+        {modal == modals.DOWNLOADING && <ModalDownloading />}
+        {modal == modals.ERROR && <ModalError />}
+        {modal == modals.INSUFFICIENT_CREDITS && <ModalInsufficientCredits />}
+        {modal == modals.WELCOME && <ModalWelcome />}
       </div>
     );
   }

ui/js/component/fileActions/view.jsx

@@ -176,13 +176,6 @@ class FileActions extends React.PureComponent {
           </strong>{" "}
           {__("credits")}.
         </Modal>
-        <Modal
-          isOpen={modal == "notEnoughCredits"}
-          contentLabel={__("Not enough credits")}
-          onConfirmed={closeModal}
-        >
-          {__("You don't have enough LBRY credits to pay for this stream.")}
-        </Modal>
         <Modal
           isOpen={modal == "timedOut"}
           contentLabel={__("Download failed")}

ui/js/component/modalInsufficientCredits/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doCloseModal, doNavigate } from "actions/app";
+import ModalInsufficientCredits from "./view";
+
+const select = state => ({});
+
+const perform = dispatch => ({
+  addFunds: () => {
+    dispatch(doNavigate("/rewards"));
+    dispatch(doCloseModal());
+  },
+  closeModal: () => dispatch(doCloseModal()),
+});
+
+export default connect(select, perform)(ModalInsufficientCredits);

ui/js/component/modalInsufficientCredits/view.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Modal } from "component/modal";
+
+class ModalInsufficientCredits extends React.PureComponent {
+  render() {
+    const { addFunds, closeModal } = this.props;
+
+    return (
+      <Modal
+        isOpen={true}
+        type="confirm"
+        contentLabel={__("Not enough credits")}
+        confirmButtonLabel={__("Get Credits")}
+        abortButtonLabel={__("Cancel")}
+        onAborted={closeModal}
+        onConfirmed={addFunds}
+      >
+        {__("More LBRY credits are required to purchase this.")}
+      </Modal>
+    );
+  }
+}
+
+export default ModalInsufficientCredits;

ui/js/component/modalUpgrade/view.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Modal } from "component/modal";
-import { downloadUpgrade, skipUpgrade } from "actions/app";
 
 class ModalUpgrade extends React.PureComponent {
   render() {

ui/js/component/modalWelcome/index.js

@@ -1,11 +1,11 @@
 import React from "react";
 import rewards from "rewards";
 import { connect } from "react-redux";
-import { doCloseModal } from "actions/app";
+import { doCloseModal, doNavigate } from "actions/app";
+import { doSetClientSetting } from "actions/settings";
 import { selectUserIsRewardApproved } from "selectors/user";
 import {
   makeSelectHasClaimedReward,
-  makeSelectClaimRewardError,
   makeSelectRewardByType,
 } from "selectors/rewards";
 import ModalWelcome from "./view";
@@ -21,8 +21,19 @@ const select = (state, props) => {
   };
 };
 
-const perform = dispatch => ({
-  closeModal: () => dispatch(doCloseModal()),
-});
+const perform = dispatch => () => {
+  const closeModal = () => {
+    dispatch(doSetClientSetting("welcome_acknowledged", true));
+    dispatch(doCloseModal());
+  };
+
+  return {
+    verifyAccount: () => {
+      closeModal();
+      dispatch(doNavigate("/rewards"));
+    },
+    closeModal: closeModal,
+  };
+};
 
 export default connect(select, perform)(ModalWelcome);

ui/js/component/modalWelcome/view.jsx

@@ -6,7 +6,13 @@ import RewardLink from "component/rewardLink";
 
 class ModalWelcome extends React.PureComponent {
   render() {
-    const { closeModal, hasClaimed, isRewardApproved, reward } = this.props;
+    const {
+      closeModal,
+      hasClaimed,
+      isRewardApproved,
+      reward,
+      verifyAccount,
+    } = this.props;
 
     return !hasClaimed
       ? <Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY">
@@ -29,13 +35,20 @@ class ModalWelcome extends React.PureComponent {
               {" "}{isRewardApproved ? __("Here's a nickel, kid.") : ""}
             </p>
             <div className="text-center">
-              {isRewardApproved
-                ? <RewardLink reward_type="new_user" button="primary" />
-                : <Link
-                    button="primary"
-                    onClick={closeModal}
-                    label={__("Continue")}
-                  />}
+              {isRewardApproved &&
+                <RewardLink reward_type="new_user" button="primary" />}
+              {!isRewardApproved &&
+                <Link
+                  button="primary"
+                  onClick={closeModal}
+                  label={__("Continue")}
+                />}
+              {!isRewardApproved &&
+                <Link
+                  button="alt"
+                  onClick={verifyAccount}
+                  label={__("Do Account Thing")}
+                />}
             </div>
           </section>
         </Modal>

ui/js/component/video/internal/play-button.jsx

@@ -78,13 +78,6 @@ class VideoPlayButton extends React.PureComponent {
           icon={icon}
           onClick={this.onWatchClick.bind(this)}
         />
-        <Modal
-          contentLabel={__("Not enough credits")}
-          isOpen={modal == "notEnoughCredits"}
-          onConfirmed={closeModal}
-        >
-          {__("You don't have enough LBRY credits to pay for this stream.")}
-        </Modal>
         <Modal
           type="confirm"
           isOpen={modal == "affirmPurchaseAndPlay"}

ui/js/constants/modal_types.js

@@ -1,2 +1,6 @@
-export const WELCOME = "welcome";
 export const CONFIRM_FILE_REMOVE = "confirmFileRemove";
+export const DOWNLOADING = "downloading";
+export const ERROR = "error";
+export const INSUFFICIENT_CREDITS = "insufficient_credits";
+export const UPGRADE = "upgrade";
+export const WELCOME = "welcome";

ui/js/main.js

@@ -9,7 +9,6 @@ import SplashScreen from "component/splash.js";
 import AuthOverlay from "component/authOverlay";
 import { doChangePath, doNavigate, doDaemonReady } from "actions/app";
 import { toQueryString } from "util/query_params";
-import { selectBadgeNumber } from "selectors/app";
 import * as types from "constants/action_types";
 
 const env = ENV;
@@ -97,19 +96,6 @@ const updateProgress = () => {
 
 const initialState = app.store.getState();
 
-// import whyDidYouUpdate from "why-did-you-update";
-// if (env === "development") {
-//   /*
-// 		https://github.com/garbles/why-did-you-update
-// 		"A function that monkey patches React and notifies you in the console when
-// 		potentially unnecessary re-renders occur."
-//
-// 		Just checks if props change between updates. Can be fixed by manually
-// 		adding a check in shouldComponentUpdate or using React.PureComponent
-// 	*/
-//   whyDidYouUpdate(React);
-// }
-
 var init = function() {
   function onDaemonReady() {
     window.sessionStorage.setItem("loaded", "y"); //once we've made it here once per session, we don't need to show splash again
@@ -117,7 +103,7 @@ var init = function() {
 
     ReactDOM.render(
       <Provider store={store}>
-        <div><AuthOverlay /><App /><SnackBar /></div>
+        <div><App /><SnackBar /></div>
       </Provider>,
       canvas
     );

ui/js/selectors/app.js

@@ -187,6 +187,11 @@ export const selectSnackBarSnacks = createSelector(
   snackBar => snackBar.snacks || []
 );
 
+export const selectWelcomeModalAcknowledged = createSelector(
+  _selectState,
+  state => lbry.getClientSetting("welcome_acknowledged")
+);
+
 export const selectBadgeNumber = createSelector(
   _selectState,
   state => state.badgeNumber

ui/package.json

@@ -72,8 +72,7 @@
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.4",
     "webpack-notifier": "^1.5.0",
-    "webpack-target-electron-renderer": "^0.4.0",
-    "why-did-you-update": "0.0.8"
+    "webpack-target-electron-renderer": "^0.4.0"
   },
   "lint-staged": {
     "gitDir": "../",