Skip to content

Commit 9805da3

Browse files
authored
fix: Updating Assessment Configuration crashes Admin Panel (#3071)
* Remove unused handler * Memoize callbacks * Bump AG-Grid version * Fix broken cell renderer APIs * Revert "Remove unused handler" This reverts commit 5d14144. * Fix broken row reorder callback
1 parent 99e54ed commit 9805da3

File tree

6 files changed

+39
-31
lines changed

6 files changed

+39
-31
lines changed

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"@tremor/react": "^1.8.2",
4343
"ace-builds": "^1.36.3",
4444
"acorn": "^8.9.0",
45-
"ag-grid-community": "^32.0.2",
46-
"ag-grid-react": "^32.0.2",
45+
"ag-grid-community": "^32.3.1",
46+
"ag-grid-react": "^32.3.1",
4747
"array-move": "^4.0.0",
4848
"browserfs": "^1.4.3",
4949
"classnames": "^2.3.2",

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const AssessmentConfigPanel: WithImperativeApi<
8484

8585
// Manually graded assessments should not be auto-published
8686
// Check and ensure that isManuallyGraded = true and isGradingAutoPublished = true cannot be set simultaneously
87-
const setIsManuallyGraded = (index: number, value: boolean) => {
87+
const setIsManuallyGraded = useCallback((index: number, value: boolean) => {
8888
setConfigs(prev => {
8989
const newConfigs = cloneDeep(prev) ?? [];
9090
newConfigs[index].isManuallyGraded = value;
@@ -98,9 +98,9 @@ const AssessmentConfigPanel: WithImperativeApi<
9898
gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isManuallyGraded', value);
9999
return newConfigs;
100100
});
101-
};
101+
}, []);
102102

103-
const setIsGradingAutoPublished = (index: number, value: boolean) => {
103+
const setIsGradingAutoPublished = useCallback((index: number, value: boolean) => {
104104
setConfigs(prev => {
105105
const newConfigs = cloneDeep(prev) ?? [];
106106
newConfigs[index].isGradingAutoPublished = value;
@@ -114,7 +114,7 @@ const AssessmentConfigPanel: WithImperativeApi<
114114
?.setDataValue('isGradingAutoPublished', value);
115115
return newConfigs;
116116
});
117-
};
117+
}, []);
118118

119119
const valueSetter = useCallback(
120120
<T extends keyof AssessmentConfiguration>(field: T) =>
@@ -254,7 +254,9 @@ const AssessmentConfigPanel: WithImperativeApi<
254254
setEarlyXp,
255255
setHasTokenCounter,
256256
setHasVotingFeatures,
257-
setHoursBeforeDecay
257+
setHoursBeforeDecay,
258+
setIsGradingAutoPublished,
259+
setIsManuallyGraded
258260
]
259261
);
260262

@@ -281,7 +283,7 @@ const AssessmentConfigPanel: WithImperativeApi<
281283
// Updates the data passed into ag-grid
282284
// (this is necessary to update the rowIndex in our custom cellRenderer)
283285
const onRowDragLeaveOrEnd = (event: RowDragEvent) => {
284-
// gridApi.current?.setRowData(assessmentConfig.current);
286+
gridApi.current?.setGridOption('rowData', configs);
285287
};
286288

287289
// Updates our local React state whenever there are changes

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/BooleanCell.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import { Switch } from '@blueprintjs/core';
2+
import { IRowNode } from 'ag-grid-community';
23
import React from 'react';
34
import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
45
import { KeysOfType } from 'src/commons/utils/TypeHelper';
56

67
type Props = {
78
data: AssessmentConfiguration;
89
field: KeysOfType<AssessmentConfiguration, boolean>;
9-
rowIndex: number;
10+
node: IRowNode<AssessmentConfiguration>;
1011
setStateHandler: (index: number, value: boolean) => void;
1112
};
1213

1314
const BooleanCell: React.FC<Props> = props => {
1415
const { data } = props;
16+
const { rowIndex } = props.node;
1517
const checked = data[props.field];
1618

1719
const changeHandler = React.useCallback(() => {
18-
props.setStateHandler(props.rowIndex, !checked);
19-
}, [props, checked]);
20+
props.setStateHandler(rowIndex!, !checked);
21+
}, [props, rowIndex, checked]);
2022

