Update researcher to work with "[email protected]"

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

@@ -2,17 +2,14 @@
 
 import {Link} from '@/navigation';
 import {useListHref} from '@colonial-collections/list-store';
-import {ChevronLeftIcon} from '@heroicons/react/24/solid';
-import {useTranslations} from 'next-intl';
+import {ReactNode} from 'react';
 
-export default function BackButton() {
+export default function BackButton({children}: {children: ReactNode}) {
   const href = useListHref();
-  const t = useTranslations('Details');
 
   return (
     <Link href={href} className="inline-flex items-center mb-5 text-gray-900">
-      <ChevronLeftIcon className="h-5 w-5" />
-      {t('back')}
+      {children}
     </Link>
   );
 }

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

@@ -9,7 +9,10 @@ import {
   SlideOverDialog,
   LocalizedMarkdown,
 } from '@colonial-collections/ui';
-import {InformationCircleIcon} from '@heroicons/react/24/solid';
+import {
+  InformationCircleIcon,
+  ChevronLeftIcon,
+} from '@heroicons/react/24/solid';
 import datasetFetcher from '@/lib/dataset-fetcher-instance';
 import {Fragment} from 'react';
 import BooleanMeasurement from '@/components/boolean-measurement';
@@ -91,7 +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>
-          <BackButton />
+          <BackButton>
+            <ChevronLeftIcon className="h-5 w-5" />
+            {t('back')}
+          </BackButton>
           <nav className="flex-1 space-y-1 pb-4">
             {navigation.map(item => (
               <a

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

@@ -107,5 +107,9 @@
   },
   "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."
   }
 }

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

@@ -106,5 +106,9 @@
   },
   "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."
   }
 }

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, MetadataEntry} from './metadata';
@@ -80,7 +80,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>;

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

