Merge pull request #345 from colonial-heritage/update-user-enrichment

Update user enrichment

apps/researcher/package.json

@@ -37,6 +37,7 @@
     "@next/mdx": "14.0.1",
     "classnames": "2.3.2",
     "fetch-sparql-endpoint": "4.1.0",
+    "iso-639-1-dir": "3.0.5",
     "next": "14.0.3",
     "next-intl": "3.0.0-beta.19",
     "openseadragon": "4.1.0",

apps/researcher/src/app/[locale]/(objects)/objects/[id]/actions.ts

@@ -4,9 +4,10 @@ import {getCommunityBySlug} from '@/lib/community/actions';
 import {objectList} from '@colonial-collections/database';
 import {ObjectItemBeingCreated} from '@colonial-collections/database';
 import {revalidatePath} from 'next/cache';
-import {storer} from '@/lib/enricher-instances';
+import {creator} from '@/lib/enricher-instances';
 import {encodeRouteSegment} from '@/lib/clerk-route-segment-transformer';
 import {enrichmentLicence} from '@/lib/enrichment-licence';
+import type {AdditionalType} from '@colonial-collections/enricher';
 
 export async function getCommunityLists(communityId: string, objectId: string) {
   return objectList.getByCommunityId(communityId, {objectIri: objectId});
@@ -40,27 +41,31 @@ export async function removeObjectFromList(id: number, communityId: string) {
 interface AddUserEnrichmentProps {
   description: string;
   citation: string;
-  about: string;
-  attributionId: string;
+  inLanguage?: string;
+  community: {name: string; id: string};
   objectId: string;
+  additionalType: AdditionalType;
 }
 
 export async function addUserEnrichment({
+  additionalType,
   description,
   citation,
-  about,
-  attributionId,
+  inLanguage,
+  community,
   objectId,
 }: AddUserEnrichmentProps) {
-  const enrichment = await storer.addText({
+  const enrichment = await creator.addText({
+    additionalType,
     description,
     citation,
-    about,
-    creator: attributionId,
+    inLanguage,
+    about: objectId,
+    creator: community,
     license: enrichmentLicence,
   });
 
-  revalidatePath(`/[locale]objects/${encodeRouteSegment(objectId)}`, 'page');
+  revalidatePath(`/[locale]/objects/${encodeRouteSegment(objectId)}`, 'page');
 
   return enrichment;
 }

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

@@ -4,31 +4,33 @@ import {create} from 'zustand';
 import useObject from './use-object';
 import {ChatBubbleBottomCenterTextIcon} from '@heroicons/react/24/solid';
 import {SlideOutButton, SlideOut} from '@colonial-collections/ui';
-import {UserEnricherForm} from './user-enrichment-form';
+import {UserEnrichmentForm} from './user-enrichment-form';
 import {SignedIn} from '@clerk/nextjs';
-import {fetcher} from '@/lib/enricher-instances';
-import {getCommunityByAttributionId} from '@/lib/community/actions';
 import {getFormatter} from 'next-intl/server';
 import classNames from 'classnames';
 import {InformationCircleIcon} from '@heroicons/react/24/outline';
+import type {AdditionalType} from '@colonial-collections/enricher';
 
-const useMetadata = create(() => ({
+const useMetadata = create<{
+  translationKey: string;
+  enrichmentType?: AdditionalType;
+}>(() => ({
   translationKey: '',
-  enrichmentIdentifier: '',
+  enrichmentType: undefined,
 }));
 
 interface Props {
   translationKey: string;
-  enrichmentIdentifier?: string;
+  enrichmentType?: AdditionalType;
   children: ReactNode;
 }
 
 export function MetadataContainer({
   translationKey,
-  enrichmentIdentifier,
+  enrichmentType,
   children,
 }: Props) {
-  useMetadata.setState({translationKey, enrichmentIdentifier});
+  useMetadata.setState({translationKey, enrichmentType});
   const t = useTranslations('ObjectDetails');
 
   return (
@@ -46,7 +48,7 @@ export function MetadataContainer({
         </div>
         <div className="w-full xl:w-4/5 flex flex-col gap-2">{children}</div>
       </div>
-      {enrichmentIdentifier && <AddMetadataEnrichment />}
+      {enrichmentType && <AddMetadataEnrichment />}
     </div>
   );
 }
@@ -55,15 +57,15 @@ interface MetadataEntryProps {
   isCurrentPublisher?: boolean;
   dateCreated?: Date;
   citation?: string;
-  attributionId?: string;
+  creator?: {name: string};
   children?: ReactNode;
 }
 
 export async function MetadataEntry({
   isCurrentPublisher = false,
   dateCreated,
   citation,
-  attributionId,
+  creator,
   children,
 }: MetadataEntryProps) {
   const {translationKey} = useMetadata.getState();
@@ -81,9 +83,7 @@ export async function MetadataEntry({
     );
   }
 
-  const creator = attributionId
-    ? await getCommunityByAttributionId(attributionId)
-    : organization;
+  const author = creator ? creator : organization;
 
   return (
     <div className="border-t border-blueGrey-100 flex flex-col lg:flex-row justify-between gap-2">
@@ -99,7 +99,7 @@ export async function MetadataEntry({
       >
         <div>
           {t.rich('addedBy', {
-            name: () => <strong>{creator?.name}</strong>,
+            name: () => <strong>{author?.name}</strong>,
           })}
         </div>
         {(dateCreated || citation) && (
@@ -131,20 +131,23 @@ export async function MetadataEntry({
 }
 
 export async function MetadataEntries({children}: {children: ReactNode}) {
-  const {enrichmentIdentifier} = useMetadata.getState();
+  const {enrichmentType} = useMetadata.getState();
+  const {enrichments} = useObject.getState();
 
-  const enrichments = enrichmentIdentifier
-    ? await fetcher.getById(enrichmentIdentifier)
-    : undefined;
+  const metadataEnrichments = enrichmentType
+    ? enrichments.filter(
+        enrichment => enrichment.additionalType === enrichmentType
+      )
+    : [];
   return (
     <>
       <MetadataEntry isCurrentPublisher>{children}</MetadataEntry>
-      {enrichments?.map(enrichment => (
+      {metadataEnrichments?.map(enrichment => (
         <MetadataEntry
           key={enrichment.id}
           dateCreated={enrichment.dateCreated}
-          citation={enrichment.source}
-          attributionId={enrichment.creator}
+          citation={enrichment.citation}
+          creator={enrichment.creator}
         >
           {enrichment.description}
         </MetadataEntry>
@@ -155,29 +158,29 @@ export async function MetadataEntries({children}: {children: ReactNode}) {
 
 export function AddMetadataEnrichment() {
   const t = useTranslations('ObjectDetails');
-  const {translationKey, enrichmentIdentifier} = useMetadata.getState();
+  const {enrichmentType} = useMetadata.getState();
   const objectId = useObject.getState().objectId;
 
-  if (!enrichmentIdentifier) {
+  if (!enrichmentType) {
     return null;
   }
 
   return (
     <SignedIn>
-      <div className="flex justify-end">
+      <div className="flex justify-end text-consortiumBlue-800">
         <SlideOutButton
-          id={translationKey}
-          className="py-2 px-3 p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-neutral-200 hover:bg-neutral-300 text-neutral-800 flex items-center transition gap-1"
+          id={`${enrichmentType}-form`}
+          className="py-2 px-3  transition flex items-center gap-1 p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-neutral-200/50 hover:bg-neutral-300/50 text-neutral-800"
         >
           {t('addUserEnrichmentButton')}
-          <ChatBubbleBottomCenterTextIcon className="w-4 h-4 fill-neutral-500" />
+          <ChatBubbleBottomCenterTextIcon className="w-4 h-4 fill-consortiumBlue-800" />
         </SlideOutButton>
       </div>
-      <SlideOut id={translationKey}>
-        <UserEnricherForm
+      <SlideOut id={`${enrichmentType}-form`}>
+        <UserEnrichmentForm
           objectId={objectId}
-          slideOutId={translationKey}
-          identifier={enrichmentIdentifier}
+          slideOutId={`${enrichmentType}-form`}
+          enrichmentType={enrichmentType}
         />
       </SlideOut>
     </SignedIn>

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

@@ -21,6 +21,8 @@ import {env} from 'node:process';
 import {formatDateCreated} from './format-date-created';
 import ObjectListsMenu from './object-lists-menu';
 import {SignedIn} from '@clerk/nextjs';
+import {fetcher} from '@/lib/enricher-instances';
+import {AdditionalType} from '@colonial-collections/enricher';
 
 export const dynamic = 'force-dynamic';
 
@@ -85,7 +87,8 @@ export default async function Details({params}: Props) {
     return <div data-testid="no-entity">{t('noEntity')}</div>;
   }
 
-  useObject.setState({objectId: object.id, locale});
+  const enrichments = await fetcher.getById(id);
+  useObject.setState({objectId: object.id, locale, enrichments});
 
   let organization;
   if (object.isPartOf?.publisher?.id) {
@@ -174,52 +177,70 @@ export default async function Details({params}: Props) {
           <div className="flex flex-col gap-8 self-stretch">
             <MetadataContainer
               translationKey="description"
-              enrichmentIdentifier={`${object.id}#description`}
+              enrichmentType={AdditionalType.Description}
             >
               <MetadataEntries>{object.description}</MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="materials">
+            <MetadataContainer
+              translationKey="materials"
+              enrichmentType={AdditionalType.Material}
+            >
               <MetadataEntries>
                 {object.materials?.map(material => (
                   <div key={material.id}>{material.name}</div>
                 ))}
               </MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="dateCreated">
+            <MetadataContainer
+              translationKey="dateCreated"
+              enrichmentType={AdditionalType.DateCreated}
+            >
               <MetadataEntries>
                 {object.dateCreated && (
                   <div>{formatDateCreated(object.dateCreated, locale)}</div>
                 )}
               </MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="types">
+            <MetadataContainer
+              translationKey="types"
+              enrichmentType={AdditionalType.Type}
+            >
               <MetadataEntries>
                 {object.types?.map(type => (
                   <div key={type.id}>{type.name}</div>
                 ))}
               </MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="techniques">
+            <MetadataContainer
+              translationKey="techniques"
+              enrichmentType={AdditionalType.Technique}
+            >
               <MetadataEntries>
                 {object.techniques?.map(technique => (
                   <div key={technique.id}>{technique.name}</div>
                 ))}
               </MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="creators">
+            <MetadataContainer
+              translationKey="creators"
+              enrichmentType={AdditionalType.Creator}
+            >
               <MetadataEntries>
                 {object.creators?.map(creator => (
                   <div key={creator.id}>{creator.name}</div>
                 ))}
               </MetadataEntries>
             </MetadataContainer>
 
-            <MetadataContainer translationKey="inscriptions">
+            <MetadataContainer
+              translationKey="inscriptions"
+              enrichmentType={AdditionalType.Inscription}
+            >
               <MetadataEntries>
                 {object.inscriptions?.map(inscription => (
                   <div key={inscription}>{inscription}</div>

apps/researcher/src/app/[locale]/(objects)/objects/[id]/use-object.ts

@@ -1,14 +1,17 @@
 import {create} from 'zustand';
 import {Organization} from '@/lib/api/definitions';
+import {Enrichment} from '@colonial-collections/enricher/src/definitions';
 
 interface State {
   organization?: Organization;
   objectId: string;
   locale: string;
+  enrichments: Enrichment[];
 }
 
 export default create<State>(() => ({
   organization: undefined,
   objectId: '',
   locale: '',
+  enrichments: [],
 }));