Refactor showhide island

guardian · Jan 22, 2025 · 3f716ce · 3f716ce
1 parent da27286
commit 3f716ce
Showing 1 changed file with 65 additions and 50 deletions.
diff --git a/dotcom-rendering/src/components/ShowHideContainers.importable.tsx b/dotcom-rendering/src/components/ShowHideContainers.importable.tsx
@@ -25,6 +25,52 @@ const getContainerStates = (): ContainerStates => {
 	return item;
 };
 
+const toggleContainer = (
+	sectionId: string,
+	button: HTMLElement,
+	containerStates: ContainerStates,
+) => {
+	const isExpanded = button.getAttribute('aria-expanded') === 'true';
+	const section = document.getElementById(sectionId);
+	const carouselButtons: Element | null = document.getElementById(
+		`${sectionId}-carousel-navigation`,
+	);
+
+	if (isExpanded) {
+		containerStates[sectionId] = 'closed';
+		section?.classList.add('hidden');
+		carouselButtons?.classList.add('hidden');
+
+		button.innerHTML = 'Show';
+		button.setAttribute('aria-expanded', 'false');
+		button.setAttribute('data-link-name', 'Show');
+	} else {
+		containerStates[sectionId] = 'opened';
+		section?.classList.remove('hidden');
+		carouselButtons?.classList.remove('hidden');
+		button.innerHTML = 'Hide';
+		button.setAttribute('aria-expanded', 'true');
+		button.setAttribute('data-link-name', 'Hide');
+	}
+
+	storage.local.set(`gu.prefs.container-states`, containerStates);
+};
+
+/**
+ * Initializes the show/hide functionality for a button and its associated container.
+ */
+const initialiseShowHide = (
+	sectionId: string,
+	button: HTMLElement,
+	containerStates: ContainerStates,
+) => {
+	button.classList.remove('hidden');
+	button.onclick = () => toggleContainer(sectionId, button, containerStates);
+
+	if (containerStates[sectionId] === 'closed') {
+		toggleContainer(sectionId, button, containerStates);
+	}
+};
 /**
  * A component that manages the show/hide functionality of containers
  * based on user interaction and signed-in status.
@@ -40,63 +86,32 @@ const getContainerStates = (): ContainerStates => {
 export const ShowHideContainers = () => {
 	const isSignedIn = useIsSignedIn();
 	const containerStates = getContainerStates();
-	useEffect(() => {
-		const toggleContainer = (sectionId: string, element: HTMLElement) => {
-			const isExpanded = element.getAttribute('aria-expanded') === 'true';
-
-			const section: Element | null =
-				window.document.getElementById(sectionId);
-
-			const carouselButtons: Element | null =
-				window.document.getElementById(
-					`${sectionId}-carousel-navigation`,
-				);
-
-			if (isExpanded) {
-				containerStates[sectionId] = 'closed';
-				section?.classList.add('hidden');
-				carouselButtons?.classList.add('hidden');
 
-				element.innerHTML = 'Show';
-				element.setAttribute('aria-expanded', 'false');
-				element.setAttribute('data-link-name', 'Show');
-			} else {
-				containerStates[sectionId] = 'opened';
-				section?.classList.remove('hidden');
-				carouselButtons?.classList.remove('hidden');
-				element.innerHTML = 'Hide';
-				element.setAttribute('aria-expanded', 'true');
-				element.setAttribute('data-link-name', 'Hide');
-			}
+	useEffect(() => {
+		const showHideButtons = document.querySelectorAll<HTMLElement>(
+			'[data-show-hide-button]',
+		);
 
-			storage.local.set(`gu.prefs.container-states`, containerStates);
-		};
+		for (const button of showHideButtons) {
+			if (isSignedIn === 'Pending') return;
 
-		const allShowHideButtons = Array.from(
-			window.document.querySelectorAll<HTMLElement>(
-				'[data-show-hide-button]',
-			),
-		);
+			const sectionId = button.getAttribute('data-show-hide-button');
+			const isBetaContainer = button.getAttribute('data-beta-container');
 
-		for (const e of allShowHideButtons) {
-			const sectionId = e.getAttribute('data-show-hide-button');
-			const isBetaContainer = e.getAttribute('data-beta-container');
 			if (!sectionId) continue;
 
-			if (isSignedIn === 'Pending') return;
-			/** We have disabled show hide for beta containers when the user is not signed in.
-			 *  It is still available for legacy containers regardless of sign in state.
+			/**
+			 * We have disabled show hide for beta containers when the user is not signed in.
+			 * It is currently still available for legacy containers regardless of sign in state.
+			 *
+			 * Once beta containers are in production, show hide will be behind a sign in flag for all containers.
+			 * At this point, the isBetaContainer check can be removed from the below code.
 			 */
-			if (isSignedIn === false && isBetaContainer === 'true') {
-				e.classList.add('hidden');
-				/** if either the user is signed in, or we are in a legacy container, show the toggle */
-			} else if (isSignedIn === true || isBetaContainer === 'false') {
-				e.classList.remove('hidden');
-				e.onclick = () => toggleContainer(sectionId, e);
-
-				if (containerStates[sectionId] === 'closed') {
-					toggleContainer(sectionId, e);
-				}
+			if (isBetaContainer === 'true' && !isSignedIn) {
+				button.classList.add('hidden');
+				return;
+			} else {
+				initialiseShowHide(sectionId, button, containerStates);
 			}
 		}
 	}, [isSignedIn, containerStates]);