21128: fixed select single item crash Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

[arvados-workbench2.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 c82f2ce36ee55a6f5ce46d757b8fffae81615640..24cd91403aebce649c3f893814745daabfb7f139 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -133,7 +133,6 @@ export type TCheckedList = Record<string, boolean>;
 
 type DataTableState = {
     isSelected: boolean;
-    checkedList: TCheckedList;
 };
 
 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@ -142,7 +141,6 @@ export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         state: DataTableState = {
             isSelected: false,
-            checkedList: this.props.checkedList,
         };
 
         componentDidMount(): void {
@@ -150,33 +148,36 @@ export const DataTable = withStyles(styles)(
         }
 
         componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
-            const { items, toggleMSToolbar, setCheckedListOnStore } = this.props;
-            const { isSelected, checkedList } = this.state;
+            const { items, setCheckedListOnStore } = this.props;
+            const { isSelected } = this.state;
             if (prevProps.items !== items) {
                 if (isSelected === true) this.setState({ isSelected: false });
                 if (items.length) this.initializeCheckedList(items);
-                else this.setState({ checkedList: {} });
-            }
-            if (prevState.checkedList !== checkedList) {
-                toggleMSToolbar(this.isAnySelected() ? true : false);
-                setCheckedListOnStore(checkedList);
+                else setCheckedListOnStore({});
             }
         }
 
+        componentWillUnmount(): void {
+            this.initializeCheckedList([])
+        }
+
         checkBoxColumn: DataColumn<any, any> = {
             name: "checkBoxColumn",
             selected: true,
             configurable: false,
             filters: createTree(),
-            render: uuid => (
-                <input
-                    type="checkbox"
-                    name={uuid}
-                    className={this.props.classes.checkBox}
-                    checked={this.state.checkedList[uuid] ?? false}
-                    onChange={() => this.handleCheck(uuid)}
-                    onDoubleClick={ev => ev.stopPropagation()}></input>
-            ),
+            render: uuid => {
+                const { classes, checkedList } = this.props;
+                return (
+                    <input
+                        type="checkbox"
+                        name={uuid}
+                        className={classes.checkBox}
+                        checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
+                        onChange={() => this.handleSelectOne(uuid)}
+                        onDoubleClick={ev => ev.stopPropagation()}></input>
+                );
+            },
         };
 
         multiselectOptions: DataTableMultiselectOption[] = [
@@ -186,7 +187,7 @@ export const DataTable = withStyles(styles)(
         ];
 
         initializeCheckedList = (uuids: any[]): void => {
-            const newCheckedList = { ...this.state.checkedList };
+            const newCheckedList = { ...this.props.checkedList };
 
             uuids.forEach(uuid => {
                 if (!newCheckedList.hasOwnProperty(uuid)) {
@@ -198,7 +199,7 @@ export const DataTable = withStyles(styles)(
                     delete newCheckedList[key];
                 }
             }
-            this.setState({ checkedList: newCheckedList });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         isAllSelected = (list: TCheckedList): boolean => {
@@ -209,7 +210,7 @@ export const DataTable = withStyles(styles)(
         };
 
         isAnySelected = (): boolean => {
-            const { checkedList } = this.state;
+            const { checkedList } = this.props;
             if (!Object.keys(checkedList).length) return false;
             for (const key in checkedList) {
                 if (checkedList[key] === true) return true;
@@ -217,15 +218,16 @@ export const DataTable = withStyles(styles)(
             return false;
         };
 
-        handleCheck = (uuid: string): void => {
-            const { checkedList } = this.state;
+        handleSelectOne = (uuid: string): void => {
+            const { checkedList } = this.props;
             const newCheckedList = { ...checkedList };
             newCheckedList[uuid] = !checkedList[uuid];
-            this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
+            this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         handleSelectorSelect = (): void => {
-            const { checkedList } = this.state;
+            const { checkedList } = this.props;
             const { isSelected } = this.state;
             isSelected ? this.handleSelectNone(checkedList) : this.handleSelectAll(checkedList);
         };
@@ -236,7 +238,8 @@ export const DataTable = withStyles(styles)(
                 for (const key in newCheckedList) {
                     newCheckedList[key] = true;
                 }
-                this.setState({ isSelected: true, checkedList: newCheckedList });
+                this.setState({ isSelected: true });
+                this.props.setCheckedListOnStore(newCheckedList);
             }
         };
 
@@ -245,7 +248,8 @@ export const DataTable = withStyles(styles)(
             for (const key in newCheckedList) {
                 newCheckedList[key] = false;
             }
-            this.setState({ isSelected: false, checkedList: newCheckedList });
+            this.setState({ isSelected: false });
+            this.props.setCheckedListOnStore(newCheckedList);
         };
 
         handleInvertSelect = (list: TCheckedList): void => {
@@ -254,7 +258,8 @@ export const DataTable = withStyles(styles)(
                 for (const key in newCheckedList) {
                     newCheckedList[key] = !list[key];
                 }
-                this.setState({ checkedList: newCheckedList, isSelected: this.isAllSelected(newCheckedList) });
+                this.setState({ isSelected: this.isAllSelected(newCheckedList) });
+                this.props.setCheckedListOnStore(newCheckedList);
             }
         };
 
@@ -298,8 +303,8 @@ export const DataTable = withStyles(styles)(
 
         renderHeadCell = (column: DataColumn<T, any>, index: number) => {
             const { name, key, renderHeader, filters, sort } = column;
-            const { onSortToggle, onFiltersChange, classes } = this.props;
-            const { isSelected, checkedList } = this.state;
+            const { onSortToggle, onFiltersChange, classes, checkedList } = this.props;
+            const { isSelected } = this.state;
             return column.name === "checkBoxColumn" ? (
                 <TableCell
                     key={key || index}