move logic to hook

dotcom-rendering/src/components/HeaderTopBar.importable.tsx

@@ -55,9 +55,10 @@ const topBarStylesFromLeftCol = css`
  *
  * ## Why does this need to be an Island?
  *
- * - We need to check if a user is signed in to show them the right header.
+ * - We need to check if a user is signed in to show them the right header
  * - We track clicks on print subscription with a page view ID
  * - We (sometimes) have a dynamic search
+ * - We change the text of the edition dropdown if we show the edition switcher banner
  *
  * ---
  *

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -313,14 +313,12 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 				id="maincontent"
 				css={hasPageSkin && pageSkinContainer}
 			>
-				{front.isNetworkFront && (
-					<Island priority="enhancement" defer={{ until: 'idle' }}>
-						<EditionSwitcherBanner
-							pageId={pageId}
-							edition={editionId}
-						/>
-					</Island>
-				)}
+				<Island priority="enhancement" defer={{ until: 'idle' }}>
+					<EditionSwitcherBanner
+						pageId={pageId}
+						edition={editionId}
+					/>
+				</Island>
 				{front.pressedPage.collections.map((collection, index) => {
 					// Backfills should be added to the end of any curated content
 					const trails = collection.curated.concat(

dotcom-rendering/src/lib/useUserPreferredEdition.ts

@@ -1,7 +1,11 @@
 import { getCookie, removeCookie, setCookie } from '@guardian/libs';
 import { useEffect, useState } from 'react';
 import { mutate } from 'swr';
-import { type EditionId as Edition, getEditionFromPageId } from './edition';
+import {
+	type EditionId as Edition,
+	getEditionFromPageId,
+	isNetworkFront,
+} from './edition';
 
 const getBannerValueFromQueryParams = () => {
 	const queryParams = new URLSearchParams(window.location.search);
@@ -33,26 +37,29 @@ const hideBannerThroughUserOverride = () => {
 };
 
 /**
- * Show an "Edition Switcher" banner if the user's preferred edition is different from the current edition.
+ * Show an "Edition Switcher" banner if the user is on a network front
+ * which is different to their preferred or default edition.
  *
  * This allows a user to quickly identify that they are not on the network front
- * for their preferred edition and provides a link to switch to it.
+ * for their edition and gives them a link to switch to it.
  */
 export const useEditionSwitcherBanner = (
 	pageId: string,
 	userEdition: Edition,
 ): [boolean] => {
 	const pageEdition = getEditionFromPageId(pageId)?.editionId;
+	const isOnDifferentFrontToEdition =
+		isNetworkFront(pageId) && pageEdition !== userEdition;
 
 	const [shouldShowBanner, setShouldShowBanner] = useState(
-		pageEdition !== userEdition,
+		isOnDifferentFrontToEdition,
 	);
 
 	useEffect(() => {
 		setShouldShowBanner(
-			pageEdition !== userEdition && !hideBannerThroughUserOverride(),
+			isOnDifferentFrontToEdition && !hideBannerThroughUserOverride(),
 		);
-	}, [userEdition, pageId, pageEdition]);
+	}, [isOnDifferentFrontToEdition]);
 
 	useEffect(() => {
 		addOrRemoveCookie();