Merge pull request #248 from colonial-heritage/object-list-frontend

Object lists in community page

apps/dataset-browser/src/app/[locale]/layout.tsx

@@ -16,7 +16,7 @@ export default async function RootLayout({children, params: {locale}}: Props) {
   let messages;
   try {
     messages = (await import(`../../messages/${locale}/messages.json`)).default;
-  } catch (error) {
+  } catch (err) {
     notFound();
   }
 

apps/dataset-browser/src/app/[locale]/page.tsx

@@ -97,9 +97,9 @@ export default async function Home({searchParams = {}}: Props) {
   let searchResult: SearchResult | undefined;
   try {
     searchResult = await datasetFetcher.search(searchOptions);
-  } catch (error) {
+  } catch (err) {
     hasError = true;
-    console.error(error);
+    console.error(err);
   }
 
   const locale = useLocale();

apps/researcher/package.json

@@ -31,6 +31,7 @@
     "@hapi/hoek": "11.0.2",
     "@headlessui/react": "1.7.17",
     "@heroicons/react": "2.0.18",
+    "@hookform/resolvers": "3.3.1",
     "@next/mdx": "13.5.3",
     "classnames": "2.3.2",
     "fetch-sparql-endpoint": "3.3.3",
@@ -40,6 +41,8 @@
     "rdf-object": "1.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.46.1",
+    "tiny-case": "1.0.3",
     "zod": "3.22.2",
     "zustand": "4.3.9"
   },

apps/researcher/src/app/[locale]/communities/[slug]/[listId]/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>This page is under construction</h1>
+    </div>
+  );
+}

apps/researcher/src/app/[locale]/communities/[slug]/buttons.tsx

@@ -38,10 +38,10 @@ export function JoinCommunityButton({communityId}: Props) {
           organizationId: communityId,
           userId: user!.id,
         });
-      } catch (error) {
+      } catch (err) {
         setIsClicked(false);
         setHasError(true);
-        console.error(error);
+        console.error(err);
       }
     });
   };

apps/researcher/src/app/[locale]/communities/[slug]/object.tsx

@@ -0,0 +1,19 @@
+import heritageObjects from '@/lib/heritage-objects-instance';
+
+interface Props {
+  objectIri: string;
+}
+
+export default async function ObjectCard({objectIri}: Props) {
+  const object = await heritageObjects.getById(objectIri);
+
+  if (!object) {
+    return null;
+  }
+
+  return (
+    <div className="border border-blueGrey-200 text-blueGrey-800 bg-greenGrey-50 rounded-sm p-2 text-xs">
+      {object.name}
+    </div>
+  );
+}

apps/researcher/src/app/[locale]/communities/[slug]/page.tsx

@@ -7,6 +7,10 @@ import {getMemberships, getCommunityBySlug, isAdmin} from '@/lib/community';
 import ErrorMessage from '@/components/error-message';
 import {ClerkAPIResponseError} from '@clerk/shared';
 import {revalidatePath} from 'next/cache';
