Untitled

import { useState } from 'react';
import { BodyLong, Heading, Panel, Loader, Pagination } from '@navikt/ds-react';

import { useGetJobAdsQuery } from '../../jobads/jobadsApi';
import { Header } from '../header/Header';
import { formatDate } from '../../utilities/dateFormater';

import '@navikt/ds-css';

interface JobAd {
	id: string;
	title: string;
	jobTitle: string;
	extent: string;
	expires: string;
	description: string;
}

interface JobAdsQueryResponse {
	content: JobAd[];
}

export const JobAds = () => {
	const { data } = useGetJobAdsQuery<JobAdsQueryResponse>('');
	const [pageNumber, setPageNumber] = useState<number>(1);

	const jobsPerPage = 10;
	const pagesVisited = pageNumber * jobsPerPage;

	return (
		<>
			<Header title="NAV jobbannonser" />
			{data ? (
				<div style={{ marginTop: '10rem' }}>
					{(data as JobAdsQueryResponse).content.map((jobAd) => (
						<Panel
							border
							style={{
								margin: '1rem',
								padding: '1rem',
								width: '100%',
								maxWidth: '600px',
							}}
						>
							<Heading level="3" size="medium">
								{jobAd.title}
							</Heading>
							<BodyLong>
								{jobAd.title}
								<br />
								{jobAd.extent}
								<br />
								{formatDate(jobAd.expires)}
							</BodyLong>
						</Panel>
					))}
				</div>
			) : (
				<div
					style={{
						display: 'flex',
						justifyContent: 'center',
						alignItems: 'center',
						height: '100vh',
					}}
				>
					<Loader size="3xlarge" />
				</div>
			)}
			<div
				style={{
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center',
				}}
			>
				<Pagination
					page={pageNumber}
					onPageChange={(page) => {
						setPageNumber(page);
					}}
					count={Math.ceil((data as JobAdsQueryResponse).content.length / jobsPerPage)}
				/>
			</div>
		</>
	);
};