delete list and remove dataset work

uc-cdis · Oct 3, 2024 · 0f6b919 · 0f6b919
1 parent 12373bd
commit 0f6b919
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontend/src/features/DataLibrary/DataLibraryPanel.tsx b/packages/frontend/src/features/DataLibrary/DataLibraryPanel.tsx
@@ -1,5 +1,5 @@
 import { Accordion, Button, Checkbox } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ListsTable from './tables/ListsTable';
 import { DataLibraryList } from './types';
 import {
@@ -14,6 +14,7 @@ import {
 import { data1 } from './utils';
 import SearchAndActions from './SearchAndActions';
 import { DatasetAccordianControl } from './DatasetAccordianControl';
+import { useDeepCompareEffect } from 'use-deep-compare';
 
 const DataLibraryPanel = () => {
   const [currentLists, setCurrentLists] = useState<Array<DataLibraryList>>([]);
@@ -23,18 +24,34 @@ const DataLibraryPanel = () => {
     setAllListsInDataLibrary,
     clearLibrary,
     updateListInDataLibrary,
+    deleteListFromDataLibrary,
   } = useDataLibrary(false);
 
   const updateList = async (listId: string, update: Record<string, any>) => {
     if (!dataLibraryItems) return;
+    console.log('updateList from list', listId);
     await updateListInDataLibrary(listId, {
       ...dataLibraryItems.lists[listId],
       ...update,
       updatedTime: new Date().toISOString(),
     });
   };
 
-  useEffect(() => {
+  const removeItemFromList = async (listId: string, itemId: string) => {
+    if (!dataLibraryItems) return;
+
+    console.log('remove from list', listId, itemId);
+    const { [itemId]: removedKey, ...newObject } =
+      dataLibraryItems.lists[listId].items;
+    await updateListInDataLibrary(listId, {
+      ...dataLibraryItems.lists[listId],
+      items: newObject,
+      updatedTime: new Date().toISOString(),
+    });
+  };
+
+  useDeepCompareEffect(() => {
+    console.log('DataLibraryPanel: dataLibraryItems', dataLibraryItems);
     const savedLists = Object.entries(dataLibraryItems?.lists ?? {}).map(
       // for each List
       ([listId, dataList]) => {
@@ -98,9 +115,14 @@ const DataLibraryPanel = () => {
                     id={id}
                     listName={name}
                     updateHandler={updateList}
+                    deleteListHandler={deleteListFromDataLibrary}
                   />
                   <Accordion.Panel>
-                    <ListsTable data={datasetItems} />
+                    <ListsTable
+                      listId={id}
+                      data={datasetItems}
+                      removeList={removeItemFromList}
+                    />
                   </Accordion.Panel>
                 </Accordion.Item>
               </Accordion>

diff --git a/packages/frontend/src/features/DataLibrary/DatasetAccordianControl.tsx b/packages/frontend/src/features/DataLibrary/DatasetAccordianControl.tsx
@@ -24,11 +24,11 @@ export const DatasetAccordianControl = (
       listId: string,
       update: Record<string, any>,
     ) => Promise<void>;
+    deleteListHandler: (listId: string) => Promise<void>;
   },
 ): JSX.Element => {
-  const { id, listName, updateHandler } = props;
+  const { id, listName, updateHandler, deleteListHandler } = props;
   const [value, setValue] = useState<string | undefined>(undefined);
-  const { deleteListFromDataLibrary } = useDataLibrary(false);
 
   const handleSubmit = () => {
     updateHandler(id, { name: value });
@@ -71,7 +71,7 @@ export const DatasetAccordianControl = (
         <ActionIcon
           color="accent.4"
           aria-label="delete datalist"
-          onClick={() => deleteListFromDataLibrary(id)}
+          onClick={() => deleteListHandler(id)}
         >
           <DeleteIcon />
         </ActionIcon>

diff --git a/packages/frontend/src/features/DataLibrary/tables/ListsTable.tsx b/packages/frontend/src/features/DataLibrary/tables/ListsTable.tsx
@@ -29,10 +29,12 @@ const columns = [
 ];
 
 export interface ListsTableProps {
+  listId: string;
   data: Array<DatasetContents>;
+  removeList: (listId: string, itemId: string) => void;
 }
 
-const ListContentsTable = ({ data }: ListsTableProps) => {
+const ListContentsTable = ({ listId, data, removeList }: ListsTableProps) => {
   const rows = useDeepCompareMemo(
     () => [
       ...data.map(({ name, id }, j) => {
@@ -52,8 +54,13 @@ const ListContentsTable = ({ data }: ListsTableProps) => {
     columns: columns,
     data: rows,
     ...commonTableSettings,
-    renderRowActionMenuItems: () => (
-      <ActionIcon>
+    renderRowActions: ({ row }) => (
+      <ActionIcon
+        aria-label={`remove datalist ${row.original.name} from list`}
+        onClick={() => {
+          removeList(listId, row.original.name);
+        }}
+      >
         <RemoveIcon />
       </ActionIcon>
     ),

diff --git a/packages/sampleCommons/next.config.js b/packages/sampleCommons/next.config.js
@@ -23,19 +23,24 @@ const nextConfig = {
   experimental: {
     esmExternals: true,
     instrumentationHook: true,
-    experimental: {
-      turbo: {
-        moduleIdStrategy: 'deterministic',
-      },
+    turbo: {
+      moduleIdStrategy: 'deterministic',
     },
   },
   i18n: {
-    locales: ['en'],
-    defaultLocale: 'en',
+    locales: ['en-US'],
+    defaultLocale: 'en-US',
   },
   pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
   transpilePackages: ['@gen3/frontend'],
   basePath: process.env.BASE_PATH || '',
+  webpack: (config) => {
+    config.infrastructureLogging = {
+      level: 'error',
+    };
+
+    return config;
+  },
   async headers() {
     return [
       {