2123
return <Switch checked={checked} onChange={changeHandler} />;
2224
};

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/DeleteRowCell.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import { Button, Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
22
import { IconNames } from '@blueprintjs/icons';
3+
import { IRowNode } from 'ag-grid-community';
34
import React, { useCallback, useState } from 'react';
45
import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
56
import ControlButton from 'src/commons/ControlButton';
67

78
type Props = {
89
data: AssessmentConfiguration;
9-
rowIndex: number;
10+
node: IRowNode<AssessmentConfiguration>;
1011
deleteRowHandler: (index: number) => void;
1112
};
1213

13-
const DeleteRowCell: React.FC<Props> = ({ data, rowIndex, deleteRowHandler }) => {
14+
const DeleteRowCell: React.FC<Props> = ({ data, node, deleteRowHandler }) => {
15+
const { rowIndex } = node;
1416
const [isDialogOpen, setIsDialogOpen] = useState(false);
1517

1618
const clickHandler = () => {
1719
setIsDialogOpen(true);
1820
};
1921
const handleDelete = useCallback(() => {
20-
deleteRowHandler(rowIndex);
22+
deleteRowHandler(rowIndex!);
2123
setIsDialogOpen(false);
2224
}, [deleteRowHandler, rowIndex]);
2325

src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/NumericCell.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import { NumericInput } from '@blueprintjs/core';
2+
import { IRowNode } from 'ag-grid-community';
23
import React from 'react';
34
import { AssessmentConfiguration } from 'src/commons/assessment/AssessmentTypes';
45
import { KeysOfType } from 'src/commons/utils/TypeHelper';
56

67
type Props = {
78
data: AssessmentConfiguration;
89
field: KeysOfType<AssessmentConfiguration, number>;
9-
rowIndex: number;
10+
node: IRowNode<AssessmentConfiguration>;
1011
setStateHandler: (index: number, value: number) => void;
1112
};
1213

1314
const NumericCell: React.FC<Props> = props => {
1415
const { data } = props;
16+
const { rowIndex } = props.node;
1517

1618
const changeHandler = React.useCallback(
1719
(value: number) => {
18-
props.setStateHandler(props.rowIndex, value);
20+
props.setStateHandler(rowIndex!, value);
1921
},
20-
[props]
22+
[props, rowIndex]
2123
);
2224

2325
return (

yarn.lock

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3740,24 +3740,24 @@ adjust-sourcemap-loader@^4.0.0:
37403740
loader-utils "^2.0.0"
37413741
regex-parser "^2.2.11"
37423742

3743-
ag-charts-types@10.0.2:
3744-
version "10.0.2"
3745-
resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.0.2.tgz#fe4d7aa3cdc4ba6f354d7b4bbf65818e242f2fd6"
3746-
integrity sha512-Nxo5slHOXlaeg0gRIsVnovAosQzzlYfWJtdDy0Aq/VvpJru/PJ+5i2c9aCyEhgRxhBjImsoegwkgRj7gNOWV6Q==
3743+
ag-charts-types@10.3.1:
3744+
version "10.3.1"
3745+
resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.3.1.tgz#b60163a5da5f27222db71d4fcc20c0aed1854c9c"
3746+
integrity sha512-oZvu9vJLk6lmzaYi0TmVVmHFZJpVNFziU0bnllx4wR3muXCmnxz5LouKIZ8CYnNiC7VO5HmHNlFu+0DmEO5zxg==
37473747

3748-
ag-grid-community@32.0.2, ag-grid-community@^32.0.2:
3749-
version "32.0.2"
3750-
resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-32.0.2.tgz#a69d99ee944fa07ab5faa103f6f930fbd2d4b432"
3751-
integrity sha512-vLJJUjnsG9hNK41GNuW2EHu1W264kxA/poOpcX4kmyrjU5Uzvelsbj3HdKAO9POV28iqyRdKGYfAWdn8QzA7KA==
3748+
ag-grid-community@32.3.1, ag-grid-community@^32.3.1:
3749+
version "32.3.1"
3750+
resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-32.3.1.tgz#9b7b0580635e6243c6b0c50af66b590d55289293"
3751+
integrity sha512-j/VpFbDO+7tDNG5xq9JIg3zSYxKbTKlAYjaAFSUwiJF8SDyWYUALWjtiCa+mr/RowyGRTcFv5sc+HCbS6C4UKQ==
37523752
dependencies:
3753-
ag-charts-types "10.0.2"
3753+
ag-charts-types "10.3.1"
37543754

3755-
ag-grid-react@^32.0.2:
3756-
version "32.0.2"
3757-
resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-32.0.2.tgz#675b477f23f1f1338af0c15f174f9da3c68baec9"
3758-
integrity sha512-IWYsoyJ/Z763rWbE5/9SaT1n5xwIKrm/QzOG14l7i8z5J6JdJwfV0aQFATmEE8Xws2H48vlLcLdW1cv4hwV3eg==
3755+
ag-grid-react@^32.3.1:
3756+
version "32.3.1"
3757+
resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-32.3.1.tgz#6cea84597b1ccf663027d8113a228e690509de09"
3758+
integrity sha512-5xd9LGiJHghbb7KwlqzayJ+7Ot+kYXcBwwZan0cT2xtVHpJi9sz//PoWGzBILhxX707ocXz0ICsEyErAa+8WWw==
37593759
dependencies:
3760-
ag-grid-community "32.0.2"
3760+
ag-grid-community "32.3.1"
37613761
prop-types "^15.8.1"
37623762

37633763
agent-base@6:

0 commit comments

Comments
 (0)