Untitled

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { JobAdsQueryResponse } from './jobAdsQueryResponse';

export const jobadsApi = createApi({
	reducerPath: 'bookingApi',
	baseQuery: fetchBaseQuery({
		baseUrl: '/api',
		prepareHeaders: async (headers) => {
			const access_token =
				'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJwdWJsaWMudG9rZW4udjFAbmF2Lm5vIiwiYXVkIjoiZmVlZC1hcGktdjEiLCJpc3MiOiJuYXYubm8iLCJpYXQiOjE1NTc0NzM0MjJ9.jNGlLUF9HxoHo5JrQNMkweLj_91bgk97ZebLdfx3_UQ';
			if (access_token) {
				headers.set('authorization', `Bearer ${access_token}`);
			}
			return headers;
		},
	}),
	endpoints: (builder) => ({
		getJobAds: builder.query<JobAdsQueryResponse, { pageNumber: number }>({
			query: ({ pageNumber }) => `?size=5&page=${pageNumber}`,
		}),
	}),
});

export const { useGetJobAdsQuery } = jobadsApi;



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';
import './JobAds.css';

export const JobAds = () => {
	const [pageState, setPageState] = useState(1);
	const { data: ads, isFetching } = useGetJobAdsQuery({ pageNumber: pageState });
	return (
		<>
			<Header title="NAV jobbannonser" />
			{ads && !isFetching ? (
				<>
					<div className="margin-to-header">
						{ads.content.map((jobAd) => (
							<>
								<Panel border className="panel-style">
									<Heading level="3" size="medium">
										{jobAd.title}
									</Heading>
									<BodyLong>
										{jobAd.extent}
										<br />
										{formatDate(jobAd.expires)}
										<br />
										<div dangerouslySetInnerHTML={{ __html: jobAd.description }} />
									</BodyLong>
								</Panel>
							</>
						))}
					</div>
					<div className="pagination-placement">
						<Pagination
							page={pageState}
							onPageChange={(page) => {
								setPageState(page);
							}}
							count={ads?.totalPages / 50}
						/>
					</div>
				</>
			) : (
				<div className="loader-style">
					<Loader size="3xlarge" />
				</div>
			)}
		</>
	);
};