@@ -1,13 +1,12 @@
 import heritageObjects from '@/lib/heritage-objects-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 HeritageObjectList from './heritage-object-list';
 import {sortMapping} from './sort-mapping';
 import {
   fromSearchParamsToSearchOptions,
   getClientSortBy,
   Type as SearchParamType,
-  ListStoreUpdater,
 } from '@colonial-collections/list-store';
 import {
   SearchResult,
@@ -33,6 +32,7 @@ import {
 import {AdjustmentsHorizontalIcon} from '@heroicons/react/20/solid';
 import Tabs from '../tabs';
 import {ElementType} from 'react';
+import {ListStoreUpdater} from '@/components/list-store-updater';
 
 // Revalidate the page every n seconds
 export const revalidate = 60;
@@ -147,8 +147,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 (
     <>

apps/researcher/src/app/[locale]/communities/[slug]/[listId]/page.tsx

@@ -1,4 +1,4 @@
-import {getTranslator} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 import {objectList as objectListDb} from '@colonial-collections/database';
 import ErrorMessage from '@/components/error-message';
 import Link from 'next/link';
@@ -9,13 +9,12 @@ import {getCommunityBySlug} from '@/lib/community';
 interface Props {
   params: {
     slug: string;
-    locale: string;
     listId: string;
   };
 }
 
 export default async function Page({params}: Props) {
-  const t = await getTranslator(params.locale, 'ObjectList');
+  const t = await getTranslations('ObjectList');
 
   let objectList;
   try {

apps/researcher/src/app/[locale]/communities/[slug]/edit-community-form.tsx

@@ -7,7 +7,7 @@ import {z} from 'zod';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {updateCommunityAndRevalidate} from './actions';
 import {camelCase} from 'tiny-case';
-import {useRouter} from 'next-intl/client';
+import {useRouter} from '@/navigation';
 
 interface Props {
   communityId: string;
@@ -71,7 +71,7 @@ export default function EditCommunityForm({
         id: communityId,
         ...formValues,
       });
-      router.push(`/communities/${newCommunity.slug}`, {scroll: false});
+      router.push(`/communities/${newCommunity.slug}`);
       addNotification({
         id: 'add-object-list-success',
         message: <>{t('communityUpdated')}</>,

apps/researcher/src/app/[locale]/communities/[slug]/page.tsx

@@ -4,7 +4,7 @@ import {
 } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import Image from 'next/image';
-import {getTranslator} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 import {JoinCommunityButton, ButtonGroup} from './buttons';
 import {
   getMemberships,
@@ -25,12 +25,11 @@ import {
   Notifications,
 } from '@colonial-collections/ui';
 import EditCommunityForm from './edit-community-form';
-import {ToFilteredListButton} from '@colonial-collections/ui/list';
+import ToFilteredListButton from '@/components/to-filtered-list-button';
 
 interface Props {
   params: {
     slug: string;
-    locale: string;
   };
 }
 
@@ -42,7 +41,7 @@ const slideOutEditFormId = 'edit-community-description';
 export const dynamic = 'force-dynamic';
 
 export default async function CommunityPage({params}: Props) {
-  const t = await getTranslator(params.locale, 'Community');
+  const t = await getTranslations('Community');
 
   let community;
   try {

apps/researcher/src/app/[locale]/communities/community-card.tsx

@@ -1,18 +1,17 @@
 import {Community} from '@/lib/community';
-import {getTranslator} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 import {useTranslations} from 'next-intl';
-import Link from 'next-intl/link';
+import {Link} from '@/navigation';
 import Image from 'next/image';
 import {Suspense} from 'react';
 import {objectList} from '@colonial-collections/database';
 
 interface MembershipCountProps {
   communityId: string;
-  locale: string;
 }
 
-async function ObjectListCount({communityId, locale}: MembershipCountProps) {
-  const t = await getTranslator(locale, 'Communities');
+async function ObjectListCount({communityId}: MembershipCountProps) {
+  const t = await getTranslations('Communities');
 
   try {
     const objectListCount = await objectList.countByCommunityId(communityId);
@@ -27,10 +26,9 @@ async function ObjectListCount({communityId, locale}: MembershipCountProps) {
 
 interface CommunityCardProps {
   community: Community;
-  locale: string;
 }
 
-export default function CommunityCard({community, locale}: CommunityCardProps) {
+export default function CommunityCard({community}: CommunityCardProps) {
   const t = useTranslations('Communities');
 
   return (
@@ -72,7 +70,7 @@ export default function CommunityCard({community, locale}: CommunityCardProps) {
         </div>
         <div className="w-1/2 p-4">
           <Suspense>
-            <ObjectListCount communityId={community.id} locale={locale} />
+            <ObjectListCount communityId={community.id} />
           </Suspense>
         </div>
       </div>

apps/researcher/src/app/[locale]/communities/page.tsx

@@ -1,8 +1,8 @@
 import {getCommunities, SortBy} from '@/lib/community';
-import {getTranslator} from 'next-intl/server';
+import {getTranslations} from 'next-intl/server';
 import ErrorMessage from '@/components/error-message';
 import CommunityCard from './community-card';
-import {ListStoreUpdater} from '@colonial-collections/list-store';
+import {ListStoreUpdater} from '@/components/list-store-updater';
 import {
   Paginator,
   SearchField,
@@ -13,21 +13,15 @@ import {
 export const revalidate = 86400;
 
 interface Props {
-  params: {
-    locale: string;
-  };
   searchParams?: {
     query?: string;
     sortBy?: SortBy;
     offset?: number;
   };
 }
 
-export default async function CommunitiesPage({
-  params,
-  searchParams = {},
-}: Props) {
-  const t = await getTranslator(params.locale, 'Communities');
+export default async function CommunitiesPage({searchParams = {}}: Props) {
+  const t = await getTranslations('Communities');
 
   const {query, sortBy, offset} = searchParams;
 
@@ -68,11 +62,7 @@ export default async function CommunitiesPage({
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 h-full grow content-stretch gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 mt-10">
         {communities.map(community => (
-          <CommunityCard
-            key={community.id}
-            community={community}
-            locale={params.locale}
-          />
+          <CommunityCard key={community.id} community={community} />
         ))}
       </div>
       <div className="sm:px-10">

apps/researcher/src/app/[locale]/layout.tsx

@@ -3,9 +3,9 @@ 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 {getTranslations} from 'next-intl/server';
+import {Link} from '@/navigation';
+import {WipMessage, IntlProvider} from '@colonial-collections/ui';
 import {ClerkProvider} from '@clerk/nextjs';
 
 interface Props {
@@ -21,34 +21,36 @@ export default async function RootLayout({children, params: {locale}}: Props) {
     notFound();
   }
 
-  const t = await getTranslator(locale, 'ScreenReaderMenu');
+  const t = await getTranslations('ScreenReaderMenu');
   const clerkLocale = (await import(`@/messages/${locale}/clerk`)).default;
 
   return (
     <ClerkProvider localization={clerkLocale}>
       <html className="h-full min-h-screen" lang={locale}>
         <body className="h-full 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>
-            <div className="max-w-[1800px] mx-auto min-h-screen flex flex-col justify-stretch items-stretch gap-8 pb-40">
-              <header className="w-full px-10 py-4 bg-neutral-50">
-                <Navigation locales={locales} />
-              </header>
-              {children}
-            </div>
+            <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>
+              <div className="max-w-[1800px] mx-auto min-h-screen flex flex-col justify-stretch items-stretch gap-8 pb-40">
+                <header className="w-full px-10 py-4 bg-neutral-50">
+                  <Navigation />
+                </header>
+                {children}
+              </div>
+            </IntlProvider>
           </NextIntlClientProvider>
         </body>
       </html>

apps/researcher/src/app/[locale]/navigation.tsx

@@ -9,8 +9,7 @@ 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 {
@@ -20,12 +19,9 @@ import {
   SignedIn,
   SignedOut,
 } from '@clerk/nextjs';
+import {locales} from '@/navigation';
 
-interface Props {
-  locales: string[];
-}
-
-export default function Navigation({locales}: Props) {
+export default function Navigation() {
   const pathname = usePathname();
   const locale = useLocale();