+import {objectList} from '@colonial-collections/database';
+import ObjectCard from './object';
+import AddObjectListForm from '@/components/add-object-list-form';
+import {SlideOutButton, SlideOut, Notifications} from 'ui';
 
 interface Props {
   params: {
@@ -15,6 +19,8 @@ interface Props {
   };
 }
 
+const slideOutFormId = 'add-object-list';
+
 export default async function CommunityPage({params}: Props) {
   const t = await getTranslator(params.locale, 'Community');
 
@@ -39,9 +45,19 @@ export default async function CommunityPage({params}: Props) {
     return <ErrorMessage error={t('error')} />;
   }
 
+  let objectLists;
+  try {
+    objectLists = await objectList.getByCommunityId(community.id, {
+      withObjects: true,
+      limitObjects: 4,
+    });
+  } catch (err) {
+    return <ErrorMessage error={t('error')} />;
+  }
+
   return (
     <>
-      <div className=" px-4 sm:px-10 -mt-3 -mb-3 sm:-mb-9 flex gap-2 flex-row sm:justify-between w-full max-w-[1800px] mx-auto">
+      <div className="px-4 sm:px-10 -mt-3 -mb-3 sm:-mb-9 flex gap-2 flex-row sm:justify-between w-full max-w-[1800px] mx-auto">
         <div>
           <Link href="/communities" className="flex items-center gap-1">
             <ChevronLeftIcon className="w-4 h-4 fill-neutral-500" />
@@ -52,27 +68,93 @@ export default async function CommunityPage({params}: Props) {
           {isAdmin(memberships) && <EditCommunityButton />}
         </div>
       </div>
-      <div className="px-4 my-10 sm:px-10 w-full max-w-[1800px] mx-auto">
-        <h1 className="text-2xl md:text-4xl font-normal">
-          {t('title')}
-          <span className="font-semibold ml-2" data-testid="community-name">
-            {community.name}
-          </span>
-        </h1>
-      </div>
-      <div className="flex flex-col md:flex-row h-full items-stretch grow content-stretch self-stretch gap-4 md:gap-16 w-full max-w-[1800px] mx-auto px-4 sm:px-10">
-        <main className="w-full md:w-3/4">
-          <div className="w-full flex flex-col md:flex-row justify-between">
-            <div className="mb-4 max-w-3xl">
-              {/*Place the description here*/}
+      <div className="flex flex-col md:flex-row h-full items-stretch grow content-stretch self-stretch gap-4 md:gap-16 w-full max-w-[1800px] mx-auto px-4 sm:px-10 mt-12">
+        <main className="w-full">
+          <div className="-mb-16 md:-mb-24 w-full flex justify-center">
+            <div className="w-32 h-32 lg:w-48 lg:h-48 rounded-full overflow-hidden relative">
+              <Image
+                fill
+                sizes="(min-width: 1024px) 192px, 128px"
+                src={community.imageUrl}
+                alt=""
+              />
             </div>
-            <div className="flex flex-col items-start md:justify-center md:items-center w-full mb-4">
-              <JoinCommunityButton communityId={community.id} />
+          </div>
+          <div className="w-full rounded-lg bg-[#f3eee2] text-stone-800 pt-16 md:pt-24 pb-6">
+            <h1 className="text-2xl font-normal w-full text-center mt-4 px-4 my-6">
+              {t('title')}
+              <span className="font-semibold ml-2" data-testid="community-name">
+                {community.name}
+              </span>
+            </h1>
+
+            <div className="w-full flex flex-col md:flex-row justify-center px-4">
+              <div className="mb-4 max-w-3xl text-left">
+                {/*Place the description here*/}
+              </div>
+              <div className="flex flex-col items-start md:justify-center md:items-center w-full mb-4">
+                <JoinCommunityButton communityId={community.id} />
+              </div>
             </div>
           </div>
-          <h2 className="mb-6">{t('objectListsTitle')}</h2>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 w-full">
-            {/*Place the lists here */}
+
+          <div className="mt-12">
+            <div className="flex justify-between my-4">
+              <div>
+                <h2>{t('objectListsTitle')}</h2>
+                <p>{t('objectListsSubTitle', {count: objectLists.length})}</p>
+              </div>
+              <div>
+                {isAdmin(memberships) && (
+                  <SlideOutButton
+                    id={slideOutFormId}
+                    className="flex items-center py-2 px-3 rounded-full bg-sand-100 text-sand-900 hover:bg-white transition text-xs"
+                  >
+                    {t('addObjectListButton')}
+                  </SlideOutButton>
+                )}
+              </div>
+            </div>
+
+            <Notifications />
+            <SlideOut id={slideOutFormId}>
+              <AddObjectListForm
+                slideOutId={slideOutFormId}
+                communityId={community.id}
+              />
+            </SlideOut>
+
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 xl:gap-16">
+              {objectLists.map(objectList => (
+                <Link
+                  href={`/communities/${params.slug}/${objectList.id}`}
+                  key={objectList.id}
+                  className="text-neutral-800"
+                >
+                  <h3 className="font-semibold text-xl mt-4 mb-2">
+                    {objectList.name}
+                  </h3>
+                  <p>{objectList.description}</p>
+
+                  <div className="w-full relative">
+                    <ul className=" mt-4 grid grid-cols-4 gap-2">
+                      {objectList.objects?.map(object => (
+                        <ObjectCard
+                          key={object.objectId}
+                          objectIri={object.objectIri}
+                        />
+                      ))}
+                    </ul>
+
+                    <div className="absolute bg-gradient-to-l from-white w-full top-0 bottom-0 flex justify-end">
+                      <button className="p-2 self-center flex items-center py-2 px-3 rounded-full bg-sand-100 text-sand-900 hover:bg-white transition text-xs">
+                        {t('goToListButton')}
+                      </button>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
           </div>
         </main>
         <aside className="w-full md:w-1/4 self-stretch">

apps/researcher/src/app/[locale]/communities/community-card.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import {Suspense} from 'react';
 import {revalidatePath} from 'next/cache';
 import {ClerkAPIResponseError} from '@clerk/shared';
+import {objectList} from '@colonial-collections/database';
 
 interface MembershipCountProps {
   communityId: string;
@@ -19,6 +20,7 @@ async function MembershipCount({communityId, locale}: MembershipCountProps) {
   try {
     memberships = await getMemberships(communityId);
   } catch (err) {
+    console.error(err);
     const errorStatus = (err as ClerkAPIResponseError).status;
     if (errorStatus === 404 || errorStatus === 410) {
       // This could be a sign of a deleted community in the cache.
@@ -32,6 +34,25 @@ async function MembershipCount({communityId, locale}: MembershipCountProps) {
   });
 }
 
+interface MembershipCountProps {
+  communityId: string;
+  locale: string;
+}
+
+async function ObjectListCount({communityId, locale}: MembershipCountProps) {
+  const t = await getTranslator(locale, 'Communities');
+
+  try {
+    const objectListCount = await objectList.countByCommunityId(communityId);
+    return t.rich('objectListCount', {
+      count: objectListCount,
+    });
+  } catch (err) {
+    console.error(err);
+    return t('objectListCountError');
+  }
+}
+
 interface CommunityCardProps {
   community: Community;
   locale: string;
@@ -77,7 +98,11 @@ export default function CommunityCard({community, locale}: CommunityCardProps) {
             <MembershipCount communityId={community.id} locale={locale} />
           </Suspense>
         </div>
-        <div className="w-1/2 p-4">{/* TODO add number of lists here */}</div>
+        <div className="w-1/2 p-4">
+          <Suspense>
+            <ObjectListCount communityId={community.id} locale={locale} />
+          </Suspense>
+        </div>
       </div>
     </Link>
   );

apps/researcher/src/app/[locale]/layout.tsx

@@ -17,7 +17,7 @@ export default async function RootLayout({children, params: {locale}}: Props) {
   let messages;
   try {
     messages = (await import(`../../messages/${locale}/messages.json`)).default;
-  } catch (error) {
+  } catch (err) {
     notFound();
   }
 

apps/researcher/src/app/[locale]/page.tsx

@@ -92,9 +92,9 @@ export default async function Home({searchParams = {}}: Props) {
   let searchResult: SearchResult | undefined;
   try {
     searchResult = await heritageObjects.search(searchOptions);
-  } catch (error) {
+  } catch (err) {
     hasError = true;
-    console.error(error);
+    console.error(err);
   }
 
   const locale = useLocale();

apps/researcher/src/app/[locale]/persons/page.tsx

@@ -98,9 +98,9 @@ export default async function Home({searchParams = {}}: Props) {
   let searchResult: SearchResult | undefined;
   try {
     searchResult = await personFetcher.search(searchOptions);
-  } catch (error) {
+  } catch (err) {
     hasError = true;
-    console.error(error);
+    console.error(err);
   }
 
   const locale = useLocale();

apps/researcher/src/components/add-object-list-form/actions.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import {getCommunityById} from '@/lib/community';
+import {objectList} from '@colonial-collections/database';
+import {revalidatePath} from 'next/cache';
+
+interface List {
+  communityId: string;
+  createdBy: string;
+  name: string;
+  description?: string;
+}
+
+export async function addList(list: List) {
+  await objectList.create(list);
+  const community = await getCommunityById(list.communityId);
+  revalidatePath(`/[locale]/communities/${community.slug}`, 'page');
+}