function EpicContent()

in apps-rendering/src/components/EpicContent/index.tsx [44:104]
58 lines of code
4 McCabe index (conditional complexity)

function EpicContent({
	title,
	body,
	firstButton,
	secondButton,
}: EpicProps): React.ReactElement | null {
	const [impressionSeen, setImpressionSeen] = useState(false);
	const epicContainer = useRef() as React.MutableRefObject<HTMLDivElement>;

	useEffect(() => {
		const handleSeenEpic = debounce(() => {
			if (
				!impressionSeen &&
				isElementPartiallyInViewport(epicContainer)
			) {
				void acquisitionsClient.epicSeen();
				setImpressionSeen(true);
			}
		}, 100);
		window.addEventListener('scroll', handleSeenEpic);
		return (): void => {
			window.removeEventListener('scroll', handleSeenEpic);
		};
	}, [impressionSeen]);

	const epicButton = (
		text: string,
		action: () => Promise<void>,
	): JSX.Element => (
		<Button
			onClick={action}
			iconSide="right"
			icon={<SvgArrowRightStraight />}
		>
			{text}
		</Button>
	);

	return (
		<div ref={epicContainer}>
			<h1 dangerouslySetInnerHTML={{ __html: title }}></h1>
			<div dangerouslySetInnerHTML={{ __html: body }}></div>
			<div className="button-container">
				<ThemeProvider theme={buttonThemeReaderRevenue}>
					{epicButton(firstButton, () =>
						acquisitionsClient.launchPurchaseScreen(
							PurchaseScreenReason.epic,
						),
					)}
					{secondButton
						? epicButton(secondButton, () =>
								acquisitionsClient.launchPurchaseScreen(
									PurchaseScreenReason.epic,
								),
						  )
						: null}
				</ThemeProvider>
			</div>
		</div>
	);
}