Skip to content

Commit

Permalink
Merge pull request #362 from colonial-heritage/bug-metadata
Browse files Browse the repository at this point in the history 
Fix bug: Wrong text if metadata entry is empty
  • Loading branch information
@barbarah
barbarah authored Dec 11, 2023
2 parents 30cc93b + 1989756 commit d1f7337
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 106 deletions.
104 changes: 47 additions & 57 deletions apps/researcher/src/app/[locale]/(objects)/objects/[id]/metadata.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {useTranslations} from 'next-intl';
import {ReactNode} from 'react';
import {create} from 'zustand';
import {PropsWithChildren, ReactNode} from 'react';
import useObject from './use-object';
import {ChatBubbleBottomCenterTextIcon} from '@heroicons/react/24/solid';
import {SlideOutButton, SlideOut} from '@colonial-collections/ui';
Expand All @@ -13,27 +12,34 @@ import type {AdditionalType} from '@colonial-collections/enricher';
import ISO6391 from 'iso-639-1-dir';
import {LanguageCode} from 'iso-639-1-dir/dist/data';

const useMetadata = create<{
translationKey: string;
enrichmentType?: AdditionalType;
}>(() => ({
translationKey: '',
enrichmentType: undefined,
}));

interface Props {
translationKey: string;
enrichmentType?: AdditionalType;
children: ReactNode;
}

