15768: state update on checkbox tick Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados.git] / src / components / data-table / data-table.tsx

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e2ee6951d180f9383c3e3271a579279e6b3b940a..6a02d7e6b15724fb8d1383187bc2551fcad135e8 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -90,61 +90,69 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
 });
 
-//master list for all things checked and unchecked
-const checkedList: Record<string, boolean> = {};
-
-const initializeCheckedList = (items: any[]): void => {
-    for (const uuid in checkedList) {
-        if (checkedList.hasOwnProperty(uuid)) {
-            delete checkedList[uuid];
-        }
-    }
-    items.forEach((uuid) => {
-        if (!checkedList.hasOwnProperty[uuid]) {
-            checkedList[uuid] = false;
-        }
-    });
-};
-
-const handleResourceSelect = (uuid: string) => {
-    if (!checkedList[uuid]) {
-        checkedList[uuid] = true;
-    } else {
-        checkedList[uuid] = false;
-    }
-    console.log(checkedList);
-};
-
 const handleSelectAll = () => {};
 
 const handleDeselectAll = () => {};
 
-const checkBoxColumn: DataColumn<any, any> = {
-    name: '',
-    selected: true,
-    configurable: false,
-    filters: createTree(),
-    render: (item) => {
-        return <Checkbox color='primary' onClick={() => handleResourceSelect(item)} />;
-    },
+type DataTableState = {
+    checkedList: Record<string, boolean>;
 };
 
-type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
+type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules> & DataTableState;
 
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
-        componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: Readonly<{}>, snapshot?: any): void {
+        state: DataTableState = {
+            checkedList: {},
+        };
+        checkBoxColumn: DataColumn<any, any> = {
+            name: 'checkBoxColumn',
+            selected: true,
+            configurable: false,
+            filters: createTree(),
+            render: (uuid) => <input type='checkbox' name={uuid} color='primary' checked={this.state[uuid] ?? false} onChange={() => this.handleCheck(uuid)}></input>,
+        };
+
+        initializeCheckedList = (items: any[]): void => {
+            const checkedList = this.state;
+            for (const uuid in checkedList) {
+                if (checkedList.hasOwnProperty(uuid)) {
+                    delete checkedList[uuid];
+                }
+            }
+            items.forEach((uuid) => {
+                if (!checkedList.hasOwnProperty[uuid]) {
+                    checkedList[uuid] = false;
+                }
+            });
+        };
+
+        componentDidUpdate(prevProps: Readonly<DataTableProps<T>>): void {
             if (prevProps.items !== this.props.items) {
-                console.log('hi');
-                initializeCheckedList(this.props.items);
+                this.initializeCheckedList(this.props.items);
             }
         }
+
+        handleCheck = async (uuid: string) => {
+            const checkedList = this.state;
+            const newCheckedList = { ...checkedList };
+            newCheckedList[uuid] = !checkedList[uuid];
+            await this.setState(newCheckedList);
+        };
         render() {
             const { items, classes, working, columns } = this.props;
-            if (columns[0] !== checkBoxColumn) columns.unshift(checkBoxColumn);
+            if (columns[0].name !== this.checkBoxColumn.name) columns.unshift(this.checkBoxColumn);
+            const firstBox: HTMLInputElement | null = document.querySelector('input[type="checkbox"]');
             return (
                 <div className={classes.root}>
                     <div className={classes.content}>
+                        <button
+                            onClick={() => {
+                                if (firstBox) this.handleCheck(firstBox?.name);
+                            }}
+                        >
+                            TEST
+                        </button>
                         <Table>
                             <TableHead>
                                 <TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>