My Jetpack: handle redirect when no connection

projects/packages/my-jetpack/_inc/components/connections-section/index.jsx

@@ -1,27 +1,18 @@
-/* global myJetpackRest */
-/* global myJetpackInitialState */
 /**
  * External dependencies
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { ConnectionStatusCard } from '@automattic/jetpack-connection';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 
 /**
  * Plan section component.
  *
  * @returns {object} ConnectionsSection React component.
  */
 export default function ConnectionsSection() {
-	const { apiRoot, apiNonce } = myJetpackRest;
-	const redirectAfterDisconnect = useCallback( () => {
-		window.location = myJetpackInitialState.topJetpackMenuItemUrl;
-	}, [] );
+	const { apiRoot, apiNonce, redirectUrl } = useMyJetpackConnection();
 	return (
-		<ConnectionStatusCard
-			apiRoot={ apiRoot }
-			apiNonce={ apiNonce }
-			redirectUri={ myJetpackInitialState.redirectUri }
-			onDisconnected={ redirectAfterDisconnect }
-		/>
+		<ConnectionStatusCard apiRoot={ apiRoot } apiNonce={ apiNonce } redirectUri={ redirectUrl } />
 	);
 }

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -21,6 +21,7 @@ import PlansSection from '../plans-section';
 import ProductCardsSection from '../product-cards-section';
 import useAnalytics from '../../hooks/use-analytics';
 import useNoticeWatcher, { useGlobalNotice } from '../../hooks/use-notice';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import './style.scss';
 
 /**
@@ -67,6 +68,12 @@ export default function MyJetpackScreen() {
 		recordEvent( 'jetpack_myjetpack_page_view' );
 	}, [ recordEvent ] );
 
+	// No render when site is not connected.
+	const { isSiteConnected } = useMyJetpackConnection( { redirect: true } );
+	if ( ! isSiteConnected ) {
+		return null;
+	}
+
 	return (
 		<div className="jp-my-jetpack-screen">
 			<AdminPage>

projects/packages/my-jetpack/_inc/hooks/use-analytics/index.js

@@ -1,20 +1,14 @@
-/* global myJetpackRest */
 /**
  * External dependencies
  */
 import { useEffect } from 'react';
 import jetpackAnalytics from '@automattic/jetpack-analytics';
-import { useConnection } from '@automattic/jetpack-connection';
+import useMyJetpackConnection from '../use-my-jetpack-connection';
 
 const useAnalytics = () => {
-	const { apiRoot, apiNonce } = myJetpackRest;
-
-	const { isUserConnected, userConnectionData } = useConnection( {
-		apiRoot,
-		apiNonce,
-	} );
-
+	const { isUserConnected, userConnectionData } = useMyJetpackConnection();
 	const { login, ID } = userConnectionData.currentUser.wpcomUser;
+
 	/**
 	 * Initialize tracks with user data.
 	 * Should run when we have a connected user.

projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js

@@ -0,0 +1,57 @@
+/* global myJetpackInitialState */
+
+/* global myJetpackRest */
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from 'react';
+import { useConnection } from '@automattic/jetpack-connection';
+
+/**
+ * React custom hook to get the site purchases data.
+ *
+ * @param   {object} options           - Options to pass to the hook.
+ * @param   {boolean} options.reditect - Perform a redirect when no connection is found.
+ * @returns {object} site purchases data
+ */
+export default function useMyJetpackConnection( options = { redirect: false } ) {
+	const { apiRoot, apiNonce } = myJetpackRest;
+	const { topJetpackMenuItemUrl } = myJetpackInitialState;
+	const { redirect } = options;
+	const connectionData = useConnection( { apiRoot, apiNonce } );
+
+	// Alias: https://github.com/Automattic/jetpack/blob/master/projects/packages/connection/src/class-rest-connector.php/#L315
+	const isSiteConnected = connectionData.isRegistered;
+
+	/*
+	 * When the site is not connect,
+	 * and the `redirect` option is set to `true`,
+	 * redirect to the Jetpack dashboard.
+	 */
+	useEffect( () => {
+		// Bail early when topJetpackMenuItemUrl is not defined.
+		if ( ! topJetpackMenuItemUrl ) {
+			return;
+		}
+
+		// Bail early when redirect mode is disabled.
+		if ( ! redirect ) {
+			return;
+		}
+
+		// When site is connected, bail early.
+		if ( isSiteConnected ) {
+			return;
+		}
+
+		window.location = topJetpackMenuItemUrl;
+	}, [ isSiteConnected, redirect, topJetpackMenuItemUrl ] );
+
+	return {
+		apiNonce,
+		apiRoot,
+		...connectionData,
+		isSiteConnected,
+		redirectUrl: topJetpackMenuItemUrl,
+	};
+}

projects/packages/my-jetpack/_inc/hooks/use-notice/index.js

@@ -1,16 +1,15 @@
-/* global myJetpackRest */
 /**
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useConnection } from '@automattic/jetpack-connection';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { STORE_ID } from '../../state/store';
+import useMyJetpackConnection from '../use-my-jetpack-connection';
 
 /**
  * React custom hook to get global notices.
@@ -34,13 +33,9 @@ export function useGlobalNotice() {
  * the hook dispatches an action to populate the global notice.
  */
 export default function useNoticeWatcher() {
-	const { apiRoot, apiNonce } = myJetpackRest;
 	const dispatch = useDispatch();
 
-	const { isUserConnected } = useConnection( {
-		apiRoot,
-		apiNonce,
-	} );
+	const { isUserConnected, redirectUrl } = useMyJetpackConnection();
 
 	useEffect( () => {
 		if ( ! isUserConnected ) {
@@ -54,11 +49,11 @@ export default function useNoticeWatcher() {
 					actions: [
 						{
 							label: __( 'Connect Jetpack now.', 'jetpack-my-jetpack' ),
-							url: '#',
+							url: redirectUrl,
 						},
 					],
 				}
 			);
 		}
-	}, [ isUserConnected, dispatch ] );
+	}, [ isUserConnected, dispatch, redirectUrl ] );
 }

projects/packages/my-jetpack/changelog/update-my-jetpack-handle-when-no-site-connected

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Handle when site is not connected