export function MetadataContainer({
export function Metadata({
translationKey,
enrichmentType,
children,
}: Props) {
useMetadata.setState({translationKey, enrichmentType});
}: PropsWithChildren<Props>) {
const t = useTranslations('ObjectDetails');
const {enrichments} = useObject.getState();

const metadataEnrichments = enrichmentType
? enrichments.filter(
enrichment => enrichment.additionalType === enrichmentType
)
: [];

if (!children && metadataEnrichments.length === 0) {
return (
<div className="text-neutral-600 italic w-full border-t py-6 text-sm">
{t.rich('noData', {
subject: () => <span className="lowercase">{t(translationKey)}</span>,
})}
</div>
);
}

return (
<div className="flex flex-col gap-4">
Expand All @@ -48,9 +54,30 @@ export function MetadataContainer({
</div>
</div>
</div>
<div className="w-full xl:w-4/5 flex flex-col gap-2">{children}</div>
<div className="w-full xl:w-4/5 flex flex-col gap-2">
<MetadataEntry translationKey={translationKey} isCurrentPublisher>
{children}
</MetadataEntry>
{metadataEnrichments?.map(enrichment => (
<MetadataEntry
key={enrichment.id}
translationKey={translationKey}
dateCreated={enrichment.dateCreated}
citation={enrichment.citation}
creator={enrichment.creator}
languageCode={enrichment.inLanguage as LanguageCode}
>
{enrichment.description}
</MetadataEntry>
))}
</div>
</div>
{enrichmentType && <AddMetadataEnrichment />}
{enrichmentType && (
<AddMetadataEnrichment
translationKey={translationKey}
enrichmentType={enrichmentType}
/>
)}
</div>
);
}
Expand All @@ -60,8 +87,9 @@ interface MetadataEntryProps {
dateCreated?: Date;
citation?: string;
creator?: {name: string};
children?: ReactNode;
languageCode?: LanguageCode;
translationKey: string;
children?: ReactNode;
}

export async function MetadataEntry({
Expand All @@ -70,23 +98,13 @@ export async function MetadataEntry({
citation,
creator,
languageCode,
translationKey,
children,
}: MetadataEntryProps) {
const {translationKey} = useMetadata.getState();
const {organization} = useObject.getState();
const t = useTranslations('ObjectDetails');
const format = await getFormatter();

if (isCurrentPublisher && !children) {
return (
<div className="text-neutral-600 italic w-full border-t py-6 text-sm">
{t.rich('noData', {
subject: () => <span className="lowercase">{t(translationKey)}</span>,
})}
</div>
);
}

const author = creator ? creator : organization;

return (
Expand Down Expand Up @@ -141,36 +159,8 @@ export async function MetadataEntry({
);
}

export async function MetadataEntries({children}: {children: ReactNode}) {
const {enrichmentType} = useMetadata.getState();
const {enrichments} = useObject.getState();

const metadataEnrichments = enrichmentType
? enrichments.filter(
enrichment => enrichment.additionalType === enrichmentType
)
: [];
return (
<>
<MetadataEntry isCurrentPublisher>{children}</MetadataEntry>
{metadataEnrichments?.map(enrichment => (
<MetadataEntry
key={enrichment.id}
dateCreated={enrichment.dateCreated}
citation={enrichment.citation}
creator={enrichment.creator}
languageCode={enrichment.inLanguage as LanguageCode}
>
{enrichment.description}
</MetadataEntry>
))}
</>
);
}

export function AddMetadataEnrichment() {
export function AddMetadataEnrichment({enrichmentType, translationKey}: Props) {
const t = useTranslations('ObjectDetails');
const {enrichmentType, translationKey} = useMetadata.getState();
const objectId = useObject.getState().objectId;

if (!enrichmentType) {
Expand Down
84 changes: 35 additions & 49 deletions apps/researcher/src/app/[locale]/(objects)/objects/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Gallery from './gallery';
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';
import {Metadata} from './metadata';
import {decodeRouteSegment} from '@/lib/clerk-route-segment-transformer';
import organizations from '@/lib/organizations-instance';
import {
Expand Down Expand Up @@ -193,84 +193,70 @@ export default async function Details({params}: Props) {
<h2 className="text-2xl">{t('metadata')}</h2>
</div>
<div className="flex flex-col gap-8 self-stretch">
<MetadataContainer
<Metadata
translationKey="name"
enrichmentType={AdditionalType.Name}
>
<MetadataEntries>{object.name}</MetadataEntries>
</MetadataContainer>
<MetadataContainer
{object.name}
</Metadata>
<Metadata
translationKey="description"
enrichmentType={AdditionalType.Description}
>
<MetadataEntries>{object.description}</MetadataEntries>
</MetadataContainer>
{object.description}
</Metadata>

<MetadataContainer
<Metadata
translationKey="materials"
enrichmentType={AdditionalType.Material}
>
<MetadataEntries>
{object.materials?.map(material => (
<div key={material.id}>{material.name}</div>
))}
</MetadataEntries>
</MetadataContainer>
{object.materials?.map(material => (
<div key={material.id}>{material.name}</div>
))}
</Metadata>

<MetadataContainer
<Metadata
translationKey="dateCreated"
enrichmentType={AdditionalType.DateCreated}
>
<MetadataEntries>
{object.dateCreated && (
<div>{formatDateCreated(object.dateCreated, locale)}</div>
)}
</MetadataEntries>
</MetadataContainer>
{object.dateCreated && (
<div>{formatDateCreated(object.dateCreated, locale)}</div>
)}
</Metadata>

<MetadataContainer
<Metadata
translationKey="types"
enrichmentType={AdditionalType.Type}
>
<MetadataEntries>
{object.types?.map(type => (
<div key={type.id}>{type.name}</div>
))}
</MetadataEntries>
</MetadataContainer>
{object.types?.map(type => <div key={type.id}>{type.name}</div>)}
</Metadata>

<MetadataContainer
<Metadata
translationKey="techniques"
enrichmentType={AdditionalType.Technique}
>
<MetadataEntries>
{object.techniques?.map(technique => (
<div key={technique.id}>{technique.name}</div>
))}
</MetadataEntries>
</MetadataContainer>
{object.techniques?.map(technique => (
<div key={technique.id}>{technique.name}</div>
))}
</Metadata>

<MetadataContainer
<Metadata
translationKey="creators"
enrichmentType={AdditionalType.Creator}
>
<MetadataEntries>
{object.creators?.map(creator => (
<div key={creator.id}>{creator.name}</div>
))}
</MetadataEntries>
</MetadataContainer>
{object.creators?.map(creator => (
<div key={creator.id}>{creator.name}</div>
))}
</Metadata>

<MetadataContainer
<Metadata
translationKey="inscriptions"
enrichmentType={AdditionalType.Inscription}
>
<MetadataEntries>
{object.inscriptions?.map(inscription => (
<div key={inscription}>{inscription}</div>
))}
</MetadataEntries>
</MetadataContainer>
{object.inscriptions?.map(inscription => (
<div key={inscription}>{inscription}</div>
))}
</Metadata>
</div>
</main>
<aside className="w-full md:w-1/3 self-stretch order-1 md:order-2 md:mx-0 md:bg-neutral-100 p-1">
Expand Down

2 comments on commit d1f7337

@vercel
Copy link

@vercel vercel bot commented on d1f7337 Dec 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

colonial-collections-researcher – ./apps/researcher

colonial-collections-researcher-colonial-heritage.vercel.app
colonial-collections-researcher.vercel.app
colonial-collections-researcher-git-main-colonial-heritage.vercel.app
app.colonialcollections.nl

@vercel
Copy link

@vercel vercel bot commented on d1f7337 Dec 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

colonial-collections-dataset-browser – ./apps/dataset-browser

colonial-collections-dataset-browser-colonial-heritage.vercel.app
colonial-collections-dataset-browser.vercel.app
colonial-collections-dataset-browser-git-main-colonial-heritage.vercel.app
datasets.colonialcollections.nl

Please sign in to comment.