fix: memoize ally table to avoid reset

ccontrols · Dec 4, 2020 · 79e4456 · 79e4456
1 parent 7fc4168
commit 79e4456
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/plugins/axe-plugin/src/AllyBlock/BaseAllyBlock.tsx b/plugins/axe-plugin/src/AllyBlock/BaseAllyBlock.tsx
@@ -62,7 +62,6 @@ export const BaseAllyBlock: FC<BaseAllyBlockProps> = ({ children }) => {
     }
     return actions;
   }, [incomplete.length, passes.length, violations.length]);
-  console.log('REDRAW');
   return (
     <PanelContainer actions={actions} openTab="dashboard" visibleTabs={true}>
       <HighlightSelector>{children}</HighlightSelector>

diff --git a/plugins/axe-plugin/src/AllyBlock/NodesTable.tsx b/plugins/axe-plugin/src/AllyBlock/NodesTable.tsx
@@ -20,6 +20,7 @@ export interface NodesTableProps {
 
 const SelectionCheckbox: FC<{ target: string[] }> = ({ target }) => {
   const { isSelected, selection, setSelection } = useContext(SelectionContext);
+
   const checked = isSelected(target);
   const toggleSelection = (selector: string[]) => {
     const included = tagSelectedList(selection, selector, true);
@@ -31,13 +32,7 @@ const SelectionCheckbox: FC<{ target: string[] }> = ({ target }) => {
   };
   return (
     <Label>
-      <Checkbox
-        onChange={e => {
-          toggleSelection(target);
-          e.preventDefault();
-        }}
-        checked={checked}
-      />
+      <Checkbox onChange={() => toggleSelection(target)} checked={checked} />
     </Label>
   );
 };

diff --git a/plugins/axe-plugin/src/AllyBlock/ResultsTable.tsx b/plugins/axe-plugin/src/AllyBlock/ResultsTable.tsx
@@ -54,8 +54,18 @@ export interface ResultsTableProps {
 }
 
 const ResultsTable: FC<ResultsTableProps> = ({ results, hideErrorColumns }) => {
-  const columns: Column<Record<string, unknown>>[] = useMemo(
-    () => [
+  const renderRowSubComponent = useCallback(
+    ({ row }) => (
+      <NodesTable
+        nodes={row.original.nodes}
+        hideErrorColumns={hideErrorColumns}
+      />
+    ),
+    [hideErrorColumns],
+  );
+  const table = useMemo(() => {
+    console.log('MEMO', hideErrorColumns);
+    const columns: Column<Record<string, unknown>>[] = [
       {
         // Build our expander column
         id: 'expander', // Make sure it has an ID
@@ -138,26 +148,19 @@ const ResultsTable: FC<ResultsTableProps> = ({ results, hideErrorColumns }) => {
           </Flex>
         ),
       },
-    ],
-    [],
-  );
-  const renderRowSubComponent = useCallback(
-    ({ row }) => (
-      <NodesTable
-        nodes={row.original.nodes}
-        hideErrorColumns={hideErrorColumns}
+    ];
+    return (
+      <Table
+        data={results || []}
+        columns={columns}
+        hiddenColumns={hideErrorColumns ? ['impact'] : undefined}
+        renderRowSubComponent={renderRowSubComponent}
       />
-    ),
-    [hideErrorColumns],
-  );
-  return (
-    <Table
-      data={results || []}
-      columns={columns}
-      hiddenColumns={hideErrorColumns ? ['impact'] : undefined}
-      renderRowSubComponent={renderRowSubComponent}
-    />
-  );
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [results?.length, hideErrorColumns, renderRowSubComponent]);
+
+  return table;
 };
 
 export const ViolationsTable: FC = () => {