Untitled

// JobAds.tsx

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';

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 [pageState, setPageState] = useState(1);

	return (
		<>
			<Header title="NAV jobbannonser" />
			{data ? (
				<div className="margin-to-header">
					{(data as JobAdsQueryResponse).content.map((jobAd) => (
						<Panel border className="panel-style">
							<Heading level="3" size="medium">
								{jobAd.title}
							</Heading>
							<BodyLong>
								{jobAd.title}
								<br />
								{jobAd.extent}
								<br />
								{formatDate(jobAd.expires)}
							</BodyLong>
						</Panel>
					))}
				</div>
			) : (
				<div className="loader-style">
					<Loader size="3xlarge" />
				</div>
			)}
			<div className="paginaiton-placement">
				<Pagination
					page={pageState}
					onPageChange={(page) => {
						setPageState(page);
					}}
					count={1}
				/>
			</div>
		</>
	);
};

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

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({
			query: () => '?size=1&page=2',
		}),
	}),
});

export const { useGetJobAdsQuery } = jobadsApi;


// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
	server: {
		proxy: {
			'/api': {
				target: 'https://arbeidsplassen.nav.no/public-feed/api/v1/ads',
				changeOrigin: true,
				secure: false,
				rewrite: (path) => path.replace(/^\/api/, ''),
			},
		},
	},
	plugins: [react()],
});