Bump next [email protected]

apps/dataset-browser/package.json

@@ -32,7 +32,7 @@
     "classnames": "2.3.2",
     "fetch-sparql-endpoint": "4.1.0",
     "next": "14.0.3",
-    "next-intl": "3.0.0-beta.19",
+    "next-intl": "3.1.4",
     "rdf-object": "1.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/dataset-browser/src/app/[locale]/dataset-card.tsx

@@ -1,4 +1,4 @@
-import Link from 'next-intl/link';
+import {Link} from '@/navigation';
 import {useTranslations} from 'next-intl';
 import {Dataset} from '@/lib/datasets';
 import {Badge} from '@colonial-collections/ui';

apps/dataset-browser/src/app/[locale]/datasets/[id]/back-button.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import {Link} from '@/navigation';
+import {useListHref} from '@colonial-collections/list-store';
+import {ReactNode} from 'react';
+
+export default function BackButton({children}: {children: ReactNode}) {
+  const href = useListHref();
+
+  return (
+    <Link
+      data-testid="to-filtered-list-button"
+      href={href}
+      className="inline-flex items-center mb-5 text-gray-900"
+    >
+      {children}
+    </Link>
+  );
+}

apps/dataset-browser/src/app/[locale]/datasets/[id]/page.tsx

@@ -1,5 +1,4 @@
-import {getTranslator, getFormatter} from 'next-intl/server';
-import {useLocale} from 'next-intl';
+import {getTranslations, getFormatter} from 'next-intl/server';
 import {
   PageHeader,
   PageTitle,
@@ -11,14 +10,14 @@ import {
   LocalizedMarkdown,
 } from '@colonial-collections/ui';
 import {
-  ChevronLeftIcon,
   InformationCircleIcon,
+  ChevronLeftIcon,
 } from '@heroicons/react/24/solid';
 import datasetFetcher from '@/lib/dataset-fetcher-instance';
 import {Fragment} from 'react';
 import BooleanMeasurement from '@/components/boolean-measurement';
 import metricIds from '@/lib/transparency-metrics';
-import {ToFilteredListButton} from '@colonial-collections/ui/list';
+import BackButton from './back-button';
 
 interface Props {
   params: {id: string};
@@ -30,10 +29,9 @@ export const revalidate = 0;
 export default async function Details({params}: Props) {
   const id = decodeURIComponent(params.id);
   const dataset = await datasetFetcher.getById({id});
-  const locale = useLocale();
-  const t = await getTranslator(locale, 'Details');
-  const tMetrics = await getTranslator(locale, 'TransparencyMetrics');
-  const format = await getFormatter(locale);
+  const t = await getTranslations('Details');
+  const tMetrics = await getTranslations('TransparencyMetrics');
+  const format = await getFormatter();
 
   if (!dataset) {
     return <div data-testid="no-dataset">{t('noDataset')}</div>;
@@ -96,10 +94,10 @@ export default async function Details({params}: Props) {
     <div className="flex flex-col md:flex-row justify-between gap-6">
       <aside className="w-full sm:w-1/5 flex flex-row md:flex-col border-r-2 border-white">
         <div>
-          <ToFilteredListButton className="inline-flex items-center mb-5 text-gray-900">
+          <BackButton>
             <ChevronLeftIcon className="h-5 w-5" />
             {t('back')}
-          </ToFilteredListButton>
+          </BackButton>
           <nav className="flex-1 space-y-1 pb-4">
             {navigation.map(item => (
               <a

apps/dataset-browser/src/app/[locale]/layout.tsx

@@ -1,56 +1,51 @@
 import '../globals.css';
 import {ReactNode} from 'react';
-import {notFound} from 'next/navigation';
 import Navigation from './navigation';
-import {NextIntlClientProvider} from 'next-intl';
-import {getTranslator} from 'next-intl/server';
-import {locales} from '@/middleware';
-import {WipMessage} from '@colonial-collections/ui';
+import {NextIntlClientProvider, useMessages, useTranslations} from 'next-intl';
+import {WipMessage, IntlProvider} from '@colonial-collections/ui';
 import {ListProvider, defaultSortBy} from '@colonial-collections/list-store';
+import {Link} from '@/navigation';
 
 interface Props {
   children: ReactNode;
   params: {locale: string};
 }
 
-export default async function RootLayout({children, params: {locale}}: Props) {
-  let messages;
-  try {
-    messages = (await import(`../../messages/${locale}/messages.json`)).default;
-  } catch (err) {
-    notFound();
-  }
+export default function RootLayout({children, params: {locale}}: Props) {
+  const messages = useMessages();
 
-  const t = await getTranslator(locale, 'ScreenReaderMenu');
+  const t = useTranslations('ScreenReaderMenu');
 
   return (
     <html className="h-full" lang={locale}>
       <body className="flex flex-col min-h-screen">
-        <NextIntlClientProvider locale={locale} messages={messages}>
-          <WipMessage />
-          <div className="sr-only">
-            <ul>
-              <li>
-                <a href="#facets">{t('jumpFilters')}</a>
-              </li>
-              <li>
-                <a href="#search-results">{t('jumpResults')}</a>
-              </li>
-              <li>
-                <a href="#page-navigation">{t('jumpNavigation')}</a>
-              </li>
-            </ul>
-          </div>
-          <header className="max-w-7xl container mx-auto px-4 py-4 md:px-8 md:py-8">
-            <Navigation locales={locales} />
-          </header>
-          <main className="bg-sand-50 pb-32">
-            <div className="max-w-7xl container mx-auto p-8">
-              <ListProvider baseUrl="/" defaultSortBy={defaultSortBy}>
-                {children}
-              </ListProvider>
+        <NextIntlClientProvider messages={messages}>
+          <IntlProvider locale={locale}>
+            <WipMessage Link={Link} />
+            <div className="sr-only">
+              <ul>
+                <li>
+                  <a href="#facets">{t('jumpFilters')}</a>
+                </li>
+                <li>
+                  <a href="#search-results">{t('jumpResults')}</a>
+                </li>
+                <li>
+                  <a href="#page-navigation">{t('jumpNavigation')}</a>
+                </li>
+              </ul>
             </div>
-          </main>
+            <header className="max-w-7xl container mx-auto px-4 py-4 md:px-8 md:py-8">
+              <Navigation />
+            </header>
+            <main className="bg-sand-50 pb-32">
+              <div className="max-w-7xl container mx-auto p-8">
+                <ListProvider baseUrl="/" defaultSortBy={defaultSortBy}>
+                  {children}
+                </ListProvider>
+              </div>
+            </main>
+          </IntlProvider>
         </NextIntlClientProvider>
       </body>
     </html>

apps/dataset-browser/src/app/[locale]/list-store-updater.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import {useRouter} from '@/navigation';
+import {
+  useSearchParamsUpdate,
+  useUpdateListStore,
+} from '@colonial-collections/list-store';
+
+interface Props {
+  totalCount: number;
+  offset: number;
+  limit: number;
+  query: string;
+  sortBy?: string;
+  selectedFilters?: {[filterKey: string]: string[] | undefined};
+}
+
+export function ListStoreUpdater(updateProps: Props) {
+  const router = useRouter();
+  useUpdateListStore(updateProps);
+  useSearchParamsUpdate(router.replace);
+
+  return null;
+}

apps/dataset-browser/src/app/[locale]/navigation.tsx

@@ -9,16 +9,12 @@ import {
   CheckIcon,
 } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
-import {usePathname} from 'next-intl/client';
-import Link from 'next-intl/link';
+import {Link, usePathname} from '@/navigation';
 import {useLocale, useTranslations} from 'next-intl';
 import {Fragment} from 'react';
+import {locales} from '@/navigation';
 
-interface Props {
-  locales: string[];
-}
-
-export default function Navigation({locales}: Props) {
+export default function Navigation() {
   const pathname = usePathname();
   const locale = useLocale();
 

apps/dataset-browser/src/app/[locale]/page.tsx

@@ -1,13 +1,12 @@
 import datasetFetcher from '@/lib/dataset-fetcher-instance';
-import {useLocale, useTranslations} from 'next-intl';
-import {getTranslator} from 'next-intl/server';
+import {useTranslations} from 'next-intl';
+import {getTranslations} from 'next-intl/server';
 import DatasetList from './dataset-list';
 import {sortMapping} from './sort-mapping';
 import {
   fromSearchParamsToSearchOptions,
   getClientSortBy,
   Type as SearchParamType,
-  ListStoreUpdater,
 } from '@colonial-collections/list-store';
 import {
   SearchResult,
@@ -32,6 +31,7 @@ import {
 } from '@colonial-collections/ui';
 import {AdjustmentsHorizontalIcon} from '@heroicons/react/20/solid';
 import {ElementType} from 'react';
+import {ListStoreUpdater} from './list-store-updater';
 
 // Revalidate the page every n seconds
 export const revalidate = 60;
@@ -127,8 +127,7 @@ export default async function Home({searchParams = {}}: Props) {
     console.error(err);
   }
 
-  const locale = useLocale();
-  const t = await getTranslator(locale, 'Home');
+  const t = await getTranslations('Home');
 
   return (
     <div className="flex flex-col md:flex-row gap-6">

apps/dataset-browser/src/messages/en/messages.json

@@ -99,36 +99,17 @@
       "descriptionFalse": "The dataset is not available in an RDF format."
     }
   },
-  "Paginator": {
-    "results": "Showing <number>{start}</number> to <number>{end}</number> of <number>{totalCount}</number> results",
-    "previous": "Previous",
-    "next": "Next"
-  },
   "Filters": {
     "licensesFilter": "Licenses",
     "publishersFilter": "Publishers",
     "spatialCoveragesFilter": "Locations",
-    "genresFilter": "Genres",
-    "search": "Search",
-    "filters": "Filters",
-    "expandFilter": "Expand",
-    "clearAllFilters": "Clear all",
-    "filterSearchPlaceholder": "Filter on {filterName}",
-    "accessibilityTypeToFilter": "Type to filter on text.",
-    "accessibilitySelectToFilter": "Select a checkbox to filter",
-    "accessibilityClickToSearch": "Click to search"
+    "genresFilter": "Genres"
   },
-  "Sort": {
-    "relevanceDesc": "Relevance",
-    "nameAsc": "Name - Ascending",
-    "nameDesc": "Name - Descending",
-    "accessibilitySelectToChangeOrder": "Select to change the ordering of the result"
+  "ErrorPage": {
+    "message": "Something went wrong!"
   },
   "WorkInProgress": {
     "message": "This website is a work in progress",
     "roadmapLink": "Read about the current status and roadmap of this project."
-  },
-  "ErrorPage": {
-    "message": "Something went wrong!"
   }
 }

apps/dataset-browser/src/messages/nl/messages.json

@@ -98,36 +98,17 @@
       "descriptionFalse": "De dataset is niet beschikbaar in een RDF-formaat."
     }
   },
-  "Paginator": {
-    "results": "Resultaat <number>{start}</number> tot <number>{end}</number> van de <number>{totalCount}</number>",
-    "previous": "Vorige",
-    "next": "Volgende"
-  },
   "Filters": {
     "licensesFilter": "Licenties",
     "publishersFilter": "Eigenaren",
     "spatialCoveragesFilter": "Locaties",
-    "genresFilter": "Genres",
-    "search": "Zoeken",
-    "filters": "Filters",
-    "expandFilter": "Uitklappen",
-    "clearAllFilters": "Alles verwijderen",
-    "filterSearchPlaceholder": "Filteren op {filterName}",
-    "accessibilityTypeToFilter": "Typ om op tekst te filteren",
-    "accessibilitySelectToFilter": "Selecteer een selectievakje om te filteren",
-    "accessibilityClickToSearch": "Klik om te zoeken"
+    "genresFilter": "Genres"
   },
-  "Sort": {
-    "relevanceDesc": "Relevantie",
-    "nameAsc": "Naam - Oplopend",
-    "nameDesc": "Naam - Aflopend",
-    "accessibilitySelectToChangeOrder": "Selecteer om de volgorde van het resultaat te wijzigen"
+  "ErrorPage": {
+    "message": "Er is iets fout gegaan!"
   },
   "WorkInProgress": {
     "message": "Aan deze website wordt gewerkt",
     "roadmapLink": "Lees over de huidige status en roadmap van dit project."
-  },
-  "ErrorPage": {
-    "message": "Er is iets fout gegaan!"
   }
 }

apps/dataset-browser/src/middleware.ts

@@ -1,10 +1,5 @@
 import createIntlMiddleware from 'next-intl/middleware';
-
-// Set the available locales here. These values should match a .json file in /messages.
-// The const `locales` cannot be set dynamically based on files in /messages,
-// because native Node.js APIs are not supported in Next.js middleware.
-// So you can't read the filesystem.
-export const locales = ['en', 'nl'];
+import {locales} from './navigation';
 
 // The middleware intercepts requests to `/` and will redirect
 // to one of the configured locales instead (e.g. `/en`).

apps/dataset-browser/src/navigation.ts

@@ -0,0 +1,6 @@
+import {createSharedPathnamesNavigation} from 'next-intl/navigation';
+
+export const locales = ['en', 'nl'] as const;
+
+export const {Link, redirect, usePathname, useRouter} =
+  createSharedPathnamesNavigation({locales});

apps/researcher/package.json

@@ -38,7 +38,7 @@
     "classnames": "2.3.2",
     "fetch-sparql-endpoint": "4.1.0",
     "next": "14.0.3",
-    "next-intl": "3.0.0-beta.19",
+    "next-intl": "3.1.4",
     "openseadragon": "4.1.0",
     "rdf-object": "1.14.0",
     "react": "18.2.0",

apps/researcher/src/app/[locale]/(objects)/heritage-object-card.tsx

@@ -1,4 +1,4 @@
-import Link from 'next-intl/link';
+import {Link} from '@/navigation';
 import {useTranslations} from 'next-intl';
 import {HeritageObject} from '@/lib/api/objects';
 import Image from 'next/image';

apps/researcher/src/app/[locale]/(objects)/objects/[id]/page.tsx

@@ -1,8 +1,8 @@
 import {useLocale, useTranslations} from 'next-intl';
-import {getTranslator} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 import heritageObjects from '@/lib/heritage-objects-instance';
 import Gallery from './gallery';
-import {ToFilteredListButton} from '@colonial-collections/ui/list';
+import ToFilteredListButton from '@/components/to-filtered-list-button';
 import {ChevronLeftIcon} from '@heroicons/react/24/solid';
 import {ObjectIcon} from '@/components/icons';
 import {MetadataContainer, MetadataEntries} from './metadata';
@@ -79,7 +79,7 @@ export default async function Details({params}: Props) {
   const id = decodeRouteSegment(params.id);
   const object = await heritageObjects.getById(id);
   const locale = useLocale();
-  const t = await getTranslator(locale, 'ObjectDetails');
+  const t = await getTranslations('ObjectDetails');
 
   if (!object) {
     return <div data-testid="no-entity">{t('noEntity')}</div>;