NUX: Refactor step site topic state (#29736)

* Adding siteVertical to the state tree. * Granularizing selectors to fetch individual properties. Migrating submit action from site topic actions. * Replacing siteTopic state usage with siteVertical state * Simplify function return syntax * Remove `siteTopic` state tree files. * Update client/signup/site-mockup/index.jsx Updating selector name to correct one: `getSiteVerticalName` Co-Authored-By: ramonjd <[email protected]> * Update client/signup/site-mockup/index.jsx Updating selector name to the correct one: `getSiteVerticalName` Co-Authored-By: ramonjd <[email protected]>
Automattic · Dec 27, 2018 · f182283 · f182283
1 parent d722f8a
commit f182283
Show file tree

Hide file tree

Showing 21 changed files with 181 additions and 143 deletions.
diff --git a/client/lib/signup/step-actions.js b/client/lib/signup/step-actions.js
@@ -24,7 +24,7 @@ import { getDesignType } from 'state/signup/steps/design-type/selectors';
 import { getSiteTitle } from 'state/signup/steps/site-title/selectors';
 import { getSurveyVertical, getSurveySiteType } from 'state/signup/steps/survey/selectors';
 import { getSiteType } from 'state/signup/steps/site-type/selectors';
-import { getSignupStepsSiteTopic } from 'state/signup/steps/site-topic/selectors';
+import { getSiteVerticalName } from 'state/signup/steps/site-vertical/selectors';
 import { getSiteInformation } from 'state/signup/steps/site-information/selectors';
 import getSiteId from 'state/selectors/get-site-id';
 import { getSiteGoals } from 'state/signup/steps/site-goals/selectors';
@@ -104,10 +104,10 @@ export function createSiteOrDomain( callback, dependencies, data, reduxStore ) {
 	}
 }
 
