diff --git a/src/app/components/table/list-table.tsx b/src/app/components/table/list-table.tsx
index 39f08ded..c37dfabf 100644
--- a/src/app/components/table/list-table.tsx
+++ b/src/app/components/table/list-table.tsx
@@ -9,20 +9,26 @@ import {
TableRow,
styled,
} from '@mui/material';
-import { getTranslation } from '@/app/lib/common';
+import { TranslatedName, getTranslation } from '@/app/lib/common';
import { Haku, getAlkamisKausi, Tila } from '@/app/lib/kouta-types';
-type Column = {
+type Column = {
title?: string;
key: string;
- render: (obj: any) => React.ReactNode;
+ render: (props: P) => React.ReactNode;
style?: Record;
};
-export const makeHakuColumn = (): Column => ({
+type Entity = { oid: string; nimi: TranslatedName; tila: Tila };
+
+type KeysMatching = {
+ [K in keyof O]: O[K] extends T ? K : never;
+}[keyof O & string];
+
+export const makeHakuColumn = (): Column => ({
title: 'Nimi',
key: 'hakuNimi',
- render: (haku: Haku) => (
+ render: (haku) => (
{getTranslation(haku.nimi)}
@@ -39,35 +45,35 @@ export const makeCountColumn = ({
}: {
title: string;
key: string;
- amountProp: string;
-}): Column => ({
+ amountProp: KeysMatching;
+}): Column => ({
title,
key,
- render: (props: any) => {props[amountProp] ?? 0},
+ render: (props) => {props[amountProp] ?? 0},
style: { width: 0 },
});
-export const makeTilaColumn = (): Column => ({
+export const makeTilaColumn = (): Column => ({
title: 'Tila',
key: 'tila',
- render: (haku: Haku) => {Tila[haku.tila]},
+ render: (haku) => {Tila[haku.tila]},
style: {
width: 0,
},
});
-export const makeHakutapaColumn = (getMatchingHakutapa: Function): Column => ({
+export const makeHakutapaColumn = (
+ getMatchingHakutapa: (koodiUri: string) => string | undefined,
+): Column => ({
title: 'Hakutapa',
key: 'hakutapa',
- render: (haku: Haku) => (
- {getMatchingHakutapa(haku.hakutapaKoodiUri)}
- ),
+ render: (haku) => {getMatchingHakutapa(haku.hakutapaKoodiUri)},
});
-export const makeKoulutuksenAlkamiskausiColumn = (): Column => ({
+export const makeKoulutuksenAlkamiskausiColumn = (): Column => ({
title: 'Koulutuksen alkamiskausi',
key: 'koulutuksenAlkamiskausi',
- render: (haku: Haku) => (
+ render: (haku) => (
{haku.alkamisKausiKoodiUri
? `${haku.alkamisVuosi} ${getAlkamisKausi(haku.alkamisKausiKoodiUri)}`
@@ -76,11 +82,6 @@ export const makeKoulutuksenAlkamiskausiColumn = (): Column => ({
),
});
-type ListTableProps = {
- columns?: Array;
- rows?: Array;
-};
-
const StyledTable = styled(Table)({
width: '100%',
borderSpacing: '0px',
@@ -99,15 +100,20 @@ const StyledRow = styled(TableRow)({
backgroundColor: '#f5f5f5',
},
'&:hover': {
- backgroundColor: '#e0f2fd',
+ backgroundColor: '#e5f5ff',
},
});
-export const ListTable = ({
+interface ListTableProps extends React.ComponentProps {
+ columns?: Array>;
+ rows?: Array;
+}
+
+export const ListTable = ({
columns = [],
rows = [],
...props
-}: ListTableProps) => {
+}: ListTableProps) => {
return (
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 00000000..7b8f8d80
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,4 @@
+'use client';
+import ErrorBoundary from '@/app/components/error-boundary';
+
+export default ErrorBoundary;
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
new file mode 100644
index 00000000..7199d679
--- /dev/null
+++ b/src/app/global-error.tsx
@@ -0,0 +1,18 @@
+'use client';
+import ErrorBoundary from './components/error-boundary';
+
+export default function GlobalError({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/app/haku/[oid]/error.tsx b/src/app/haku/[oid]/error.tsx
new file mode 100644
index 00000000..7b8f8d80
--- /dev/null
+++ b/src/app/haku/[oid]/error.tsx
@@ -0,0 +1,4 @@
+'use client';
+import ErrorBoundary from '@/app/components/error-boundary';
+
+export default ErrorBoundary;
diff --git a/src/app/haku/[oid]/page.tsx b/src/app/haku/[oid]/page.tsx
index f8b1f88c..97d5361b 100644
--- a/src/app/haku/[oid]/page.tsx
+++ b/src/app/haku/[oid]/page.tsx
@@ -1,35 +1,17 @@
'use client';
-import Header from '@/app/components/header';
-import { getTranslation } from '@/app/lib/common';
-import { getHaku } from '@/app/lib/kouta';
-import { CircularProgress } from '@mui/material';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
-
-const HakukohdeList = dynamic(() => import('./hakukohde-list'), {
- ssr: false,
- loading: () => ,
-});
+import HakukohdeList from './hakukohde-list';
export default function HakuPage({ params }: { params: { oid: string } }) {
- const { data: hakuNimi } = useSuspenseQuery({
- queryKey: ['getHaku', params.oid],
- queryFn: () => getHaku(params.oid),
- });
-
return (
-
-
-
-
-
-
Valitse hakukohde
-
Kesken...
-
+
+
+
+
Valitse hakukohde
+
Kesken...
);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e18137cd..800d3b26 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,8 +16,10 @@ export const metadata: Metadata = {
export default async function RootLayout({
children,
+ header,
}: Readonly<{
children: React.ReactNode;
+ header: React.ReactNode;
}>) {
return (
@@ -25,7 +27,12 @@ export default async function RootLayout({
- {children}
+
+ <>
+ {header}
+ {children}
+
+
diff --git a/src/app/lib/common.ts b/src/app/lib/common.ts
index e7d5136a..87680480 100644
--- a/src/app/lib/common.ts
+++ b/src/app/lib/common.ts
@@ -26,3 +26,13 @@ export function getTranslation(
}
return translated.sv || '';
}
+
+export class FetchError extends Error {
+ response: Response;
+ constructor(response: Response, message: string = 'Fetch error') {
+ super(message);
+ // Set the prototype explicitly.
+ Object.setPrototypeOf(this, FetchError.prototype);
+ this.response = response;
+ }
+}
diff --git a/src/app/lib/http-client.ts b/src/app/lib/http-client.ts
index b225818b..316f5998 100644
--- a/src/app/lib/http-client.ts
+++ b/src/app/lib/http-client.ts
@@ -1,12 +1,13 @@
import { getCookies } from './cookie';
import { redirect } from 'next/navigation';
import { configuration } from './configuration';
+import { FetchError } from './common';
const doFetch = async (request: Request) => {
try {
const response = await fetch(request);
return response.status >= 400
- ? Promise.reject(response)
+ ? Promise.reject(new FetchError(response))
: Promise.resolve(response);
} catch (e) {
return Promise.reject(e);
@@ -29,7 +30,7 @@ const redirectToLogin = () => {
const makeBareRequest = (request: Request) => {
const { method } = request;
- let modifiedOptions: RequestInit = {
+ const modifiedOptions: RequestInit = {
headers: {
'Caller-id': '1.2.246.562.10.00000000001.valintojen-toteuttaminen',
},
@@ -46,7 +47,7 @@ const makeBareRequest = (request: Request) => {
return doFetch(new Request(request, modifiedOptions));
};
-const retryWithLogin = async (request: any, loginUrl: string) => {
+const retryWithLogin = async (request: Request, loginUrl: string) => {
await makeBareRequest(new Request(loginUrl));
return await makeBareRequest(request);
};
@@ -67,7 +68,7 @@ const responseToData = async (res: Response) => {
}
};
-const makeRequest = async
(request: Request) => {
+const makeRequest = async (request: Request) => {
try {
const response = await makeBareRequest(request);
@@ -79,8 +80,8 @@ const makeRequest = async (request: Request) => {
return responseToData(response);
} catch (error: unknown) {
- if (error instanceof Response) {
- if (isUnauthenticated(error)) {
+ if (error instanceof FetchError) {
+ if (isUnauthenticated(error.response)) {
try {
if (request?.url?.includes('/kouta-internal')) {
const resp = await retryWithLogin(
@@ -91,6 +92,9 @@ const makeRequest = async (request: Request) => {
return responseToData(resp);
}
} catch (e) {
+ if (e instanceof FetchError && isUnauthenticated(e.response)) {
+ redirectToLogin();
+ }
return Promise.reject(e);
}
}
diff --git a/src/app/lib/kouta.ts b/src/app/lib/kouta.ts
index 8a332a68..cca3571c 100644
--- a/src/app/lib/kouta.ts
+++ b/src/app/lib/kouta.ts
@@ -5,7 +5,7 @@ import { TranslatedName } from './common';
import { Haku, Hakukohde, Tila } from './kouta-types';
import { client } from './http-client';
-export async function getHaut(active: boolean = true) {
+export async function getHaut() {
const response = await client.get(configuration.hautUrl);
const haut: Haku[] = response.data.map(
(h: {
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index fab71816..f485f5f6 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,5 +1,5 @@
-import { CircularProgress } from '@mui/material';
+import { FullSpinner } from './components/full-spinner';
export default function Loading() {
- return ;
+ return ;
}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index eaa83cd7..10f45ad3 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -2,47 +2,53 @@ import { Grid, Button, Typography } from '@mui/material';
export default function Custom404() {
return (
-
-
-
- 404
-
-
-
-
- Sivua ei löytynyt
-
-
- Linkki on virheellinen tai vanhentunut.
-
-
-
-
-
-
+
+
+
+
+ 404
+
+
+
+
+ Sivua ei löytynyt
+
+
+ Linkki on virheellinen tai vanhentunut.
+
+
+
+
+
+
+
-
+
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8cee438b..db3987ba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,8 @@
'use server';
-import { CircularProgress } from '@mui/material';
-import dynamic from 'next/dynamic';
-import Header from './components/header';
import { getHakutavat } from './lib/koodisto';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import { CSSProperties } from 'react';
+import HakuFilters from './components/haku-filters';
const titleSectionStyle: CSSProperties = {
borderBottom: '1px solid rgba(0, 0, 0, 0.15)',
@@ -16,25 +14,17 @@ const titleSectionStyle: CSSProperties = {
padding: 0,
};
-const HakuFilters = dynamic(() => import('./components/haku-filters'), {
- ssr: false,
- loading: () => ,
-});
-
export default async function Home() {
const hakutavat = await getHakutavat();
return (
-
-
-
-
-
+
+
+
);
}
diff --git a/src/app/theme.tsx b/src/app/theme.tsx
index bc0b713a..40b4460e 100644
--- a/src/app/theme.tsx
+++ b/src/app/theme.tsx
@@ -10,6 +10,12 @@ const LinkBehaviour = React.forwardRef
(
);
const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#0a789c',
+ contrastText: '#fff',
+ },
+ },
components: {
MuiLink: {
defaultProps: {
diff --git a/src/app/wrapper.tsx b/src/app/wrapper.tsx
index c4e1c27d..18c792fd 100644
--- a/src/app/wrapper.tsx
+++ b/src/app/wrapper.tsx
@@ -1,13 +1,13 @@
'use client';
+import { FullSpinner } from './components/full-spinner';
import { useAsiointiKieli } from './lib/hooks/useAsiointiKieli';
-import { CircularProgress } from '@mui/material';
export default function Wrapper({ children }: { children: React.ReactNode }) {
const { isLoading, isError, error } = useAsiointiKieli();
switch (true) {
case isLoading:
- return ;
+ return ;
case isError:
throw error;
default:
diff --git a/tests/e2e/haut.spec.ts b/tests/e2e/haut.spec.ts
index 8736f5ec..446bf781 100644
--- a/tests/e2e/haut.spec.ts
+++ b/tests/e2e/haut.spec.ts
@@ -1,4 +1,8 @@
import { test, expect, Page } from '@playwright/test';
+import {
+ expectAllSpinnersHidden,
+ expectPageAccessibilityOk,
+} from './playwright-utils';
async function selectHakutapa(page: Page, idx: number, expectedOption: string) {
await page.getByTestId('haku-hakutapa-select').click();
@@ -21,6 +25,14 @@ test.beforeEach(async ({ page }) => {
await expect(page).toHaveTitle(/Valintojen Toteuttaminen/);
});
+test('Haku-page accessibility', async ({ page }) => {
+ await page.goto(
+ '/valintojen-toteuttaminen/haku/1.2.246.562.29.00000000000000046872',
+ );
+ await expectAllSpinnersHidden(page);
+ await expectPageAccessibilityOk(page);
+});
+
test('filters haku by published state', async ({ page }) => {
await expect(page.getByTestId('haku-tila-toggle')).toContainText(
'Julkaistut',
diff --git a/tests/e2e/index.spec.ts b/tests/e2e/index.spec.ts
index 3ae15cb6..310223d0 100644
--- a/tests/e2e/index.spec.ts
+++ b/tests/e2e/index.spec.ts
@@ -1,10 +1,27 @@
import { test, expect } from '@playwright/test';
+import {
+ expectAllSpinnersHidden,
+ expectPageAccessibilityOk,
+} from './playwright-utils';
+
+test('index accessibility', async ({ page }) => {
+ await page.goto('/');
+ await expectAllSpinnersHidden(page);
+ await page.locator('tr').nth(1).hover();
+ await expectPageAccessibilityOk(page);
+});
test('has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/Valintojen Toteuttaminen/);
});
+test('not found page accessibility', async ({ page }) => {
+ await page.goto('/valintojen-toteuttaminen/mimic-treasure-chest');
+ await expectAllSpinnersHidden(page);
+ await expectPageAccessibilityOk(page);
+});
+
test('not found page', async ({ page }) => {
await page.goto('/valintojen-toteuttaminen/mimic-treasure-chest');
await expect(page.locator('h1')).toContainText('404');
diff --git a/tests/e2e/playwright-utils.ts b/tests/e2e/playwright-utils.ts
new file mode 100644
index 00000000..3181f600
--- /dev/null
+++ b/tests/e2e/playwright-utils.ts
@@ -0,0 +1,12 @@
+import AxeBuilder from '@axe-core/playwright';
+import { Page, expect } from '@playwright/test';
+
+export const expectPageAccessibilityOk = async (page: Page) => {
+ const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+ await expect(accessibilityScanResults.violations).toEqual([]);
+};
+
+export const expectAllSpinnersHidden = async (page: Page) => {
+ const spinners = page.getByRole('progressbar');
+ await expect(spinners).toHaveCount(0);
+};
diff --git a/tsconfig.json b/tsconfig.json
index 7b285893..7f310556 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "noImplicitAny": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,