Rough in the Main router/renderer

See #31

settings/src/script.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { render } from '@wordpress/element';
+import { render, useState } from '@wordpress/element';
 
 window.addEventListener( 'DOMContentLoaded', renderSettings );
 
@@ -23,21 +23,73 @@ function renderSettings() {
 }
 
 /**
- * Render an overview of all the Account settings.
- * todo update description if more logic is added to this
+ * Render the correct component based on the URL.
  */
 function Main() {
-	const enabled = false;
-	// todo use core user meta data store? or create an upstream API endpoint for this?
+	// The index is the URL slug and the value is the React component.
+	const components = {
+		'account-status': AccountStatus,
+		'email' : EmailAddress,
+		'password': Password,
+		'language': Language,
+		'two-factor-status': TwoFactorStatus,
+		'setup-totp': SetupTOTP,
+		'backup-codes': GenerateBackupCodes,
+	};
+
+	let currentUrl    = new URL( document.location.href )
+	let initialScreen = currentUrl.searchParams.get( 'screen' );
+
+	if ( ! components[ initialScreen ] ) {
+		initialScreen = 'account-status';
+	}
+
+	const [ screen, setScreen ] = useState( initialScreen );
+	const CurrentScreen         = components[ screen ];
+
+	currentUrl.searchParams.set( 'screen', screen );
+	history.pushState( {}, '', currentUrl );
+
+	return (
+		<CurrentScreen />
+	);
+}
+
+/**
+ * Render the Account Status.
+ */
+function AccountStatus() {
+	// todo need to update state when clicked, but bad practice to pass a setState() handler into a child?
 
 	return (
 		<>
-			<EmailAddress />
-			<Password />
-			<Language />
+			<p>
+				<a href="?screen=password" onClick={ () => setCurrentScreen( 'password' ) }>
+					Password
+					You have a password configured, but can change it at any time.
+				</a>
+			</p>
 
-			{ enabled && <TwoFactorStatus /> }
-			{ ! enabled && <SetupTOTP /> }
+			<p>
+				<a href="?screen=email" onClick={ () => setCurrentScreen( 'email' ) }>
+					Account Email
+					Your account email address is [email protected].
+				</a>
+			</p>
+
+			<p>
+				<a href="?screen=two-factor-status" onClick={ () => setCurrentScreen( 'two-factor-status' ) }>
+					Two Factor Authentication
+					You have two-factor authentication enabled using an app.
+				</a>
+			</p>
+
+			<p>
+				<a href="?screen=backup-codes" onClick={ () => setCurrentScreen( 'backup-codes' ) }>
+					Two-Factor Backup Codes
+					You have verified your backup codes for two-factor authentication.
+				</a>
+			</p>
 		</>
 	);
 }
@@ -82,6 +134,12 @@ function Language() {
  * Render the user's 2FA status.
  */
 function TwoFactorStatus() {
+	const totpEnabled = false;
+	// todo use core user meta data store? or create an upstream API endpoint for this?
+
+	//{ totpEnabled && <TwoFactorStatus /> }
+	//{ ! totpEnabled && <SetupTOTP /> }
+
 	return(
 		<>
 			<p>