Update link resolver

common/services/prismic/link-resolver.test.ts

@@ -7,22 +7,22 @@ import linkResolver from './link-resolver';
  */
 describe('webcomic edge case', () => {
   test.each([
-    { doc: { type: 'webcomics', id: '1' }, path: '/articles/1' },
-    { doc: { type: 'webcomic-series', id: '1' }, path: '/series/1' },
+    { doc: { type: 'webcomics', uid: '1' }, path: '/articles/1' },
+    { doc: { type: 'webcomic-series', uid: '1' }, path: '/series/1' },
   ])('$doc resolves to $path', ({ doc, path }) => {
     expect(linkResolver(doc)).toBe(path);
   });
 });
 
 it('resolves exhibition guides to /guides/exhibitions/{id}', () => {
-  const doc = { type: 'exhibition-guides', id: '1' };
+  const doc = { type: 'exhibition-guides', uid: '1' };
   expect(linkResolver(doc)).toBe('/guides/exhibitions/1');
 });
 
 test.each([
-  { doc: { type: 'articles', id: '1' }, path: '/articles/1' },
-  { doc: { type: 'pages', id: '1' }, path: '/pages/1' },
-  { doc: { type: 'not a thing', id: '1' }, path: '/' },
+  { doc: { type: 'articles', uid: '1' }, path: '/articles/1' },
+  { doc: { type: 'pages', uid: '1' }, path: '/pages/1' },
+  { doc: { type: 'not a thing', uid: '1' }, path: '/' },
 ])('$doc resolves to $path', ({ doc, path }) => {
   expect(linkResolver(doc)).toBe(path);
 });

common/services/prismic/link-resolver.ts

@@ -1,46 +1,47 @@
 import { isContentType } from './content-types';
 
 type Props = {
-  id: string;
+  uid?: string;
   type: string;
 };
 type DataProps = {
-  id: string;
+  uid?: string;
   type: string;
   data: {
     relatedDocument?: {
-      id: string;
+      uid: string;
       type: string;
     };
   };
 };
