Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bump next intl@3.1.2 #333

Closed
wants to merge 6 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update researcher to work with "next-intl@3.1.2"
barbarah committed Nov 27, 2023
commit 0b5cdaed52f0a99b95931ea404b95965acba82cc
Original file line number Diff line number Diff line change
@@ -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>
);
}
10 changes: 8 additions & 2 deletions apps/dataset-browser/src/app/[locale]/datasets/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions apps/dataset-browser/src/messages/en/messages.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
4 changes: 4 additions & 0 deletions apps/dataset-browser/src/messages/nl/messages.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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>;
9 changes: 4 additions & 5 deletions apps/researcher/src/app/[locale]/(objects)/page.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
Original file line number Diff line number Diff line change
@@ -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/actions';
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 {
7 changes: 3 additions & 4 deletions apps/researcher/src/app/[locale]/communities/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,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, ManageMembersButton} from './buttons';
import {
getMemberships,
@@ -26,12 +26,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;
};
}

@@ -43,7 +42,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 {
14 changes: 6 additions & 8 deletions apps/researcher/src/app/[locale]/communities/community-card.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import {Community} from '@/lib/community/definitions';
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>
20 changes: 5 additions & 15 deletions apps/researcher/src/app/[locale]/communities/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {getCommunities, getMyCommunities} from '@/lib/community/actions';
import {SortBy} from '@/lib/community/definitions';
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,
@@ -16,9 +16,6 @@ import {MyCommunityToggle} from './my-community-toggle';
export const revalidate = 86400;

interface Props {
params: {
locale: string;
};
searchParams?: {
query?: string;
sortBy?: SortBy;
@@ -27,11 +24,8 @@ interface Props {
};
}

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, onlyMyCommunities} = searchParams;

@@ -102,11 +96,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">
50 changes: 26 additions & 24 deletions apps/researcher/src/app/[locale]/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 3 additions & 7 deletions apps/researcher/src/app/[locale]/navigation.tsx
Original file line number Diff line number Diff line change
@@ -9,17 +9,13 @@ 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 {UserButton, SignInButton, 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();

11 changes: 5 additions & 6 deletions apps/researcher/src/app/[locale]/persons/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {DateTimeFormatOptions, useTranslations, useLocale} from 'next-intl';
import {getTranslator} from 'next-intl/server';
import {DateTimeFormatOptions, useTranslations} from 'next-intl';
import {getTranslations} from 'next-intl/server';
import {PageHeader, PageTitle} from '@colonial-collections/ui';
import personFetcher from '@/lib/person-fetcher-instance';
import {getFormatter} from 'next-intl/server';
import {PersonIcon} from '@/components/icons';
import {H2, H3} from '@/components/titles';
import {ToFilteredListButton} from '@colonial-collections/ui/list';
import ToFilteredListButton from '@/components/to-filtered-list-button';
import {decodeRouteSegment} from '@/lib/clerk-route-segment-transformer';

// Revalidate the page
@@ -44,14 +44,13 @@ interface Props {
export default async function Details({params}: Props) {
const id = decodeRouteSegment(params.id);
const person = await personFetcher.getById({id});
const locale = useLocale();
const t = await getTranslator(locale, 'PersonDetails');
const t = await getTranslations('PersonDetails');

if (!person) {
return <div data-testid="no-entity">{t('noEntity')}</div>;
}

const format = await getFormatter(locale);
const format = await getFormatter();

const columnClassName = 'px-10 first:pl-0 last:pr-0 space-y-6 flex-1';
const dateFormat: DateTimeFormatOptions = {
9 changes: 4 additions & 5 deletions apps/researcher/src/app/[locale]/persons/page.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import personFetcher from '@/lib/person-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 PersonList from './person-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;
@@ -129,8 +129,7 @@ export default async function Home({searchParams = {}}: Props) {
console.error(err);
}

const locale = useLocale();
const t = await getTranslator(locale, 'Constituents');
const t = await getTranslations('Constituents');

return (
<>
2 changes: 1 addition & 1 deletion apps/researcher/src/app/[locale]/persons/person-card.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {useFormatter, useTranslations} from 'next-intl';
import Link from 'next-intl/link';
import {Link} from '@/navigation';
import {Person} from '@/lib/api/persons';
import {PersonIcon} from '@/components/icons';
import {encodeRouteSegment} from '@/lib/clerk-route-segment-transformer';
4 changes: 2 additions & 2 deletions apps/researcher/src/app/[locale]/tabs.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import classNames from 'classnames';
import {ObjectIcon, PersonIcon} from '@/components/icons';
import {useTranslations} from 'next-intl';
import Link from 'next-intl/link';
import {Link} from '@/navigation';
import {headers} from 'next/headers';
import {locales} from '@/middleware';
import {locales} from '@/navigation';

export default function Tabs() {
const t = useTranslations('Tabs');
24 changes: 24 additions & 0 deletions apps/researcher/src/components/list-store-updater.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
20 changes: 20 additions & 0 deletions apps/researcher/src/components/to-filtered-list-button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
'use client';

import {Link} from '@/navigation';
import {useListHref} from '@colonial-collections/list-store';
import {ReactNode} from 'react';

interface Props {
children: ReactNode;
className?: string;
}

export default function ToFilteredListButton({className, children}: Props) {
const href = useListHref();

return (
<Link href={href} className={className}>
{children}
</Link>
);
}
4 changes: 4 additions & 0 deletions apps/researcher/src/messages/en/messages.json
Original file line number Diff line number Diff line change
@@ -201,5 +201,9 @@
"communityIdTooSmall": "Community is required",
"citationTooSmall": "Resource is required",
"noCommunities": "You are not yet a member of a community that has permission to add a story. You can create a community or join an existing community."
},
"WorkInProgress": {
"message": "This website is a work in progress",
"roadmapLink": "Read about the current status and roadmap of this project."
}
}
4 changes: 4 additions & 0 deletions apps/researcher/src/messages/nl/messages.json
Original file line number Diff line number Diff line change
@@ -201,5 +201,9 @@
"communityIdTooSmall": "Community is vereist",
"citationTooSmall": "Bron is vereist",
"noCommunities": "U bent nog geen lid van een community die gemachtigd is een verhaal toe te voegen. U kunt een community maken of lid worden van een bestaande community."
},
"WorkInProgress": {
"message": "Aan deze website wordt gewerkt",
"roadmapLink": "Lees over de huidige status en roadmap van dit project."
}
}
10 changes: 3 additions & 7 deletions apps/researcher/src/middleware.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import createIntlMiddleware from 'next-intl/middleware';
import {authMiddleware} from '@clerk/nextjs';

// 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';
import {NextRequest} from 'next/server';

export const config = {
// Skip all internal paths
@@ -30,7 +26,7 @@ export default authMiddleware({
// See issue: https://github.com/vercel/next.js/issues/43704
request.headers.set('x-pathname', request.nextUrl.pathname);

const response = handleI18nRouting(request);
const response = handleI18nRouting(request as unknown as NextRequest);

return response;
},
6 changes: 6 additions & 0 deletions apps/researcher/src/navigation.ts
Original file line number Diff line number Diff line change
@@ -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});
1 change: 0 additions & 1 deletion packages/ui/list/index.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ export * from './paginator';
export * from './selected-filters';
export * from './search-field';
export * from './order-selector';
export * from './to-filtered-list-button';
export * from './multi-select-facet';
export * from './searchable-multi-select-facet';
export * from './date-range-facet';
45 changes: 0 additions & 45 deletions packages/ui/list/to-filtered-list-button.tsx

This file was deleted.

4 changes: 0 additions & 4 deletions packages/ui/messages/en.json
Original file line number Diff line number Diff line change
@@ -2,10 +2,6 @@
"Modal": {
"close": "Close"
},
"WorkInProgress": {
"message": "This website is a work in progress",
"roadmapLink": "Read about the current status and roadmap of this project."
},
"SearchField": {
"search": "Search for text",
"accessibilityTypeToFilter": "Type to filter on text",
4 changes: 0 additions & 4 deletions packages/ui/messages/nl.json
Original file line number Diff line number Diff line change
@@ -2,10 +2,6 @@
"Modal": {
"close": "Sluiten"
},
"WorkInProgress": {
"message": "Aan deze website wordt gewerkt",
"roadmapLink": "Lees over de huidige status en roadmap van dit project."
},
"SearchField": {
"search": "Zoeken",
"accessibilityTypeToFilter": "Typ om op tekst te filteren",
2 changes: 1 addition & 1 deletion packages/ui/modal.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

import {create} from 'zustand';
import {ReactNode, ButtonHTMLAttributes, useEffect, Fragment} from 'react';
import {usePathname} from 'next/navigation';
import {usePathname} from '@/navigation';
import {Dialog, Transition} from '@headlessui/react';
import {XMarkIcon} from '@heroicons/react/24/outline';
import {useTranslations} from 'next-intl';
2 changes: 1 addition & 1 deletion packages/ui/notifications.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
import {create} from 'zustand';
import {XMarkIcon} from '@heroicons/react/24/outline';
import {ReactNode, useEffect} from 'react';
import {usePathname} from 'next/navigation';
import {usePathname} from '@/navigation';

const typeColors = {
success: 'greenGrey',
2 changes: 1 addition & 1 deletion packages/ui/slide-out.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

import {create} from 'zustand';
import {ReactNode, ButtonHTMLAttributes, useEffect} from 'react';
import {usePathname} from 'next/navigation';
import {usePathname} from '@/navigation';

interface SlideOutState {
visibleIds: {