Merge pull request #38 from Q42/feature/validate-parent-language

adds check for language

examples/studio-i18n/page-tree-config.ts

@@ -7,5 +7,6 @@ export const pageTreeConfig: PageTreeConfig = {
   titleFieldName: 'title',
   documentInternationalization: {
     supportedLanguages: ['nl', 'en', 'fr'],
+    documentLanguageShouldMatchParent: true,
   }
 };

src/client.ts

@@ -1,7 +1,7 @@
 import { SanityClient } from 'sanity';
 
 import { getAllPageMetadata } from './helpers/page-tree';
-import { getRawPageMetadataQuery } from './queries';
+import { getAllRawPageMetadataQuery } from './queries';
 import { PageMetadata, PageTreeConfig } from './types';
 
 export type { PageMetadata } from './types';
@@ -25,7 +25,7 @@ class PageTreeClient {
   }
 
   public async getAllPageMetadata(): Promise<PageMetadata[]> {
-    const rawPageMetadata = await this.client.fetch(getRawPageMetadataQuery(this.config));
+    const rawPageMetadata = await this.client.fetch(getAllRawPageMetadataQuery(this.config));
     return getAllPageMetadata(this.config, rawPageMetadata);
   }
 }

src/hooks/usePageTree.ts

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 import { useListeningQuery } from 'sanity-plugin-utils';
 
 import { mapRawPageMetadatasToPageTree } from '../helpers/page-tree';