-function linkResolver(doc: Props | DataProps): string {
-  const { id, type } = doc;
 
-  if (type === 'webcomics') return `/articles/${id}`;
-  if (type === 'webcomic-series') return `/series/${id}`;
+function linkResolver(doc: Props | DataProps): string {
+  const { uid, type } = doc;
+  if (!uid) return '/';
+  if (type === 'webcomics') return `/articles/${uid}`;
+  if (type === 'webcomic-series') return `/series/${uid}`;
   if (
     type === 'exhibition-guides' ||
     type === 'exhibition-texts' ||
     type === 'exhibition-highlight-tours'
   )
-    return `/guides/exhibitions/${id}`;
+    return `/guides/exhibitions/${uid}`;
 
   if (type === 'visual-stories') {
     if ('data' in doc) {
       const {
         data: { relatedDocument },
       } = doc;
-      if (relatedDocument?.id) {
-        return `/${relatedDocument.type}/${relatedDocument.id}/visual-stories`;
+      if (relatedDocument?.uid) {
+        return `/${relatedDocument.type}/${relatedDocument.uid}/visual-stories`;
       } else {
-        return `/visual-stories/${id}`;
+        return `/visual-stories/${uid}`;
       }
     }
   }
 
   if (isContentType(type)) {
-    return `/${type}/${id}`;
+    return `/${type}/${uid}`;
   }
 
   return '/';

common/services/prismic/transformers/index.test.ts

@@ -28,11 +28,11 @@ describe('transformLink', () => {
     const result = transformLink({
       id: 'YoedaBEAACMAXnil',
       type: 'projects',
-      slug: 'ellen-reid-soundwalk-at-regents-park',
+      uid: 'ellen-reid-soundwalk-at-regents-park',
       link_type: 'Document',
       isBroken: false,
     });
 
-    expect(result).toBe('/projects/YoedaBEAACMAXnil');
+    expect(result).toBe('/projects/ellen-reid-soundwalk-at-regents-park');
   });
 });

content/webapp/components/BannerCard/BannerCard.tsx

@@ -119,7 +119,7 @@ const BannerCard: FunctionComponent<Props> = ({
       },
     link:
       (item.promo && item.promo.link) ||
-      linkResolver({ id: item.id, type: item.type }),
+      linkResolver({ uid: item.uid, type: item.type }),
   };
   return (
     <CardOuter href={link} $background={background}>

content/webapp/components/BookPromo/BookPromo.tsx

@@ -5,6 +5,7 @@ import { BookBasic } from '@weco/content/types/books';
 import Space from '@weco/common/views/components/styled/Space';
 import LabelsList from '@weco/common/views/components/LabelsList/LabelsList';
 import BookImage from '@weco/content/components/BookImage/BookImage';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 type LinkSpaceAttrs = {
   $url: string;
@@ -56,9 +57,9 @@ type Props = {
 };
 
 const BookPromo: FunctionComponent<Props> = ({ book }) => {
-  const { id, title, subtitle, promo, cover } = book;
+  const { title, subtitle, promo, cover } = book;
   return (
-    <LinkSpace $url={`/books/${id}`}>
+    <LinkSpace $url={linkResolver(book)}>
       <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>
         <BookImage
           image={{

content/webapp/components/EventCard/EventCard.tsx

@@ -8,6 +8,7 @@ import { font } from '@weco/common/utils/classnames';
 import { getCrop } from '@weco/common/model/image';
 import Space from '@weco/common/views/components/styled/Space';
 import WatchLabel from '@weco/content/components/WatchLabel/WatchLabel';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 type Props = {
   event: EventBasic;
@@ -70,7 +71,7 @@ const EventCard: FunctionComponent<Props> = ({ event, xOfY }) => {
 
   return (
     <CompactCard
-      url={`/events/${event.id}`}
+      url={linkResolver(event)}
       title={event.title}
       primaryLabels={event.primaryLabels}
       secondaryLabels={event.secondaryLabels}

content/webapp/components/EventsSearchResults/index.tsx

@@ -91,7 +91,7 @@ const EventsSearchResults: FunctionComponent<Props> = ({ events }: Props) => {
         return (
           <CardOuter
             key={event.id}
-            href={linkResolver({ id: event.id, type: 'events' })}
+            href={linkResolver({ uid: event.uid, type: 'events' })}
           >
             <CardImageWrapper>
               {croppedImage && (

content/webapp/components/Exhibition/Exhibition.tsx

@@ -51,6 +51,7 @@ import {
   ResourceLink,
   ResourceLinkIconWrapper,
 } from '@weco/content/components/styled/AccessResources';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 function getBorderColor({
   type,
@@ -223,7 +224,7 @@ const Exhibition: FunctionComponent<Props> = ({
         text: 'Exhibitions',
       },
       {
-        url: `/exhibitions/${exhibition.id}`,
+        url: linkResolver(exhibition),
         text: exhibition.title,
         isHidden: true,
       },

content/webapp/components/FeaturedCard/FeaturedCard.tsx

@@ -81,7 +81,7 @@ export function convertItemToFeaturedCardProps(
     },
     labels: item.labels,
     link: {
-      url: linkResolver({ id: item.id, type: item.type }),
+      url: linkResolver({ uid: item.uid, type: item.type }),
       text: item.title,
     },
   };

content/webapp/components/Installation/Installation.tsx

@@ -16,6 +16,7 @@ import ContentPage from '@weco/content/components/ContentPage/ContentPage';
 import { isNotUndefined } from '@weco/common/utils/type-guards';
 import { fetchExhibitExhibition } from '@weco/content/services/prismic/fetch/exhibitions';
 import { createScreenreaderLabel } from '@weco/common/utils/telephone-numbers';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 type Props = {
   installation: InstallationType;
@@ -46,7 +47,7 @@ const Installation: FunctionComponent<Props> = ({ installation }) => {
           }
         : undefined,
       {
-        url: `/exhibitions/${installation.id}`,
+        url: linkResolver(installation),
         text: installation.title,
         isHidden: true,
       },

content/webapp/components/SearchResults/SearchResults.tsx

@@ -10,6 +10,7 @@ import ArticleCard from '@weco/content/components/ArticleCard/ArticleCard';
 import { getCrop } from '@weco/common/model/image';
 import { Card } from '@weco/content/types/card';
 import PlainList from '@weco/common/views/components/styled/PlainList';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 const Result = styled.li`
   border-top: 1px solid ${props => props.theme.color('warmNeutral.400')};
@@ -43,7 +44,6 @@ const SearchResults: FunctionComponent<Props> = ({
     {summary && (
       <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>{summary}</Space>
     )}
-
     {items.length > 0 && (
       <PlainList>
         {items.map((item, index) => (
@@ -81,7 +81,7 @@ const SearchResults: FunctionComponent<Props> = ({
             )}
             {item.type === 'pages' && (
               <CompactCard
-                url={`/pages/${item.id}`}
+                url={linkResolver(item)}
                 title={item.title || ''}
                 primaryLabels={[]}
                 secondaryLabels={[]}
@@ -114,7 +114,7 @@ const SearchResults: FunctionComponent<Props> = ({
             )}
             {item.type === 'event-series' && (
               <CompactCard
-                url={`/event-series/${item.id}`}
+                url={linkResolver(item)}
                 title={item.title}
                 primaryLabels={item.labels}
                 secondaryLabels={[]}
@@ -147,7 +147,7 @@ const SearchResults: FunctionComponent<Props> = ({
             )}
             {item.type === 'books' && (
               <CompactCard
-                url={`/books/${item.id}`}
+                url={linkResolver(item)}
                 title={item.title}
                 primaryLabels={item.labels}
                 secondaryLabels={[]}
@@ -187,7 +187,7 @@ const SearchResults: FunctionComponent<Props> = ({
             )}
             {item.type === 'series' && (
               <CompactCard
-                url={`/series/${item.id}`}
+                url={linkResolver(item)}
                 title={item.title || ''}
                 primaryLabels={item.labels}
                 secondaryLabels={[]}
@@ -226,7 +226,7 @@ const SearchResults: FunctionComponent<Props> = ({
             )}
             {item.type === 'exhibitions' && (
               <CompactCard
-                url={`/exhibitions/${item.id}`}
+                url={linkResolver(item)}
                 title={item.title}
                 primaryLabels={item.labels}
                 secondaryLabels={[]}

content/webapp/components/StoriesGrid/index.tsx

@@ -124,7 +124,7 @@ const StoriesGrid: FunctionComponent<Props> = ({
           <StoryWrapper
             key={article.id}
             as="a"
-            href={linkResolver({ id: article.id, type: 'articles' })}
+            href={linkResolver({ uid: article.uid, type: 'articles' })}
             $isDetailed={isDetailed}
             data-testid="story-search-result"
           >

content/webapp/pages/articles/[articleId].tsx

@@ -41,6 +41,7 @@ import { createPrismicLink } from '@weco/common/views/components/ApiToolbar';
 import { setCacheControl } from '@weco/content/utils/setCacheControl';
 import { isNotUndefined } from '@weco/common/utils/type-guards';
 import Standfirst from '@weco/common/views/slices/Standfirst';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 const ContentTypeWrapper = styled.div`
   display: flex;
@@ -202,13 +203,15 @@ const ArticlePage: FunctionComponent<Props> = ({ article, jsonLd }) => {
       // GOTCHA: we only take the first of the series list as the data is being
       // used a little bit badly, but we don't have capacity to implement a
       // better solution
-      ...article.series.slice(0, 1).map(series => ({
-        url: `/series/${series.id}`,
-        text: series.title || '',
-        prefix: 'Part of',
-      })),
+      ...article.series.slice(0, 1).map(series => {
+        return {
+          url: linkResolver(series),
+          text: series.title || '',
+          prefix: 'Part of',
+        };
+      }),
       {
-        url: `/articles/${article.id}`,
+        url: linkResolver(article),
         text: article.title,
         isHidden: true,
       },

content/webapp/pages/books/[bookId].tsx

@@ -24,6 +24,7 @@ import { Pageview } from '@weco/common/services/conversion/track';
 import { createPrismicLink } from '@weco/common/views/components/ApiToolbar';
 import { setCacheControl } from '@weco/content/utils/setCacheControl';
 import { isNotUndefined } from '@weco/common/utils/type-guards';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 const MetadataWrapper = styled.div`
   border-top: 1px solid ${props => props.theme.color('neutral.300')};
@@ -139,7 +140,7 @@ const BookPage: FunctionComponent<Props> = props => {
         url: '/books',
       },
       {
-        url: `/books/${book.id}`,
+        url: linkResolver(book),
         text: book.title,
         isHidden: true,
       },

content/webapp/pages/event-series/[eventSeriesId].tsx

@@ -35,6 +35,7 @@ import { PaginatedResults } from '@weco/common/services/prismic/types';
 import PaginationWrapper from '@weco/common/views/components/styled/PaginationWrapper';
 import Pagination from '@weco/content/components/Pagination/Pagination';
 import { getPage } from '@weco/content/utils/query-params';
+import linkResolver from '@weco/common/services/prismic/link-resolver';
 
 type Props = {
   series: EventSeries;
@@ -130,7 +131,7 @@ const EventSeriesPage: FunctionComponent<Props> = ({
         text: 'Events',
       },
       {
-        url: `/events-series/${series.id}`,
+        url: linkResolver(series),
         text: series.title,
         isHidden: true,
       },

content/webapp/pages/events/[eventId]/index.tsx

@@ -185,20 +185,23 @@ const EventPage: NextPage<EventProps> = ({
         url: '/events',
         text: 'Events',
       },
-      ...event.series.map(series => ({
-        url: `/event-series/${series.id}`,
-        text: series.title || '',
-        prefix: 'Part of',
-      })),
+      ...event.series.map(series => {
+        console.log(series);
+        return {
+          url: linkResolver(series),
+          text: series.title || '',
+          prefix: 'Part of',
+        };
+      }),
       scheduledIn
         ? {
-            url: `/events/${scheduledIn.id}`,
+            url: linkResolver(scheduledIn),
             text: scheduledIn.title || '',
             prefix: 'Part of',
           }
         : undefined,
       {
-        url: `/events/${event.id}`,
+        url: linkResolver(event),
         text: event.title,
         isHidden: true,
       },

content/webapp/pages/events/[eventId]/visual-stories.tsx

@@ -22,8 +22,10 @@ export const getServerSideProps = async context => {
 
   const visualStoryDocument = visualStoriesQuery.results.find(result => {
     return (
+      // TODO once redirects are in place we should only compare with uid
       isFilledLinkToDocument(result.data.relatedDocument) &&
-      result.data.relatedDocument.id === context.query.eventId
+      (result.data.relatedDocument.uid === context.query.eventId ||
+        result.data.relatedDocument.id === context.query.eventId)
     );
   });
 

content/webapp/pages/exhibitions/[exhibitionId]/visual-stories.tsx

@@ -22,8 +22,10 @@ export const getServerSideProps = async context => {
 
   const visualStoryDocument = visualStoriesQuery.results.find(result => {
     return (
+      // TODO once redirects are in place we should only compare with uid
       isFilledLinkToDocument(result.data.relatedDocument) &&
-      result.data.relatedDocument.id === context.query.exhibitionId
+      (result.data.relatedDocument.uid === context.query.exhibitionId ||
+        result.data.relatedDocument.id === context.query.exhibitionId)
     );
   });