feat: several improvements to taxonomy slug handling and eslint fixes

Author: robp

apps/marketing/app/[locale]/tag/[slug]/page.tsx

@@ -12,13 +12,12 @@ import { LanguageDataSetter } from '#/components/language-data-provider/language
 import { getTopicProductProps, TopicProductFragment } from '#/components/topic-product/topic-product';
 import { addContentSourceMaps } from '#/lib/content-source-maps';
 import { graphqlClient } from '#/lib/graphql-client';
-import { getTaxonomyConcepts } from '#/lib/get-taxonomy-concepts';
+import { getTaxonomyConcepts, getConceptBySlug } from '#/lib/get-taxonomy-concepts';
 import { getLocaleFromPath } from '#/locales/get-locale-from-path';
-import { getStaticParams } from '#/locales/server';
+import { getStaticParams, getI18n } from '#/locales/server';
 import { TopicBusinessInfo } from '@repo/ui/components/topic-business-info';
 import { ComponentProductTableClient } from '#/components/component-product-table/component-product-table-client';
 import { type ComponentProductTableFragment } from '#/components/component-product-table/component-product-table';
-import { getI18n } from '#/locales/server';
 import { fallbackLocale } from '#/locales/fallback-locale';
 
 interface PageProps {
@@ -30,11 +29,6 @@ interface Params {
   locale: string;
 }
 
-const getConcept = async (slug: string, locale: string, preview = false) => {
-  const taxonomyConcepts = await getTaxonomyConcepts(process.env.CONTENTFUL_ORGANIZATION ?? '<missing organization>');
-  return taxonomyConcepts.find((concept) => concept.slug[locale] === slug);
-};
-
 const getEntries = async (conceptId: string, locale: string, preview = false) => {
   const entryQuery = graphql(
     `
@@ -54,7 +48,7 @@ const getEntries = async (conceptId: string, locale: string, preview = false) =>
     [TopicProductFragment]
   );
 
-  const response = await graphqlClient({ preview }).query(entryQuery, {
+  const response = await graphqlClient(preview).query(entryQuery, {
     locale,
     fallbackLocale,
     preview,
@@ -156,21 +150,24 @@ export default async function TagPage(props: PageProps) {
 
   const isDraftMode = (await draftMode()).isEnabled;
 
-  const pageData = {
-    slugEn: slug,
-    slugDe: slug,
-  };
-
   if (!slug) {
     notFound();
   }
 
-  const concept = await getConcept(slug, getLocaleFromPath(locale), isDraftMode);
+  // We know that only 'en-US' slugs exist since Taxonomy Manager does not
+  // currently support translations.
+  // const concept = await getConceptBySlug(slug, getLocaleFromPath(locale));
+  const concept = await getConceptBySlug(slug, fallbackLocale);
 
   if (!concept) {
     notFound();
   }
 
+  const pageData = {
+    slugEn: `tag/${slug}`,
+    slugDe: `tag/${slug}`,
+  };
+
   const entries = await getEntries(concept.sys.id, getLocaleFromPath(locale), isDraftMode);
 
   const productTableData: ResultOf<typeof ComponentProductTableFragment> = {
@@ -202,7 +199,8 @@ export default async function TagPage(props: PageProps) {
       />
       <TopicBusinessInfo
         name={concept.prefLabel[fallbackLocale] ?? null}
-        shortDescription={concept.definition ? concept.definition[fallbackLocale] : null}
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- TODO: refactor
+        shortDescription={concept.definition !== null ? concept.definition[fallbackLocale] : null}
         body={body}
       />
     </>

apps/marketing/components/component-product-table/component-product-table-client.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { type ResultOf } from 'gql.tada';
 
 import { getImageChildProps } from '#/components/image-ctf';
+// eslint-disable-next-line import/no-cycle -- TODO: refactor
 import { RichTextCtf } from '#/components/rich-text-ctf';
 
 import { type ComponentProductTableFragment } from '#/components/component-product-table/component-product-table';
@@ -20,7 +21,7 @@ export function ComponentProductTableClient(props: { data: ResultOf<typeof Compo
   const router = useRouter();
 
   const items: CardProps[] = data.productsCollection
-    ? data.productsCollection?.items
+    ? data.productsCollection.items
         .map((item) => {
           if (!item) {
             return null;

apps/marketing/components/component-product-table/component-product-table.tsx

@@ -23,7 +23,7 @@ export const ComponentProductTableFragment = graphql(
 );
 
 export interface ComponentProductTableProps {
-  data: FragmentOf<typeof ComponentProductTableFragment> & Record<string, any>;
+  data: FragmentOf<typeof ComponentProductTableFragment>;
 }
 
 export function ComponentProductTable(props: ComponentProductTableProps) {

apps/marketing/components/taxonomy-concept/index.ts

@@ -1 +1 @@
-export * from './taxonomy-concept';
+export { TaxonomyConcept } from './taxonomy-concept';

apps/marketing/components/taxonomy-concept/taxonomy-concept-client.tsx

@@ -4,16 +4,18 @@ import { Button } from '@repo/ui/components/button';
 import { Link } from '@repo/ui/components/link';
 import { useCurrentLocale } from '#/locales/client';
 import { getLocaleFromPath } from '#/locales/get-locale-from-path';
+import { fallbackLocale } from '#/locales/fallback-locale';
 
 import type { TaxonomyConceptAddFieldsProps } from './taxonomy-concept';
 
 export function TaxonomyConceptClient({ data }: { data: TaxonomyConceptAddFieldsProps }) {
-  const locale = getLocaleFromPath(useCurrentLocale());
-  const fallbackLocale = 'en-US';
+  const currentLocalePath = useCurrentLocale();
+  const locale = getLocaleFromPath(currentLocalePath);
   const label = data.prefLabel[locale] ?? data.prefLabel[fallbackLocale];
-  return (
+  const slug = data.slug[locale] ?? data.slug[fallbackLocale];
+  return label && slug ? (
     <Button variant="outline" size="sm" asChild>
-      <Link href="#">{label}</Link>
+      <Link href={`/${currentLocalePath}/tag/${slug}`}>{label}</Link>
     </Button>
-  );
+  ) : null;
 }

apps/marketing/components/taxonomy-concept/taxonomy-concept.tsx

@@ -1,14 +1,10 @@
 import { type ResultOf, type FragmentOf, graphql, readFragment } from 'gql.tada';
 
-import type { ConceptProps } from 'contentful-management';
-
 import { TaxonomyConceptClient } from './taxonomy-concept-client';
-import { getTaxonomyConcepts } from '#/lib/get-taxonomy-concepts';
+import { getTaxonomyConcepts, type ConceptProps } from '#/lib/get-taxonomy-concepts';
 
-export const getTaxonomyConceptProps = async ({
-  data: fragmentData,
-}: TaxonomyConceptProps): Promise<TaxonomyConceptAddFieldsProps | null> => {
-  const data = readFragment(TaxonomyConceptFragment, fragmentData);
+const getTaxonomyConceptProps = async (props: TaxonomyConceptProps): Promise<TaxonomyConceptAddFieldsProps | null> => {
+  const data = readFragment(TaxonomyConceptFragment, props.data);
   const taxonomyConcepts = await getTaxonomyConcepts(process.env.CONTENTFUL_ORGANIZATION ?? '<missing organization>');
   const concept = taxonomyConcepts.find((item) => item.sys.id === data.id);
   return concept ? { ...data, ...concept } : null;
@@ -30,6 +26,6 @@ export interface TaxonomyConceptProps {
 }
 
 export async function TaxonomyConcept(props: TaxonomyConceptProps) {
-  const data = await getTaxonomyConceptProps({ data: props.data });
+  const data = await getTaxonomyConceptProps(props);
   return data ? <TaxonomyConceptClient data={data} /> : null;
 }

apps/marketing/components/topic-product/topic-product-client.tsx

@@ -4,6 +4,7 @@ import { type ReactNode } from 'react';
 import { type ResultOf } from 'gql.tada';
 
 import { getImageChildProps } from '#/components/image-ctf';
+// eslint-disable-next-line import/no-cycle -- TODO: refactor
 import { RichTextCtf } from '#/components/rich-text-ctf';
 import { TopicProduct } from '@repo/ui/components/topic-product';
 
@@ -16,7 +17,7 @@ export function TopicProductClient({
   tags,
 }: {
   data: ResultOf<typeof TopicProductFragment>;
-  tags: ReactNode[];
+  tags?: ReactNode[];
 }) {
   const { data, addAttributes } = useComponentPreview(originalData);
 

apps/marketing/components/topic-product/topic-product.tsx

@@ -2,10 +2,11 @@ import { type FragmentOf, graphql, readFragment } from 'gql.tada';
 
 import { AssetFieldsFragment } from '../asset-ctf';
 import { TopicProductFeatureFragment } from '../topic-product-feature/topic-product-feature';
+// eslint-disable-next-line import/no-cycle -- TODO: refactor
 import { TopicProductClient } from './topic-product-client';
-import { TaxonomyConceptFragment, TaxonomyConcept } from '../taxonomy-concept';
+import { TaxonomyConceptFragment, TaxonomyConcept } from '../taxonomy-concept/taxonomy-concept';
 
-export const getTopicProductProps = ({ data: fragmentData, ...props }: TopicProductProps) => {
+export const getTopicProductProps = ({ data: fragmentData }: TopicProductProps) => {
   const data = readFragment(TopicProductFragment, fragmentData);
   return data;
 };
@@ -63,6 +64,7 @@ export function TopicProduct(props: TopicProductProps) {
   const tags = data.contentfulMetadata.concepts
     .filter((fragmentData) => fragmentData !== null)
     .map((fragmentData) => {
+      // Unmask the fragment to access the concept id, to use as a key.
       const concept = readFragment(TaxonomyConceptFragment, fragmentData);
       return <TaxonomyConcept key={concept.id} data={fragmentData} />;
     });

apps/marketing/lib/get-taxonomy-concepts.ts

@@ -1,15 +1,20 @@
+// Ensure these functions run on the server.
+'use server';
+
 import memoize from 'lodash/memoize';
 import slugify from 'slugify';
 import uniquify from '@acusti/uniquify';
+import type { ConceptProps as CflConceptProps } from 'contentful-management';
+import type { LocalizedEntity } from 'contentful-management/dist/typings/entities/utils';
 
 import { managementClient } from './rest-client';
-import type { ConceptProps as CflConceptProps } from 'contentful-management';
 
-export type ConceptProps = CflConceptProps & {
-  slug: {
-    [locale: string]: string;
-  };
-};
+interface ConceptAddProps {
+  slug: string;
+}
+
+export type ConceptProps<Locales extends string = string> = LocalizedEntity<ConceptAddProps, 'slug', Locales> &
+  CflConceptProps;
 
 /**
  * Get all taxonomy concepts for the specified organization_id.
@@ -19,9 +24,15 @@ export type ConceptProps = CflConceptProps & {
  * @param organizationId - The Contentful Organization ID to fetch concepts for.
  * @param pageUrl - The 'next' page URL returned in the Contentful API response.
  * @param limit - The maximum number of concepts to return with each API request.
+ * @param allSlugs - An array of unique slugs used by uniquify().
  * @returns A Promise of an array of concepts.
  */
-const fetchTaxonomyConcepts = async (organizationId: string, pageUrl = '', limit = 100): Promise<ConceptProps[]> => {
+const fetchTaxonomyConcepts = async (
+  organizationId: string,
+  pageUrl = '',
+  limit = 100,
+  allSlugs: string[] = []
+): Promise<ConceptProps[]> => {
   const { pages, items: originalItems } = await managementClient().concept.getMany({
     organizationId,
     query: {
@@ -37,24 +48,23 @@ const fetchTaxonomyConcepts = async (organizationId: string, pageUrl = '', limit
   const uniquifyOptions = {
     separator: '-',
   };
-  const allSlugs: string[] = [];
 
   const items = originalItems.map((concept) => {
     return {
       ...concept,
       slug: Object.fromEntries(
-        Object.entries(concept.prefLabel ?? []).map(([locale, label]) => {
-          const slug = slugify(label ?? '', slugifyOptions);
+        Object.entries(concept.prefLabel).map(([locale, label]) => {
+          const slug = slugify(label, slugifyOptions);
           const uniqueSlug = uniquify({ items: allSlugs, value: slug, ...uniquifyOptions });
           allSlugs.push(uniqueSlug);
-          return [locale, uniqueSlug];
+          return [locale, slug];
         })
       ),
     };
   });
 
   if (pages?.next) {
-    const nextItems = await fetchTaxonomyConcepts(organizationId, pages.next);
+    const nextItems = await fetchTaxonomyConcepts(organizationId, pages.next, limit, allSlugs);
     return items.concat(nextItems);
   }
 
@@ -70,3 +80,8 @@ const fetchTaxonomyConcepts = async (organizationId: string, pageUrl = '', limit
  */
 
 export const getTaxonomyConcepts = memoize(fetchTaxonomyConcepts);
+
+export const getConceptBySlug = async (slug: string, locale: string) => {
+  const taxonomyConcepts = await getTaxonomyConcepts(process.env.CONTENTFUL_ORGANIZATION ?? '<missing organization>');
+  return taxonomyConcepts.find((concept) => concept.slug[locale] === slug);
+};