-// We are experimenting making site topic a separate step from the survey.
-// Once we've decided to fully move away from the survey form, we can just keep the site topic here.
+// We are experimenting making site topic (site vertical name) a separate step from the survey.
+// Once we've decided to fully move away from the survey form, we can just keep the site vertical name here.
 function getSiteVertical( state ) {
-	return ( getSignupStepsSiteTopic( state ) || getSurveyVertical( state ) ).trim();
+	return ( getSiteVerticalName( state ) || getSurveyVertical( state ) ).trim();
 }
 
 export function createSiteWithCart(

diff --git a/client/lib/signup/test/step-actions.js b/client/lib/signup/test/step-actions.js
@@ -64,7 +64,9 @@ describe( 'createSiteWithCart()', () => {
 			getState: () => ( {
 				signup: {
 					steps: {
-						siteTopic,
+						siteVertical: {
+							name: siteTopic,
+						},
 						survey: {
 							vertical: 'should not use this',
 						},

diff --git a/client/signup/main.jsx b/client/signup/main.jsx
@@ -61,7 +61,7 @@ import { getSignupDependencyStore } from 'state/signup/dependency-store/selector
 import { getSignupProgress } from 'state/signup/progress/selectors';
 import { setSurvey } from 'state/signup/steps/survey/actions';
 import { submitSiteType } from 'state/signup/steps/site-type/actions';
-import { submitSiteTopic } from 'state/signup/steps/site-topic/actions';
+import { submitSiteVertical } from 'state/signup/steps/site-vertical/actions';
 
 // Current directory dependencies
 import steps from './config/steps';
@@ -280,7 +280,7 @@ class Signup extends React.Component {
 				surveyQuestion: vertical,
 			} );
 
-			this.props.submitSiteTopic( vertical );
+			this.props.submitSiteVertical( { name: vertical } );
 
 			// Track our landing page verticals
 			if ( isValidLandingPageVertical( vertical ) ) {
@@ -643,7 +643,7 @@ export default connect(
 	{
 		setSurvey,
 		submitSiteType,
-		submitSiteTopic,
+		submitSiteVertical,
 		loadTrackingTool,
 		trackAffiliateReferral: affiliateReferral,
 	},

diff --git a/client/signup/site-mockup/index.jsx b/client/signup/site-mockup/index.jsx
@@ -14,7 +14,7 @@ import { translate } from 'i18n-calypso';
 import SiteMockup from './site-mockup';
 import { getSiteTitle } from 'state/signup/steps/site-title/selectors';
 import { getSiteType } from 'state/signup/steps/site-type/selectors';
-import { getSignupStepsSiteTopic } from 'state/signup/steps/site-topic/selectors';
+import { getSiteVerticalName } from 'state/signup/steps/site-vertical/selectors';
 import { getSiteInformation } from 'state/signup/steps/site-information/selectors';
 import { getVerticalData } from './mock-data';
 
@@ -80,7 +80,7 @@ class SiteMockups extends Component {
 }
 
 export default connect( state => {
-	const vertical = getSignupStepsSiteTopic( state );
+	const vertical = getSiteVerticalName( state );
 	return {
 		title: getSiteTitle( state ) || translate( 'Your New Website' ),
 		siteInformation: getSiteInformation( state ),

diff --git a/client/signup/steps/site-topic/index.jsx b/client/signup/steps/site-topic/index.jsx
@@ -15,8 +15,8 @@ import Button from 'components/button';
 import StepWrapper from 'signup/step-wrapper';
 import FormFieldset from 'components/forms/form-fieldset';
 import SuggestionSearch from 'components/suggestion-search';
-import { submitSiteTopic, setSiteTopic } from 'state/signup/steps/site-topic/actions';
-import { getSignupStepsSiteTopic } from 'state/signup/steps/site-topic/selectors';
+import { submitSiteVertical, setSiteVertical } from 'state/signup/steps/site-vertical/actions';
+import { getSiteVerticalName } from 'state/signup/steps/site-vertical/selectors';
 import { getSiteType } from 'state/signup/steps/site-type/selectors';
 import { recordTracksEvent } from 'state/analytics/actions';
 import SignupActions from 'lib/signup/actions';
@@ -150,20 +150,20 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 			} )
 		);
 
-		dispatch( submitSiteTopic( siteTopic ) );
+		dispatch( submitSiteVertical( { name: siteTopic } ) );
 
 		goToNextStep( flowName );
 	},
 
 	setSiteTopic: siteTopic => {
-		dispatch( setSiteTopic( siteTopic ) );
+		dispatch( setSiteVertical( { name: siteTopic } ) );
 	},
 } );
 
 export default localize(
 	connect(
 		state => ( {
-			siteTopic: getSignupStepsSiteTopic( state ),
+			siteTopic: getSiteVerticalName( state ),
 			siteType: getSiteType( state ),
 		} ),
 		mapDispatchToProps

diff --git a/client/state/action-types.js b/client/state/action-types.js
@@ -907,6 +907,7 @@ export const SIGNUP_STEPS_SITE_TITLE_SET = 'SIGNUP_STEPS_SITE_TITLE_SET';
 export const SIGNUP_STEPS_SITE_TOPIC_SET = 'SIGNUP_STEPS_SITE_TOPIC_SET';
 export const SIGNUP_STEPS_SITE_TYPE_SET = 'SIGNUP_STEPS_SITE_TYPE_SET';
 export const SIGNUP_STEPS_SURVEY_SET = 'SIGNUP_STEPS_SURVEY_SET';
+export const SIGNUP_STEPS_SITE_VERTICAL_SET = 'SIGNUP_STEPS_SITE_VERTICAL_SET';
 export const SIMPLE_PAYMENTS_PRODUCT_GET = 'SIMPLE_PAYMENTS_PRODUCT_GET';
 export const SIMPLE_PAYMENTS_PRODUCT_RECEIVE = 'SIMPLE_PAYMENTS_PRODUCT_RECEIVE';
 export const SIMPLE_PAYMENTS_PRODUCTS_LIST = 'SIMPLE_PAYMENTS_PRODUCTS_LIST';

diff --git a/client/state/signup/steps/reducer.js b/client/state/signup/steps/reducer.js
@@ -6,21 +6,21 @@
 
 import designType from './design-type/reducer';
 import siteTitle from './site-title/reducer';
-import siteTopic from './site-topic/reducer';
 import siteInformation from './site-information/reducer';
 import siteGoals from './site-goals/reducer';
 import userExperience from './user-experience/reducer';
 import siteType from './site-type/reducer';
+import siteVertical from './site-vertical/reducer';
 import { combineReducers } from 'state/utils';
 import survey from './survey/reducer';
 
 export default combineReducers( {
 	designType,
 	siteTitle,
-	siteTopic,
 	siteInformation,
 	siteGoals,
 	userExperience,
 	siteType,
+	siteVertical,
 	survey,
 } );
diff --git a/client/state/signup/steps/site-topic/actions.js b/client/state/signup/steps/site-topic/actions.js
diff --git a/client/state/signup/steps/site-topic/reducer.js b/client/state/signup/steps/site-topic/reducer.js
diff --git a/client/state/signup/steps/site-topic/schema.js b/client/state/signup/steps/site-topic/schema.js
diff --git a/client/state/signup/steps/site-topic/selectors.js b/client/state/signup/steps/site-topic/selectors.js
diff --git a/client/state/signup/steps/site-topic/test/actions.js b/client/state/signup/steps/site-topic/test/actions.js
diff --git a/client/state/signup/steps/site-topic/test/reducer.js b/client/state/signup/steps/site-topic/test/reducer.js
diff --git a/client/state/signup/steps/site-topic/test/selectors.js b/client/state/signup/steps/site-topic/test/selectors.js
diff --git a/client/state/signup/steps/site-vertical/actions.js b/client/state/signup/steps/site-vertical/actions.js
@@ -0,0 +1,24 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+
+import { SIGNUP_STEPS_SITE_VERTICAL_SET } from 'state/action-types';
+import SignupActions from 'lib/signup/actions';
+
+export function setSiteVertical( { name, slug } ) {
+	return {
+		type: SIGNUP_STEPS_SITE_VERTICAL_SET,
+		name,
+		slug,
+	};
+}
+
+// It's a thunk since there is still Flux involved, so it can't be a plain object yet.
+// If the signup state is fully reduxified, we can just keep setSiteVertical() and
+// keep all the dependency filling and progress filling in a middleware.
+export const submitSiteVertical = ( { name, slug } ) => dispatch => {
+	dispatch( setSiteVertical( { name, slug } ) );
+	SignupActions.submitSignupStep( { stepName: 'site-topic' }, [], { siteTopic: name } );
+};
diff --git a/client/state/signup/steps/site-vertical/reducer.js b/client/state/signup/steps/site-vertical/reducer.js
@@ -0,0 +1,26 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+
+import { SIGNUP_COMPLETE_RESET, SIGNUP_STEPS_SITE_VERTICAL_SET } from 'state/action-types';
+
+import { createReducer } from 'state/utils';
+import { siteVerticalSchema } from './schema';
+
+export default createReducer(
+	{},
+	{
+		[ SIGNUP_STEPS_SITE_VERTICAL_SET ]: ( state, { name, slug } ) => {
+			return {
+				name,
+				slug,
+			};
+		},
+		[ SIGNUP_COMPLETE_RESET ]: () => {
+			return {};
+		},
+	},
+	siteVerticalSchema
+);
diff --git a/client/state/signup/steps/site-vertical/schema.js b/client/state/signup/steps/site-vertical/schema.js
@@ -0,0 +1,13 @@
+/** @format */
+export const siteVerticalSchema = {
+	type: 'object',
+	additionalProperties: false,
+	properties: {
+		name: {
+			type: 'string',
+		},
+		slug: {
+			type: 'string',
+		},
+	},
+};
diff --git a/client/state/signup/steps/site-vertical/selectors.js b/client/state/signup/steps/site-vertical/selectors.js
@@ -0,0 +1,15 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import { get } from 'lodash';
+
+export function getSiteVerticalName( state ) {
+	return get( state, 'signup.steps.siteVertical.name', '' );
+}
+
+export function getSiteVerticalSlug( state ) {
+	return get( state, 'signup.steps.siteVertical.slug', '' );
+}
diff --git a/client/state/signup/steps/site-vertical/test/actions.js b/client/state/signup/steps/site-vertical/test/actions.js
@@ -0,0 +1,21 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import { setSiteVertical } from '../actions';
+import { SIGNUP_STEPS_SITE_VERTICAL_SET } from 'state/action-types';
+
+describe( 'setSiteVertical()', () => {
+	test( 'should return the expected action object', () => {
+		const siteVertical = {
+			name: 'heureux',
+			slug: 'happy',
+		};
+
+		expect( setSiteVertical( siteVertical ) ).toEqual( {
+			type: SIGNUP_STEPS_SITE_VERTICAL_SET,
+			...siteVertical,
+		} );
+	} );
+} );