diverted responsibility of handleRowChange to Drawer instead of Table to remove repetition

compass/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from "react";
+import { Dispatch, FunctionComponent, ReactNode, SetStateAction } from "react";
 import React, { useState } from "react";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
 import {
@@ -23,7 +23,7 @@ type DrawerProps = {
     editableContent?: any;
     onSave?: (content: any) => void;
     rowContent?: any;
-    onRowUpdate?: (content: any) => void;
+    setData: Dispatch<SetStateAction<any>>;
 };
 
 interface EditContent {
@@ -37,13 +37,23 @@ const Drawer: FunctionComponent<DrawerProps> = ({
     onSave,
     editableContent,
     rowContent,
-    onRowUpdate,
+    setData,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isFull, setIsFull] = useState(false);
     const [isFavorite, setIsFavorite] = useState(false);
     const [tempRowContent, setTempRowContent] = useState(rowContent);
 
+    const onRowUpdate = (updatedRow: any) => {
+        setData((prevData: any) => (
+            prevData.map((row: any) => (
+                row.id === updatedRow.id
+                ? updatedRow
+                : row
+            ))
+        ))
+    };
+
     const handleTempRowContentChange = (e) => {
         const { name, value } = e.target;
         console.log(name);

compass/components/Table/ResourceTable.tsx

@@ -26,16 +26,6 @@ export default function ResourceTable({ data, setData }: ResourceTableProps ) {
         "employee",
     ])
 
-    const handleRowUpdate = (updatedRow: Resource) => {
-        setData(prevData => (
-            prevData.map(row => (
-                row.id === updatedRow.id
-                ? updatedRow
-                : row
-            ))
-        ))
-    };
-
     const columns: ColumnDef<Resource, any>[] = [
         columnHelper.accessor("name", {
             header: () => (
@@ -47,7 +37,7 @@ export default function ResourceTable({ data, setData }: ResourceTableProps ) {
                 <RowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
-                    onRowUpdate={handleRowUpdate}
+                    setData={setData}
                 />
             ),
         }),

compass/components/Table/RowOpenAction.tsx

@@ -1,14 +1,14 @@
 import Drawer from "@/components/Drawer/Drawer";
-import { useState } from "react";
-import { DataPoint } from "@/components/Table/Table";
+import DataPoint from "@/utils/models/DataPoint";
+import { Dispatch, SetStateAction, useState } from "react";
 
-type RowOpenActionProps = {
+type RowOpenActionProps<T extends DataPoint> = {
     title: string,
-    rowData: DataPoint,
-    onRowUpdate: (updatedRow: DataPoint) => void;
+    rowData: T,
+    setData: Dispatch<SetStateAction<T[]>>
 }
 
-export const RowOpenAction = ({ title, rowData, onRowUpdate }: RowOpenActionProps) => {
+export function RowOpenAction<T extends DataPoint>({ title, rowData, setData }: RowOpenActionProps<T>) {
     const [pageContent, setPageContent] = useState("");
 
     const handleDrawerContentChange = (newContent: string) => {
@@ -25,7 +25,7 @@ export const RowOpenAction = ({ title, rowData, onRowUpdate }: RowOpenActionProp
                     editableContent={pageContent}
                     rowContent={rowData}
                     onSave={handleDrawerContentChange}
-                    onRowUpdate={onRowUpdate}
+                    setData={setData}
                 >
                     {pageContent}
                 </Drawer>

compass/components/Table/ServiceTable.tsx

@@ -27,16 +27,6 @@ export default function ServiceTable({ data, setData }: ServiceTableProps ) {
         "employee",
     ])
 
-    const handleRowUpdate = (updatedRow: Service) => {
-        setData(prevData => (
-            prevData.map(row => (
-                row.id === updatedRow.id
-                ? updatedRow
-                : row
-            ))
-        ))
-    };
-
     const columns: ColumnDef<Service, any>[] = [
         columnHelper.accessor("name", {
             header: () => (
@@ -48,7 +38,7 @@ export default function ServiceTable({ data, setData }: ServiceTableProps ) {
                 <RowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
-                    onRowUpdate={handleRowUpdate}
+                    setData={setData}
                 />
             ),
         }),
@@ -106,5 +96,5 @@ export default function ServiceTable({ data, setData }: ServiceTableProps ) {
         }),
     ];
 
-    return <Table<Service> data={data} setData={setData} columns={columns} />
+    return <Table data={data} setData={setData} columns={columns} />
 };

compass/components/Table/UserTable.tsx

@@ -12,8 +12,6 @@ type UserTableProps = {
     setData: Dispatch<SetStateAction<User[]>>
 }
 
-//TODO: Remove dependecy on `data`. Only `setData` is needed. Do for others as well
-
 /**
  * Table componenet used for displaying users
  * @param props.users List of users to be displayed by the table
@@ -48,7 +46,7 @@ export default function UserTable({ data, setData }: UserTableProps ) {
                 <RowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
-                    onRowUpdate={handleRowUpdate}
+                    setData={setData}
                 />
             ),
         }),