function TestimonialsForTerritory()

in support-frontend/assets/pages/aus-moment-map/components/testimonialsContainer.tsx [118:243]
109 lines of code
20 McCabe index (conditional complexity)

function TestimonialsForTerritory(props: TestimonialsForTerritoryProps) {
	const { windowWidthIsGreaterThan, windowWidthIsLessThan } = useWindowWidth();

	const midPointIndex = Math.ceil(props.testimonials.length / 2) - 1;

	const firstColumn = props.testimonials
		.slice(0, midPointIndex + 1)
		.map((testimonial) => <TestimonialComponent testimonial={testimonial} />);

	const secondColumn = props.testimonials
		.slice(midPointIndex + 1)
		.map((testimonial) => <TestimonialComponent testimonial={testimonial} />);

	const ctaIndex = secondColumn.length < 5 ? secondColumn.length : 3;

	secondColumn.splice(ctaIndex, 0, <TestimonialCtaPrimary />);
	secondColumn.push(<TestimonialCtaSecondary />);

	const ref: RefObject<HTMLDivElement> = React.useRef(null);

	React.useEffect(() => {
		if (ref.current) {
			const onScroll = () => {
				const testimonialsHeader = ref.current?.querySelector<HTMLDivElement>(
					'.testimonials-for-territory-header',
				);
				const testimonialsContainer =
					testimonialsHeader?.parentElement?.parentElement?.parentElement;
				const testimonialsContainerHeader =
					testimonialsContainer?.querySelector<HTMLDivElement>(
						'.testimonials-container-header',
					);

				if (windowWidthIsLessThan('desktop')) {
					if (
						ref.current &&
						testimonialsContainerHeader &&
						ref.current.getBoundingClientRect().top <=
							testimonialsContainerHeader.clientHeight
					) {
						testimonialsHeader?.classList.add('sticky');
						testimonialsHeader &&
							(testimonialsHeader.style.top = `${testimonialsContainerHeader.clientHeight}px`);
					} else {
						testimonialsHeader?.classList.remove('sticky');
						testimonialsHeader && (testimonialsHeader.style.top = 'initial');
					}
				}
			};

			document.addEventListener('scroll', onScroll);
			return () => document.removeEventListener('scroll', onScroll);
		}

		return;
	}, [ref.current]);

	React.useEffect(() => {
		if (ref.current) {
			const {
				offsetTop,
				offsetHeight,
				parentElement: testimonialsContainer,
			} = ref.current;

			if (testimonialsContainer) {
				const onScroll = () => {
					if (
						testimonialsContainer.scrollTop >= offsetTop &&
						testimonialsContainer.scrollTop < offsetTop + offsetHeight
					) {
						props.setSelectedTerritory(props.territory);
					}
				};

				testimonialsContainer.addEventListener('scroll', onScroll);
				return () =>
					testimonialsContainer.removeEventListener('scroll', onScroll);
			}
		}

		return;
	}, [ref.current]);

	React.useEffect(() => {
		if (windowWidthIsGreaterThan('desktop')) {
			if (
				ref.current &&
				props.selectedTerritory === props.territory &&
				props.shouldScrollIntoView
			) {
				const { offsetTop } = ref.current;
				const testimonialsContainer = ref.current.parentElement;
				testimonialsContainer?.scroll(0, offsetTop);
			}
		}
	}, [ref.current, props.selectedTerritory]);

	const displayName =
		props.territory === 'ACT' && windowWidthIsLessThan('mobileMedium')
			? props.territory
			: auStates[props.territory];

	return (
		<div className="testimonials-for-territory" ref={ref} id={props.territory}>
			<div className="testimonials-for-territory-header">
				<div className="testimonials-for-territory-header-text-and-icon-container">
					<LocationMarker />
					<h2 className="padded-multiline">
						<span>{displayName}</span>
					</h2>
				</div>
			</div>
			{windowWidthIsGreaterThan('tablet') ? (
				<TestimonialsTwoColumns
					firstColumn={firstColumn}
					secondColumn={secondColumn}
				/>
			) : (
				<TestimonialsExpandableSingleColumn
					testimonials={[...firstColumn, ...secondColumn]}
				/>
			)}
		</div>
	);
}