-import { getRawPageMetadataQuery } from '../queries';
+import { getAllRawPageMetadataQuery } from '../queries';
 import { PageTreeConfig, RawPageMetadata } from '../types';
 
 export const usePageTree = (config: PageTreeConfig) => {
-  const { data, loading } = useListeningQuery<RawPageMetadata[]>(getRawPageMetadataQuery(config), {
+  const { data, loading } = useListeningQuery<RawPageMetadata[]>(getAllRawPageMetadataQuery(config), {
     options: { apiVersion: config.apiVersion },
   });
 

src/hooks/usePageTreeItem.ts

@@ -3,11 +3,11 @@ import { useMemo } from 'react';
 import { useListeningQuery } from 'sanity-plugin-utils';
 
 import { getAllPageMetadata } from '../helpers/page-tree';
-import { getRawPageMetadataQuery } from '../queries';
+import { getAllRawPageMetadataQuery } from '../queries';
 import { PageTreeConfig, RawPageMetadata } from '../types';
 
 export const usePageTreeItem = (documentId: string, config: PageTreeConfig, perspective?: ClientPerspective) => {
-  const { data, loading } = useListeningQuery<RawPageMetadata[]>(getRawPageMetadataQuery(config), {
+  const { data, loading } = useListeningQuery<RawPageMetadata[]>(getAllRawPageMetadataQuery(config), {
     options: { apiVersion: config.apiVersion, perspective },
   });
 

src/next.ts

@@ -1,7 +1,7 @@
 import { FilteredResponseQueryOptions, SanityClient } from 'next-sanity';
 
 import { getAllPageMetadata } from './helpers/page-tree';
-import { getRawPageMetadataQuery } from './queries';
+import { getAllRawPageMetadataQuery } from './queries';
 import { PageMetadata, PageTreeConfig } from './types';
 
 export type { PageMetadata } from './types';
@@ -29,7 +29,7 @@ class NextPageTreeClient {
 
   public async getAllPageMetadata(): Promise<PageMetadata[]> {
     const rawPageMetadata = await this.client.fetch(
-      getRawPageMetadataQuery(this.config),
+      getAllRawPageMetadataQuery(this.config),
       undefined,
       this.defaultSanityFetchOptions ?? {},
     );

src/queries/index.ts

@@ -1,18 +1,23 @@
 import { getLanguageFieldName } from '../helpers/config';
 import { PageTreeConfig } from '../types';
 
-export const getRawPageMetadataQuery = (config: PageTreeConfig) => `*[_type in [${Object.values(config.pageSchemaTypes)
+export const getAllRawPageMetadataQuery = (config: PageTreeConfig) => `*[_type in [${Object.values(
+  config.pageSchemaTypes,
+)
   .map(key => `"${key}"`)
   .join(', ')}]]{
+    ${rawPageMetadataFragment(config)}
+  }`;
+
+export const getRawPageMetadataQuery = (documentId: string, config: PageTreeConfig) => `*[_id == "${documentId}"]{
+  ${rawPageMetadataFragment(config)}
+}`;
+
+export const rawPageMetadataFragment = (config: PageTreeConfig) => `
     _id,
     _type,
     _updatedAt,
     parent,
     slug,
     title,
-    ${getLanguageFieldName(config) ?? ''}
-  }`;
-
-export const getDocumentTypeQuery = (documentId: string) => `*[_id == "${documentId}"]{
-  _type
-}`;
+    ${getLanguageFieldName(config) ?? ''}`;

src/schema/definePageType.ts

@@ -4,7 +4,7 @@ import { defineField, defineType, DocumentDefinition, SlugOptions } from 'sanity
 import { PageTreeField } from '../components/PageTreeField';
 import { SlugField } from '../components/SlugField';
 import { PageTreeConfig } from '../types';
-import { allowedParentValidator } from '../validators/parent-validator';
+import { parentValidator } from '../validators/parent-validator';
 import { slugValidator } from '../validators/slug-validator';
 
 type Options = {
@@ -67,7 +67,7 @@ const basePageFields = (config: PageTreeConfig, options: Options, ownType: Docum
           title: 'Parent page',
           type: 'reference',
           to: getPossibleParentsFromConfig(config, ownType).map(type => ({ type })),
-          validation: Rule => Rule.required().custom(allowedParentValidator(config, ownType.name)),
+          validation: Rule => Rule.required().custom(parentValidator(config, ownType.name)),
           group: options.fieldsGroupName,
           components: {
             field: props => PageTreeField({ ...props, config, mode: 'select-parent' }),

src/types.ts

@@ -60,6 +60,8 @@ export type PageTreeConfig = {
     supportedLanguages: string[];
     /* Optional field name of the language field, defaults to "language" */
     languageFieldName?: string;
+    /* Adds validation check to ensure that the language of the document matches the language of the parent document. Default: false */
+    documentLanguageShouldMatchParent?: boolean;
   };
 };
 

src/validators/parent-validator.ts

@@ -1,42 +1,60 @@
 import { Reference, ValidationContext } from 'sanity';
 
-import { getDocumentTypeQuery } from '../queries';
-import { PageTreeConfig, RawPageMetadata, SanityRef } from '../types';
+import { getLanguageFieldName } from '../helpers/config';
+import { getRawPageMetadataQuery } from '../queries';
+import { PageTreeConfig, RawPageMetadata } from '../types';
 
 /**
  * Validates that the slug is unique within the parent page and therefore that entire the path is unique.
  */
-export const allowedParentValidator =
+export const parentValidator =
   (config: PageTreeConfig, ownType: string) =>
-  async (selectedParent: Reference | undefined, context: ValidationContext) => {
-    const allowedParents = config.allowedParents?.[ownType];
-
-    if (allowedParents === undefined) {
-      return true;
-    }
+  async (selectedParentRef: Reference | undefined, context: ValidationContext) => {
+    const client = context.getClient({ apiVersion: config.apiVersion });
 
-    const parentRef = context.document?.parent as SanityRef | undefined;
-    if (!parentRef) {
+    if (!selectedParentRef) {
       return true;
     }
 
-    const parentId = parentRef._ref;
+    const parentId = selectedParentRef._ref;
+    const selectedParent = (await client.fetch<RawPageMetadata[]>(getRawPageMetadataQuery(parentId, config)))[0];
 
-    if (parentId === undefined) {
-      return true;
+    const allowedParentValidation = allowedParentValidator(selectedParent, config, ownType);
+    if (allowedParentValidation !== true) {
+      return allowedParentValidation;
     }
 
-    const client = context.getClient({ apiVersion: config.apiVersion });
-    const selectedParentType = (await client.fetch<Pick<RawPageMetadata, '_type'>[]>(getDocumentTypeQuery(parentId)))[0]
-      ?._type;
+    return parentLanguageValidator(selectedParent, config, context);
+  };
 
-    if (!selectedParentType) {
-      return 'Unable to check the type of the selected parent.';
-    }
+const allowedParentValidator = (selectedParent: RawPageMetadata, config: PageTreeConfig, ownType: string) => {
+  const allowedParents = config.allowedParents?.[ownType];
 
-    if (!allowedParents.includes(selectedParentType)) {
-      return `The parent of type "${selectedParentType}" is not allowed for this type of document.`;
+  if (allowedParents === undefined) {
+    return true;
+  }
+
+  if (!allowedParents.includes(selectedParent._type)) {
+    return `The parent of type "${selectedParent._type}" is not allowed for this type of document.`;
+  }
+
+  return true;
+};
+
+const parentLanguageValidator = (
+  selectedParent: RawPageMetadata,
+  config: PageTreeConfig,
+  context: ValidationContext,
+) => {
+  if (config.documentInternationalization?.documentLanguageShouldMatchParent) {
+    const languageFieldName = getLanguageFieldName(config);
+    const language = context.document?.[languageFieldName];
+    const parentLanguage = selectedParent?.[languageFieldName];
+
+    if (language !== parentLanguage) {
+      return 'The language of the parent must match the language of the document.';
     }
+  }
 
-    return true;
-  };
+  return true;
+};

src/validators/slug-validator.ts

@@ -1,7 +1,7 @@
 import { SlugValue, ValidationContext } from 'sanity';
 
 import { DRAFTS_PREFIX } from '../helpers/page-tree';
-import { getRawPageMetadataQuery } from '../queries';
+import { getAllRawPageMetadataQuery } from '../queries';
 import { PageTreeConfig, RawPageMetadata, SanityRef } from '../types';
 import { getSanityDocumentId } from '../utils/sanity';
 
@@ -17,7 +17,7 @@ export const slugValidator =
       return true;
     }
 
-    const allPages = await client.fetch<RawPageMetadata[]>(getRawPageMetadataQuery(config));
+    const allPages = await client.fetch<RawPageMetadata[]>(getAllRawPageMetadataQuery(config));
     const siblingPages = allPages.filter(page => page.parent?._ref === parentRef._ref);
 
     const siblingPagesWithSameSlug = siblingPages