State: Type route path & query

client/blocks/login/login-form.jsx

@@ -687,8 +687,8 @@ export default connect(
 			socialAccountLinkService: getSocialAccountLinkService( state ),
 			userEmail:
 				props.userEmail ||
-				getInitialQueryArguments( state ).email_address ||
-				getCurrentQueryArguments( state ).email_address,
+				getInitialQueryArguments( state )?.email_address ||
+				getCurrentQueryArguments( state )?.email_address,
 			wccomFrom: get( getCurrentQueryArguments( state ), 'wccom-from' ),
 			currentQuery: getCurrentQueryArguments( state ),
 		};

client/data/home/use-home-layout-query-params.ts

@@ -1,4 +1,5 @@
 import config from '@automattic/calypso-config';
+import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import { getCurrentQueryArguments } from 'calypso/state/selectors/get-current-query-arguments';
 
@@ -8,7 +9,8 @@ export interface HomeLayoutQueryParams {
 }
 
 export function useHomeLayoutQueryParams(): HomeLayoutQueryParams {
-	const { dev, view } = useSelector( getCurrentQueryArguments ) as any;
+	const dev = get( useSelector( getCurrentQueryArguments ), 'dev', undefined );
+	const view = get( useSelector( getCurrentQueryArguments ), 'view', undefined );
 
 	return {
 		dev: dev === 'true' || ( ! dev && config.isEnabled( 'home/layout-dev' ) ) || undefined,

client/login/magic-login/request-login-email-form.jsx

@@ -189,8 +189,8 @@ const mapState = ( state ) => {
 		emailRequested: getMagicLoginRequestedEmailSuccessfully( state ),
 		userEmail:
 			getLastCheckedUsernameOrEmail( state ) ||
-			getCurrentQueryArguments( state ).email_address ||
-			getInitialQueryArguments( state ).email_address,
+			getCurrentQueryArguments( state )?.email_address ||
+			getInitialQueryArguments( state )?.email_address,
 	};
 };
 

client/login/wp-login/index.jsx

@@ -313,8 +313,8 @@ export default connect(
 		oauth2Client: getCurrentOAuth2Client( state ),
 		isLoginView: ! props.twoFactorAuthType && ! props.socialConnect,
 		emailQueryParam:
-			getCurrentQueryArguments( state ).email_address ||
-			getInitialQueryArguments( state ).email_address,
+			getCurrentQueryArguments( state )?.email_address ||
+			getInitialQueryArguments( state )?.email_address,
 	} ),
 	{
 		recordPageView: withEnhancers( recordPageView, [ enhanceWithSiteType ] ),

client/state/route/actions.ts

@@ -0,0 +1,27 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/ui/init';
+import { ROUTE_SET, ROUTE_CLEAR_LAST_NON_EDITOR } from 'calypso/state/action-types';
+import { RouteClearActionCreator, RouteSetActionCreator } from 'calypso/state/route/types';
+
+/**
+ * Returns an action object signalling that the current route is to be changed
+ */
+export const setRoute: RouteSetActionCreator = ( path, query = {} ) => {
+	return {
+		type: ROUTE_SET,
+		path,
+		query,
+	};
+};
+
+/**
+ * Action to forget what the last non-editor route was.
+ */
+export const clearLastNonEditorRoute: RouteClearActionCreator = () => {
+	return {
+		type: ROUTE_CLEAR_LAST_NON_EDITOR,
+	};
+};

client/state/route/last-non-editor-route/reducer.js → client/state/route/last-non-editor-route/reducer.ts

@@ -1,3 +1,10 @@
+/**
+ * External dependencies
+ */
+import { Reducer, AnyAction } from 'redux';
+/**
+ * Internal dependencies
+ */
 import { ROUTE_CLEAR_LAST_NON_EDITOR, ROUTE_SET } from 'calypso/state/action-types';
 
 /**
@@ -8,7 +15,7 @@ import { ROUTE_CLEAR_LAST_NON_EDITOR, ROUTE_SET } from 'calypso/state/action-typ
  */
 const editorPattern = /^\/(block-editor|page[^s]|post[^s])/;
 
-export const lastNonEditorRouteReducer = ( state = '', action ) => {
+export const lastNonEditorRouteReducer: Reducer< string, AnyAction > = ( state = '', action ) => {
 	const { path, type } = action;
 	switch ( type ) {
 		case ROUTE_SET:

client/state/route/path/reducer.js → client/state/route/path/reducer.ts

@@ -1,12 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Reducer, AnyAction } from 'redux';
+/**
+ * Internal dependencies
+ */
 import { ROUTE_SET } from 'calypso/state/action-types';
+import { PathState } from 'calypso/state/route/types';
 
 const initialState = {
 	initial: '',
 	current: '',
 	previous: '',
 };
 
-export const pathReducer = ( state = initialState, action ) => {
+export const pathReducer: Reducer< PathState, AnyAction > = ( state = initialState, action ) => {
 	const { path, type } = action;
 	switch ( type ) {
 		case ROUTE_SET:

client/state/route/query/reducer.ts

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { isEqual, omit } from 'lodash';
+import { Reducer, AnyAction } from 'redux';
+/**
+ * Internal dependencies
+ */
+import { ROUTE_SET } from 'calypso/state/action-types';
+import { Query, QueryState } from 'calypso/state/route/types';
+
+const timestamped = ( query: Query ): Query => ( {
+	...query,
+	_timestamp: Date.now(),
+} );
+
+const isEqualQuery = ( state: QueryState[ keyof QueryState ], query: Query ) =>
+	isEqual( omit( state, '_timestamp' ), omit( query, '_timestamp' ) );
+
+const initialReducer = ( state: QueryState[ 'initial' ], query: Query ) =>
+	state === false ? timestamped( query ) : state;
+
+const currentReducer = ( state: QueryState[ 'current' ], query: Query ) =>
+	! isEqualQuery( state, query ) ? timestamped( query ) : state;
+
+const initialState: QueryState = {
+	initial: false,
+	current: false,
+	previous: false,
+};
+
+export const queryReducer: Reducer< QueryState, AnyAction > = ( state = initialState, action ) => {
+	const { query, type } = action;
+	switch ( type ) {
+		case ROUTE_SET:
+			return {
+				initial: initialReducer( state.initial, query ),
+				current: currentReducer( state.current, query ),
+				previous: state.current === false ? false : state.current,
+			};
+	}
+	return state;
+};
+
+export default queryReducer;

client/state/route/types.ts

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { Action } from 'redux';
+
+export type Query = {
+	[ key: string ]: string | number | undefined;
+	_timestamp?: number;
+};
+
+export type QueryState = {
+	initial: Query | false;
+	current: Query | false;
+	previous: Query | false;
+};
+
+export type PathState = {
+	initial: string;
+	current: string;
+	previous: string;
+};
+
+export type RouteState = {
+	lastNonEditorRoute: string;
+	path: PathState;
+	query: QueryState;
+};
+
+export type RouteClearActionCreator = () => Action;
+
+export type RouteSetActionCreator = ( path: string, query: Query ) => Action;

client/state/selectors/get-current-query-arguments.ts

@@ -0,0 +1,25 @@
+/* eslint-disable jsdoc/require-param */
+
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/route/init';
+
+/**
+ * Type dependencies
+ */
+import type { Query } from 'calypso/state/route/types';
+import type { IAppState } from 'calypso/state/types';
+
+/**
+ * Gets the last query parameters set by a ROUTE_SET action
+ *
+ * TODO: We would be better off not conditioning with null here.
+ * Kept for backwards compatibility in case any null checks.
+ * Investigate and refactor.
+ */
+export function getCurrentQueryArguments( state: IAppState ): Query | false | null {
+	return state?.route?.query?.current || null;
+}
+
+export default getCurrentQueryArguments;

client/state/selectors/get-current-route.ts

@@ -0,0 +1,25 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/route/init';
+
+/**
+ * Type dependencies
+ */
+import type { IAppState } from 'calypso/state/types';
+
+/**
+ * Gets the last route set by a ROUTE_SET action
+ *
+ * TODO: We would be better off not conditioning with null here.
+ * Kept for backwards compatibility in case any null checks.
+ * Investigate and refactor.
+ */
+export function getCurrentRoute(
+	state: IAppState
+): IAppState[ 'route' ][ 'path' ][ 'current' ] | null {
+	return state?.route?.path?.current || null;
+}
+
+export default getCurrentRoute;

client/state/types.ts

@@ -1,11 +1,13 @@
 import { DefaultRootState } from 'react-redux';
 import { IMarketplaceState } from 'calypso/state/marketplace/types';
 import { IPluginsState } from 'calypso/state/plugins/reducer';
+import { RouteState } from 'calypso/state/route/types';
 
 /**
  * This global app state is currently incomplete and should be completed as each state slice becomes typed
  * */
 export interface IAppState extends DefaultRootState {
 	plugins: IPluginsState;
 	marketplace: IMarketplaceState;
+	route: RouteState;
 }