fix(AVO-3804): upgrade admin-core, and comp libs to esm

next.config.js

@@ -92,7 +92,6 @@ module.exports = withTM({
 			'react-hook-form': path.resolve('./node_modules/react-hook-form'),
 			'react-table': path.resolve('./node_modules/react-table'),
 			'react-datepicker': path.resolve('./node_modules/react-datepicker'),
-			'react-page-split': path.resolve('./node_modules/react-page-split'),
 			lodash$: path.resolve('./node_modules/lodash-es'),
 		};
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hetarchief-client",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "private": true,
   "contributors": [
     "Bert Verhelst <[email protected]>",
@@ -40,26 +40,26 @@
   },
   "dependencies": {
     "@emotion/cache": "11.11.0",
-    "@flowplayer/player": "3.3.0",
+    "@flowplayer/player": "3.32.1",
     "@hookform/resolvers": "2.9.11",
-    "@meemoo/admin-core-ui": "4.7.2",
-    "@meemoo/react-components": "4.5.3",
+    "@meemoo/admin-core-ui": "5.2.12",
+    "@meemoo/react-components": "5.1.5",
     "@react-hook/resize-observer": "1.2.5",
     "@reduxjs/toolkit": "1.9.6",
     "@studiohyperdrive/pagination": "1.0.0",
-    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query": "5.90.7",
     "@types/openseadragon": "3.0.10",
-    "@viaa/avo2-components": "5.4.1",
-    "@viaa/avo2-types": "3.4.2",
+    "@viaa/avo2-components": "6.2.2",
+    "@viaa/avo2-types": "5.0.9",
     "autosize": "6.0.1",
     "blend-promise-utils": "1.29.2",
     "capture-stack-trace": "1.0.1",
     "clsx": "2.0.0",
     "copy-to-clipboard": "3.3.1",
     "cors": "2.8.5",
     "critters": "0.0.23",
-    "date-fns": "2.30.0",
-    "date-fns-tz": "2.0.0",
+    "date-fns": "3.6.0",
+    "date-fns-tz": "3.2.0",
     "file-saver": "2.0.5",
     "focus-trap-react": "8.11.0",
     "i": "^0.3.7",
@@ -85,20 +85,19 @@
     "react-datepicker": "4.21.0",
     "react-dom": "18.3.1",
     "react-highlight-words": "0.20.0",
-    "react-hook-form": "7.46.2",
+    "react-hook-form": "7.66.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-masonry-css": "1.0.16",
     "react-modal": "3.14.4",
-    "react-page-split": "0.0.7",
     "react-perfect-scrollbar": "1.5.8",
     "react-popper": "2.3.0",
     "react-range": "1.8.14",
     "react-redux": "8.1.3",
-    "react-resizable-panels": "0.0.55",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-resizable-panels": "3.0.6",
+    "react-router": "7.9.1",
+    "react-router-dom": "7.9.1",
     "react-scrollbars-custom": "4.1.1",
-    "react-select": "5.7.4",
+    "react-select": "5.10.2",
     "react-table": "7.7.0",
     "react-to-string": "0.1.1",
     "react-toastify": "9.1.3",
@@ -176,7 +175,7 @@
     "postcss-preset-env": "7.0.1",
     "raf": "3.4.1",
     "redux-mock-store": "1.5.4",
-    "sass": "^1.66.1",
+    "sass": "1.93.3",
     "sass-loader": "12.4.0",
     "slice-ansi": "4.0.0",
     "style-loader": "3.3.1",
@@ -189,7 +188,6 @@
     "typescript": "5.1.6"
   },
   "overrides": {
-    "@emotion/react": "11.11.1",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "babel-plugin-macros": "3.1.0",

src/middleware.ts

@@ -9,38 +9,48 @@ interface IeObjectRedirectInfo {
 
 export async function middleware(request: NextRequest) {
 	try {
+		console.log('middleware triggered for URL: ', request.url);
 		const pathName = request.nextUrl.pathname;
 
 		// https://meemoo.atlassian.net/browse/ARC-3185
 		if (pathName === '/sitemap.xml.gz') {
 			return new NextResponse('Not found', { status: 404 });
 		}
 
-		const pathParts = pathName.split('/media/');
-		console.log('Middleware triggered for path: ', pathName);
-		const mediaMosaId = pathParts.pop()?.split('/').pop();
-		if (!mediaMosaId) {
-			console.error('No mediaMosaId found in the URL: ', pathName);
-			return NextResponse.next();
-		}
-		const ieObjectRedirectInfo: IeObjectRedirectInfo = (await (
-			await fetch(`${process.env.PROXY_URL}/ie-objects/lookup/nvdgo/${mediaMosaId}`)
-		).json()) as IeObjectRedirectInfo;
-		const schemaIdentifier = ieObjectRedirectInfo.schema_identifier;
-		if (!schemaIdentifier) {
-			console.error(
-				'Fetching the schemaIdentifier for the nvdgo id failed: ',
-				ieObjectRedirectInfo
+		// Handle media mosa ids and redirect them to the equivalent ie-object page
+		if (
+			pathName.startsWith('/media/') ||
+			pathName.startsWith('/nl/media/') ||
+			pathName.startsWith('/en/media/')
+		) {
+			const pathParts = pathName.split('/media/');
+			const mediaMosaId = pathParts.pop()?.split('/').pop();
+			if (!mediaMosaId) {
+				console.error('No mediaMosaId found in the URL: ', pathName);
+				return NextResponse.next();
+			}
+			const ieObjectRedirectInfo: IeObjectRedirectInfo = (await (
+				await fetch(`${process.env.PROXY_URL}/ie-objects/lookup/nvdgo/${mediaMosaId}`)
+			).json()) as IeObjectRedirectInfo;
+			const schemaIdentifier = ieObjectRedirectInfo.schema_identifier;
+			if (!schemaIdentifier) {
+				console.error(
+					'Fetching the schemaIdentifier for the nvdgo id failed: ',
+					ieObjectRedirectInfo
+				);
+				return NextResponse.rewrite(new URL('/__force-404', request.url));
+			}
+			const search = pathName.startsWith('/en/') ? 'en/search' : 'zoeken';
+			const maintainerSlug = ieObjectRedirectInfo.maintainerSlug;
+			const title = ieObjectRedirectInfo.title ? ieObjectRedirectInfo.title.replace(/ /g, '-') : '';
+
+			return NextResponse.redirect(
+				new URL(`/${search}/${maintainerSlug}/${schemaIdentifier}/${title}`, request.url)
 			);
-			return NextResponse.rewrite(new URL('/__force-404', request.url));
 		}
-		const search = pathName.startsWith('/en/') ? 'en/search' : 'zoeken';
-		const maintainerSlug = ieObjectRedirectInfo.maintainerSlug;
-		const title = ieObjectRedirectInfo.title ? ieObjectRedirectInfo.title.replace(/ /g, '-') : '';
 
-		return NextResponse.redirect(
-			new URL(`/${search}/${maintainerSlug}/${schemaIdentifier}/${title}`, request.url)
-		);
+		// Other routes are not handled by this middleware
+		return NextResponse.next();
 	} catch (err) {
 		console.error('Error in middleware: ', err);
 		return NextResponse.rewrite(new URL('/__force-404', request.url));

src/modules/account/const/my-history.const.tsx

@@ -1,19 +1,19 @@
-import { Button, OrderDirection } from '@meemoo/react-components';
-import type { MouseEvent } from 'react';
-import type { Column, UseSortByColumnOptions } from 'react-table';
-import { NumberParam, StringParam, withDefault } from 'use-query-params';
-
+import { Button } from '@meemoo/react-components';
 import { SortDirectionParam } from '@shared/helpers';
 import { tText } from '@shared/helpers/translate';
 import type { VisitRequest, VisitRow } from '@shared/types/visit-request';
 import { formatSameDayRange } from '@shared/utils/dates';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
+import type { MouseEvent } from 'react';
+import type { Column, UseSortByColumnOptions } from 'react-table';
+import { NumberParam, StringParam, withDefault } from 'use-query-params';
 
 export const HistoryItemListSize = 20;
 
 export const ACCOUNT_HISTORY_QUERY_PARAM_CONFIG = {
 	page: withDefault(NumberParam, 1),
 	orderProp: withDefault(StringParam, 'startAt'),
-	orderDirection: withDefault(SortDirectionParam, OrderDirection.desc),
+	orderDirection: withDefault(SortDirectionParam, AvoSearchOrderDirection.DESC),
 };
 
 export const HistoryTableAccessComboId = 'account-history-from-to';

src/modules/account/const/my-material-requests.const.tsx

@@ -151,10 +151,11 @@ export const getAccountMaterialRequestTableColumns = (
 				{
 					Header: tText('modules/cp/const/material-requests___download'),
 					accessor: MaterialRequestKeys.downloadUrl,
+					disableSortBy: true,
 					Cell: ({ row: { original } }: MaterialRequestRow) => (
 						<MaterialRequestDownloadButton materialRequest={original} />
 					),
-				},
+				} as Column<MaterialRequest>,
 				{
 					Header: tText('modules/cp/const/material-requests___request-name'),
 					accessor: MaterialRequestKeys.requestName,

src/modules/account/hooks/get-folder-media.ts

@@ -1,26 +1,24 @@
-import type { IPagination } from '@studiohyperdrive/pagination';
-import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-
 import { FoldersService } from '@account/services/folders';
 import type { FolderIeObject } from '@account/types';
 import { QUERY_KEYS } from '@shared/const/query-keys';
+import type { IPagination } from '@studiohyperdrive/pagination';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 
 export function useGetFolderMedia(
 	id: string | undefined,
 	searchInput: string | undefined,
 	page: number,
 	size: number
-): UseQueryResult<IPagination<FolderIeObject>> {
-	return useQuery(
-		[QUERY_KEYS.getCollectionMedia, searchInput, page, size],
-		() => {
+): UseQueryResult<IPagination<FolderIeObject> | undefined> {
+	return useQuery({
+		queryKey: [QUERY_KEYS.getCollectionMedia, searchInput, page, size],
+		queryFn: () => {
 			if (id) {
 				return FoldersService.getById(id, searchInput, page, size);
 			}
+			return undefined;
 		},
-		{
-			enabled: !!id,
-			retry: false, // Avoid delay when API returns 404 due to empty list
-		}
-	);
+		enabled: !!id,
+		retry: false, // Avoid delay when API returns 404 due to empty list
+	});
 }

src/modules/account/hooks/get-folders.ts

@@ -1,21 +1,20 @@
-import { type UseQueryResult, useQuery } from '@tanstack/react-query';
-import { useDispatch } from 'react-redux';
-
 import { FoldersService } from '@account/services/folders';
 import type { Folder } from '@account/types';
 import { QUERY_KEYS } from '@shared/const/query-keys';
 import { setFolders } from '@shared/store/ie-objects';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
+import { useDispatch } from 'react-redux';
 
 export function useGetFolders(enabled = true): UseQueryResult<Folder[]> {
 	const dispatch = useDispatch();
 
-	return useQuery<Folder[]>(
-		[QUERY_KEYS.getCollections],
-		async () => {
+	return useQuery<Folder[]>({
+		queryKey: [QUERY_KEYS.getCollections],
+		queryFn: async () => {
 			const response = await FoldersService.getAll();
 			dispatch(setFolders(response.items));
 			return response.items || [];
 		},
-		{ enabled }
-	);
+		enabled,
+	});
 }

src/modules/account/hooks/get-newsletter-preferences.ts

@@ -1,22 +1,24 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { isEmpty, isNil } from 'lodash-es';
-
 import { QUERY_KEYS } from '@shared/const/query-keys';
 import { CampaignMonitorService } from '@shared/services/campaign-monitor-service';
 import type { GetNewsletterPreferencesResponse } from '@shared/types/newsletter';
+import { type UseQueryResult, useQuery } from '@tanstack/react-query';
+import { isEmpty, isNil } from 'lodash-es';
 
 export const useGetNewsletterPreferences = (
 	email: string | undefined
 ): UseQueryResult<GetNewsletterPreferencesResponse | null> => {
-	return useQuery([QUERY_KEYS.getNewsletterPreferences, email], () => {
-		if (isNil(email)) {
-			return null;
-		}
+	return useQuery({
+		queryKey: [QUERY_KEYS.getNewsletterPreferences, email],
+		queryFn: () => {
+			if (isNil(email)) {
+				return null;
+			}
 
-		if (isEmpty(email)) {
-			throw new Error(`Given email can't be empty. Received email: ${email}`);
-		}
+			if (isEmpty(email)) {
+				throw new Error(`Given email can't be empty. Received email: ${email}`);
+			}
 
-		return CampaignMonitorService.getPreferences(email);
+			return CampaignMonitorService.getPreferences(email);
+		},
 	});
 };

src/modules/account/services/folders/foldersService.ts

@@ -1,8 +1,7 @@
-import type { IPagination } from '@studiohyperdrive/pagination';
-import { stringifyUrl } from 'query-string';
-
 import type { Folder, FolderIeObject, SharedFolderResponse } from '@account/types';
 import { ApiService } from '@shared/services/api-service';
+import type { IPagination } from '@studiohyperdrive/pagination';
+import { stringifyUrl } from 'query-string';
 
 import {
 	FOLDERS_SERVICE_BASE_URL,
@@ -21,7 +20,7 @@ export abstract class FoldersService {
 		searchInput = '',
 		page = 0,
 		size = 20
-	): Promise<FolderIeObject> {
+	): Promise<IPagination<FolderIeObject>> {
 		return await ApiService.getApi()
 			.get(
 				stringifyUrl({

src/modules/account/views/AccountMyApplicationList.tsx

@@ -13,7 +13,10 @@ import {
 	type MaterialRequestDownloadQuality,
 	MaterialRequestKeys,
 } from '@material-requests/types';
-import type { OrderDirection } from '@meemoo/react-components';
+import {
+	formatDurationHoursMinutesSeconds,
+	formatDurationMinutesSeconds,
+} from '@meemoo/react-components';
 import { ErrorNoAccess } from '@shared/components/ErrorNoAccess';
 import { Loading } from '@shared/components/Loading';
 import { getIconFromObjectType } from '@shared/components/MediaCard';
@@ -30,6 +33,8 @@ import {
 	setShowMaterialRequestCenter,
 } from '@shared/store/ui';
 import type { DefaultSeoInfo } from '@shared/types/seo';
+import { asDate, formatMediumDate } from '@shared/utils/dates';
+import { AvoSearchOrderDirection } from '@viaa/avo2-types';
 import { VisitorLayout } from '@visitor-layout/index';
 import clsx from 'clsx';
 import { isEmpty } from 'lodash-es';
@@ -54,7 +59,7 @@ export const AccountMyApplicationList: FC<DefaultSeoInfo> = ({ url, canonicalUrl
 		refetch: refetchMaterialRequests,
 	} = useGetPendingMaterialRequests({
 		orderProp: MaterialRequestKeys.createdAt,
-		orderDirection: 'desc' as OrderDirection,
+		orderDirection: AvoSearchOrderDirection.DESC,
 	});
 
 	const noData = useMemo(