export function App()

in newswires/client/src/App.tsx [84:165]


export function App() {
	const {
		config,
		state,
		handleEnterQuery,
		handleRetry,
		handleDeselectItem,
		handleNextItem,
		handlePreviousItem,
	} = useSearch();

	const [displayDisclaimer, setDisplayDisclaimer] = useState<boolean>(() =>
		loadOrSetInLocalStorage<boolean>('displayDisclaimer', z.boolean(), true),
	);

	const { view, itemId: selectedItemId, query } = config;
	const { status } = state;

	const isPoppedOut = isOpenAsTicker();

	const dismissDisclaimer = (persist?: boolean) => {
		setDisplayDisclaimer(false);
		if (persist) {
			saveToLocalStorage<boolean>('displayDisclaimer', false);
		}
	};

	const breakpoints = {
		sm: '@media (max-width: 600px)',
		md: '@media (min-width: 900px)',
	};

	return (
		<EuiProvider colorMode="light">
			<EuiPageTemplate
				onKeyUp={(e) => {
					if (view == 'item') {
						switch (e.key) {
							case 'Escape':
								handleDeselectItem();
								break;
							case 'ArrowLeft':
								handlePreviousItem();
								break;
							case 'ArrowRight':
								handleNextItem();
								break;
						}
					}
				}}
				css={css`
					height: 100vh;
				`}
			>
				{displayDisclaimer && (
					<EuiModal
						aria-labelledby="disclaimer-title"
						onClose={() => dismissDisclaimer()}
					>
						<EuiModalHeader>
							<EuiModalHeaderTitle
								title={'Please use with caution'}
								id="disclaimer-title"
							>
								<EuiIcon type="iInCircle" size="xl" /> Please use with caution
							</EuiModalHeaderTitle>
						</EuiModalHeader>

						<EuiModalBody>
							<EuiText size="m">
								Please be advised that this product is currently in its early
								testing phase, under active development, and subject to change.
								<br />
								<FeedbackContent />
							</EuiText>
						</EuiModalBody>

						<EuiModalFooter>
							<EuiButtonEmpty onClick={() => dismissDisclaimer()}>
								Close
							</EuiButtonEmpty>
							<EuiButton onClick={() => dismissDisclaimer(true)} fill>