Add remove object button

colonial-heritage · Oct 9, 2023 · 27052ba · 27052ba
1 parent b34e607
commit 27052ba
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 39 deletions.
diff --git a/...[locale]/objects/[id]/database-actions.ts → ...ale]/objects/[id]/object-lists-actions.ts b/...[locale]/objects/[id]/database-actions.ts → ...ale]/objects/[id]/object-lists-actions.ts
@@ -5,8 +5,8 @@ import {objectList} from '@colonial-collections/database';
 import {InsertObjectItem} from '@colonial-collections/database';
 import {revalidatePath} from 'next/cache';
 
-export async function getCommunityLists(communityId: string) {
-  return objectList.getByCommunityId(communityId);
+export async function getCommunityLists(communityId: string, objectId: string) {
+  return objectList.getByCommunityId(communityId, {includeObjectIri: objectId});
 }
 
 interface AddObjectToListProps {
@@ -22,3 +22,9 @@ export async function addObjectToList({
   const community = await getCommunityBySlug(communityId);
   revalidatePath(`/[locale]/communities/${community.slug}`, 'page');
 }
+
+export async function removeObjectFromList(id: number, communityId: string) {
+  await objectList.removeObject(id);
+  const community = await getCommunityBySlug(communityId);
+  revalidatePath(`/[locale]/communities/${community.slug}`, 'page');
+}
diff --git a/apps/researcher/src/app/[locale]/objects/[id]/object-lists-menu.tsx b/apps/researcher/src/app/[locale]/objects/[id]/object-lists-menu.tsx
@@ -4,8 +4,13 @@ import {useTranslations} from 'next-intl';
 import {Fragment, useState, useEffect} from 'react';
 import {Menu, Transition} from '@headlessui/react';
 import {ChevronDownIcon} from '@heroicons/react/20/solid';
+import {CheckIcon} from '@heroicons/react/24/outline';
 import {useUser} from '@clerk/nextjs';
-import {getCommunityLists, addObjectToList} from './database-actions';
+import {
+  getCommunityLists,
+  addObjectToList,
+  removeObjectFromList,
+} from './object-lists-actions';
 import {SelectObjectList} from '@colonial-collections/database';
 import {useNotifications} from 'ui';
 
@@ -24,38 +29,49 @@ function CommunityMenuItems({
   const t = useTranslations('ObjectDetails');
   const {addNotification} = useNotifications();
 
-  async function addObjectToListClick(objectList: SelectObjectList) {
-    try {
-      await addObjectToList({
-        listItem: {
-          objectIri: objectId,
-          objectListId: objectList.id,
-          createdBy: userId,
-        },
-        communityId,
-      });
-
-      addNotification({
-        id: 'objectAddedToList',
-        message: t.rich('objectAddedToList', {
-          name: () => <em>{objectList.name}</em>,
-        }),
-        type: 'success',
-      });
-    } catch (err) {
-      if ((err as Error).message.includes('Duplicate entry')) {
-        console.log(err);
+  async function listClick(objectList: SelectObjectList) {
+    const objectInList = !!objectList.objects!.length;
+
+    if (objectInList) {
+      try {
+        await removeObjectFromList(objectList.objects![0].id, communityId);
+
+        addNotification({
+          id: 'objectRemovedFromList',
+          message: t.rich('objectRemovedFromList', {
+            name: () => <em>{objectList.name}</em>,
+          }),
+          type: 'success',
+        });
+      } catch (err) {
+        addNotification({
+          id: 'errorObjectRemovedFromList',
+          message: t('errorObjectRemovedFromList'),
+          type: 'error',
+        });
+      }
+    } else {
+      try {
+        await addObjectToList({
+          listItem: {
+            objectIri: objectId,
+            objectListId: objectList.id,
+            createdBy: userId,
+          },
+          communityId,
+        });
+
         addNotification({
-          id: 'objectAlreadyInList',
-          message: t.rich('objectAlreadyInList', {
+          id: 'objectAddedToList',
+          message: t.rich('objectAddedToList', {
             name: () => <em>{objectList.name}</em>,
           }),
-          type: 'warning',
+          type: 'success',
         });
-      } else {
+      } catch (err) {
         addNotification({
-          id: 'objectNotAddedToList',
-          message: t('objectNotAddedToList'),
+          id: 'errorObjectAddedToList',
+          message: t('errorObjectAddedToList'),
           type: 'error',
         });
       }
@@ -64,11 +80,11 @@ function CommunityMenuItems({
 
   useEffect(() => {
     async function getLists() {
-      const lists = await getCommunityLists(communityId);
+      const lists = await getCommunityLists(communityId, objectId);
       setObjectLists(lists);
     }
     getLists();
-  }, [communityId]);
+  }, [communityId, objectId]);
 
   if (!objectLists.length) {
     return (
@@ -83,9 +99,14 @@ function CommunityMenuItems({
       {objectLists.map(objectList => (
         <Menu.Item key={objectList.id}>
           <button
-            onClick={() => addObjectToListClick(objectList)}
-            className="block px-4 py-2 text-sm w-full text-left text-gray-700"
+            onClick={() => listClick(objectList)}
+            className="group flex items-center px-4 py-2 text-sm text-gray-700"
           >
+            <span className="mr-3 h-5 w-5 blueGrey-500 group-hover:blueGrey-700">
+              {objectList.objects!.length ? (
+                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+              ) : null}
+            </span>
             {objectList.name}
           </button>
         </Menu.Item>

diff --git a/apps/researcher/src/messages/en/messages.json b/apps/researcher/src/messages/en/messages.json
@@ -87,8 +87,9 @@
     "dateCreatedSubTitle": "When was the object made? Could be an exact date or a range.",
     "noListsInCommunity": "No lists",
     "objectAddedToList": "Object added to list <name></name>.",
-    "objectAlreadyInList": "Object already in list <name></name>.",
-    "objectNotAddedToList": "There was a problem adding the object to the list. Please try again later."
+    "errorObjectAddedToList": "There was a problem adding the object to the list. Please try again later.",
+    "objectRemovedFromList": "Object removed from list <name></name>.",
+    "errorObjectRemovedFromList": "There was a problem removing the object from the list. Please try again later."
   },
   "PersonDetails": {
     "backButton": "Back to results",

diff --git a/apps/researcher/src/messages/nl/messages.json b/apps/researcher/src/messages/nl/messages.json
@@ -87,8 +87,9 @@
     "dateCreatedSubTitle": "Wanneer is het voorwerp gemaakt? Dit kan een exacte datum of een datumbereik zijn.",
     "noListsInCommunity": "Geen lijsten",
     "objectAddedToList": "Object toegevoegd aan lijst <name></name>.",
-    "objectAlreadyInList": "Object staat al in lijst <name></name>.",
-    "objectNotAddedToList": "Er is een probleem opgetreden bij het toevoegen van het object aan de lijst. Probeer het later opnieuw."
+    "errorObjectAddedToList": "Er is een probleem opgetreden bij het toevoegen van het object aan de lijst. Probeer het later opnieuw.",
+    "objectRemovedFromList": "Object verwijderd van lijst <name></name>.",
+    "errorObjectRemovedFromList": "Er is een probleem opgetreden bij het verwijderen van het object van de lijst. Probeer het later opnieuw."
   },
   "PersonDetails": {
     "backButton": "Terug naar resultaten",

diff --git a/packages/database/src/object-list.ts b/packages/database/src/object-list.ts
@@ -9,11 +9,12 @@ import {SelectObjectList} from './db/types';
 interface Option {
   withObjects?: boolean;
   limitObjects?: number;
+  includeObjectIri?: string;
 }
 
 export async function getByCommunityId(
   communityId: string,
-  {withObjects, limitObjects}: Option = {withObjects: false}
+  {withObjects, limitObjects, includeObjectIri}: Option = {withObjects: false}
   // Explicitly set the return type, or else `objects` will not be included.
 ): Promise<SelectObjectList[]> {
   const options: DBQueryConfig = {};
@@ -24,6 +25,15 @@ export async function getByCommunityId(
     };
   }
 
+  if (includeObjectIri) {
+    const objectId = iriToHash(includeObjectIri);
+    options.with = {
+      objects: {
+        where: (objectItems, {eq}) => eq(objectItems.objectId, objectId),
+      },
+    };
+  }
+
   return db.query.objectLists.findMany({
     ...options,
     where: (objectLists, {eq}) => eq(objectLists.communityId, communityId),
@@ -83,3 +93,19 @@ export async function addObject({
 
   return db.insert(objectItems).values(objectItem);
 }
+
+export async function removeObject(id: number) {
+  return db.delete(objectItems).where(eq(objectItems.id, id));
+}
+
+export async function objectExists({objectListId, objectIri}: AddObjectProps) {
+  const objectId = iriToHash(objectIri);
+
+  return await db.query.objectItems.findFirst({
+    where: (objectItems, {and, eq}) =>
+      and(
+        eq(objectItems.objectId, objectId),
+        eq(objectItems.objectListId, objectListId)
+      ),
+  });
+}