function AusMomentMap()

in support-frontend/assets/pages/aus-moment-map/ausMomentMap.tsx [39:190]
134 lines of code
12 McCabe index (conditional complexity)

function AusMomentMap(): JSX.Element {
	const [selectedTerritory, setSelectedTerritory] = React.useState<
		string | null
	>(null);
	const [shouldScrollIntoView, setShouldScrollIntoView] = React.useState(false);

	const mapRef = React.useRef<HTMLDivElement>(null);
	const testimonialsContainerRef = React.useRef<HTMLDivElement>(null);

	const testimonials = useTestimonials();
	const { windowWidthIsGreaterThan, windowWidthIsLessThan } = useWindowWidth();

	ophan.init();

	React.useEffect(() => {
		if (windowWidthIsLessThan('desktop')) {
			setSelectedTerritory(null);
		}
	});

	React.useEffect(() => {
		const onKeyDown = (e: { key: string }) => {
			if (e.key === 'Escape') {
				setSelectedTerritory(null);
			}

			// TODO - hint
			if (e.key === 'Right' || e.key === 'ArrowRight') {
				if (selectedTerritory) {
					const index =
						(territories.indexOf(selectedTerritory) + 1) % territories.length;
					setSelectedTerritory(territories[index] ?? null);
				} else {
					setSelectedTerritory(territories[0] ?? null);
				}

				setShouldScrollIntoView(true);
			}
		};

		window.addEventListener('keydown', onKeyDown);
		return () => window.removeEventListener('keydown', onKeyDown);
	}, [selectedTerritory]);

	const animationTransition = {
		type: 'tween',
		duration: 0.2,
	};

	const mapVariants = {
		initial: {
			width: '100%',
		},
		active: {
			width: '40%',
		},
	};

	const testimonialsVariants = {
		mobile: {
			x: '0vw',
		},
		initial: {
			x: '59vw',
		},
		active: {
			x: '-59vw',
		},
	};

	const blurbVariants = {
		initial: {
			display: 'none',
		},
		active: {
			display: 'block',
		},
	};

	const animationVariant = () =>
		windowWidthIsGreaterThan('desktop') && selectedTerritory
			? 'active'
			: 'initial';

	const testimonialsProps = () => {
		if (windowWidthIsGreaterThan('desktop')) {
			return {
				animate: animationVariant(),
				variants: testimonialsVariants,
				transition: animationTransition,
				positionTransition: true,
			};
		}

		return null;
	};

	const createTestimonialsContainer = () => (
		<TestimonialsContainer
			testimonialsCollection={testimonials}
			selectedTerritory={selectedTerritory}
			shouldScrollIntoView={shouldScrollIntoView}
			setSelectedTerritory={(territory) => {
				setSelectedTerritory(territory);
				setShouldScrollIntoView(false);
			}}
			ref={testimonialsContainerRef}
		/>
	);

	return (
		<div className="map-page">
			<Header />
			<div className="main">
				<motion.div
					className="left"
					variants={mapVariants}
					animate={animationVariant()}
					transition={animationTransition}
					positionTransition
				>
					{windowWidthIsLessThan('desktop') && <Blurb />}
					<Map
						selectedTerritory={selectedTerritory}
						setSelectedTerritory={(territory) => {
							setSelectedTerritory(territory);
							setShouldScrollIntoView(true);
						}}
						ref={mapRef}
					/>
					<motion.div
						className="left-padded-inner"
						transition={animationTransition}
						animate={animationVariant()}
						variants={blurbVariants}
					>
						<Blurb slim />
					</motion.div>
				</motion.div>
				<div className="right">
					{windowWidthIsGreaterThan('desktop') && <Blurb />}
					{windowWidthIsGreaterThan('desktop') ? (
						<motion.div
							className="testimonials-overlay"
							{...testimonialsProps()}
						>
							<CloseButton onClick={() => setSelectedTerritory(null)} />
							{createTestimonialsContainer()}
						</motion.div>
					) : (
						<div>{createTestimonialsContainer()}</div>
					)}