properly split welcome modal logic

ui/js/actions/user.js

@@ -184,7 +184,6 @@ export function doFetchInviteStatus() {
     lbryio
       .call("user", "invite_status")
       .then(status => {
-        console.log(status);
         dispatch({
           type: types.USER_INVITE_STATUS_FETCH_SUCCESS,
           data: {

ui/js/component/app/index.js

@@ -1,30 +1,22 @@
 import React from "react";
 import { connect } from "react-redux";
-import { selectCurrentModal } from "selectors/app";
 import {
   doCheckUpgradeAvailable,
-  doOpenModal,
   doAlertError,
   doRecordScroll,
 } from "actions/app";
 import { doFetchRewardedContent } from "actions/content";
-
 import { doUpdateBalance } from "actions/wallet";
-import { selectWelcomeModalAcknowledged } from "selectors/app";
 import { selectUser } from "selectors/user";
 import App 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 => ({
   alertError: errorList => dispatch(doAlertError(errorList)),
   checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
-  openWelcomeModal: () => dispatch(doOpenModal(modals.WELCOME)),
   updateBalance: balance => dispatch(doUpdateBalance(balance)),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),

ui/js/constants/settings.js

@@ -1,5 +1,6 @@
+/*hardcoded names still exist for these in reducers/settings.js - only discovered when debugging*/
 export const CREDIT_INTRO_ACKNOWLEDGED = "credit_intro_acknowledged";
-export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged";
+export const NEW_USER_ACKNOWLEDGED = "welcome_acknowledged";
 export const LANGUAGE = "language";
 export const SHOW_NSFW = "showNsfw";
 export const SHOW_UNAVAILABLE = "showUnavailable";

ui/js/modal/modalRouter/index.js

@@ -1,20 +1,26 @@
 import React from "react";
 import { connect } from "react-redux";
-import { selectCurrentModal } from "selectors/app";
+import { selectCurrentModal, selectCurrentPage } from "selectors/app";
 import { doOpenModal } from "actions/app";
-import { selectWelcomeModalAcknowledged } from "selectors/app";
+import { makeSelectClientSetting } from "selectors/settings";
 import { selectUser } from "selectors/user";
+import * as settings from "constants/settings";
 import ModalRouter from "./view";
-import * as modals from "constants/modal_types";
 
 const select = (state, props) => ({
   modal: selectCurrentModal(state),
-  isWelcomeAcknowledged: selectWelcomeModalAcknowledged(state),
+  page: selectCurrentPage(state),
+  isWelcomeAcknowledged: makeSelectClientSetting(
+    settings.NEW_USER_ACKNOWLEDGED
+  )(state),
+  isCreditIntroAcknowledged: makeSelectClientSetting(
+    settings.CREDIT_INTRO_ACKNOWLEDGED
+  )(state),
   user: selectUser(state),
 });
 
 const perform = dispatch => ({
-  openWelcomeModal: () => dispatch(doOpenModal(modals.WELCOME)),
+  openModal: modal => dispatch(doOpenModal(modal)),
 });
 
 export default connect(select, perform)(ModalRouter);

ui/js/modal/modalRouter/view.jsx

@@ -11,23 +11,50 @@ import ModalCreditIntro from "modal/modalCreditIntro";
 
 class ModalRouter extends React.PureComponent {
   componentWillMount() {
-    this.showWelcome(this.props);
+    this.showTransitionModals(this.props);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.showWelcome(nextProps);
+    this.showTransitionModals(nextProps);
   }
 
-  showWelcome(props) {
-    const { isWelcomeAcknowledged, openWelcomeModal, user } = props;
+  showTransitionModals(props) {
+    const { modal } = props;
 
+    if (modal) {
+      return;
+    }
+
+    [
+      this.checkShowWelcome.bind(this),
+      this.checkShowCreditIntro.bind(this),
+    ].find(func => func(props));
+  }
+
+  checkShowWelcome(props) {
+    const { isWelcomeAcknowledged, openModal, user } = props;
     if (
       !isWelcomeAcknowledged &&
       user &&
       !user.is_reward_approved &&
       !user.is_identity_verified
     ) {
-      openWelcomeModal();
+      openModal(modals.WELCOME);
+      return true;
+    }
+  }
+
+  checkShowCreditIntro(props) {
+    const { page, isCreditIntroAcknowledged, openModal, user } = props;
+
+    if (
+      !isCreditIntroAcknowledged &&
+      user &&
+      !user.is_reward_approved &&
+      !user.is_identity_verified
+    ) {
+      openModal(modals.CREDIT_INTRO);
+      return true;
     }
   }
 

ui/js/modal/modalWelcome/index.js

@@ -8,9 +8,9 @@ import ModalWelcome from "./view";
 
 const perform = dispatch => () => ({
   closeModal: () => {
-    dispatch(doSetClientSetting(settings.FIRST_RUN_ACKNOWLEDGED, true));
+    console.log("Make 'em welcome");
+    dispatch(doSetClientSetting(settings.NEW_USER_ACKNOWLEDGED, true));
     dispatch(doCloseModal());
-    dispatch(doOpenModal(modals.CREDIT_INTRO));
   },
 });
 

ui/js/reducers/settings.js

@@ -1,12 +1,16 @@
 import * as types from "constants/action_types";
-import LANGUAGES from "constants/languages";
+import * as settings from "constants/settings";
 import lbry from "lbry";
 
 const reducers = {};
 const defaultState = {
   clientSettings: {
     showNsfw: lbry.getClientSetting("showNsfw"),
-    language: lbry.getClientSetting("language"),
+    welcome_acknowledged: lbry.getClientSetting(settings.NEW_USER_ACKNOWLEDGED),
+    credit_intro_acknowledged: lbry.getClientSetting(
+      settings.CREDIT_INTRO_ACKNOWLEDGED
+    ),
+    language: lbry.getClientSetting(settings.LANGUAGE)
   },
   languages: {},
 };

ui/js/selectors/app.js

@@ -1,7 +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";
 
 export const _selectState = state => state.app || {};
@@ -213,16 +212,6 @@ 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(settings.FIRST_RUN_ACKNOWLEDGED)
-);
-
 export const selectBadgeNumber = createSelector(
   _selectState,
   state => state.badgeNumber

ui/js/selectors/settings.js

@@ -12,6 +12,13 @@ export const selectClientSettings = createSelector(
   state => state.clientSettings || {}
 );
 
+export const makeSelectClientSetting = setting => {
+  return createSelector(
+    selectClientSettings,
+    settings => (settings ? settings[setting] : undefined)
+  );
+};
+
 export const selectSettingsIsGenerous = createSelector(
   selectDaemonSettings,
   settings => settings && settings.is_generous_host