refs #

Fix performance bug in with-dialog and context-menu components

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/store/dialog/with-dialog.ts b/src/store/dialog/with-dialog.ts
index 41dcd559c6a47033d779a339bd82f5953d05835e..6eaee0d2531b680419264fb10453e257527c5a31 100644 (file)
--- a/src/store/dialog/with-dialog.ts
+++ b/src/store/dialog/with-dialog.ts
@@ -23,9 +23,11 @@ export const withDialog = (id: string) =>
     <T, P>(component: React.ComponentType<WithDialogProps<T> & any>) =>
         connect(mapStateToProps(id), mapDispatchToProps(id))(component);
 
+const emptyData = {};
+
 export const mapStateToProps = (id: string) => <T>(state: { dialog: DialogState }): WithDialogStateProps<T> => {
     const dialog = state.dialog[id];
-    return dialog ? dialog : { open: false, data: {} };
+    return dialog ? dialog : { open: false, data: emptyData };
 };
 
 export const mapDispatchToProps = (id: string) => (dispatch: Dispatch): WithDialogDispatchProps => ({

diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx
index 4ce2f5214d5f337d2488f0acb232d6d1ea5f1b0d..f6910290a40f694ce8b84aa3e5e7c1b1f93ce1cd 100644 (file)
--- a/src/views-components/context-menu/context-menu.tsx
+++ b/src/views-components/context-menu/context-menu.tsx
@@ -9,7 +9,7 @@ import { ContextMenu as ContextMenuComponent, ContextMenuProps, ContextMenuItem
 import { createAnchorAt } from "~/components/popover/helpers";
 import { ContextMenuActionSet, ContextMenuAction } from "./context-menu-action-set";
 import { Dispatch } from "redux";
-
+import { memoize } from 'lodash';
 type DataProps = Pick<ContextMenuProps, "anchorEl" | "items" | "open"> & { resource?: ContextMenuResource };
 const mapStateToProps = (state: RootState): DataProps => {
     const { open, position, resource } = state.contextMenu;
@@ -34,14 +34,20 @@ const mapDispatchToProps = (dispatch: Dispatch): ActionProps => ({
     }
 });
 
+const handleItemClick = memoize(
+    (resource: DataProps['resource'], onItemClick: ActionProps['onItemClick']): ContextMenuProps['onItemClick'] =>
+        item => {
+            onItemClick(item, resource);
+        }
+);
+
 const mergeProps = ({ resource, ...dataProps }: DataProps, actionProps: ActionProps): ContextMenuProps => ({
     ...dataProps,
     ...actionProps,
-    onItemClick: item => {
-        actionProps.onItemClick(item, resource);
-    }
+    onItemClick: handleItemClick(resource, actionProps.onItemClick)
 });
 
+
 export const ContextMenu = connect(mapStateToProps, mapDispatchToProps, mergeProps)(ContextMenuComponent);
 
 const menuActionSets = new Map<string, ContextMenuActionSet>();
@@ -50,8 +56,9 @@ export const addMenuActionSet = (name: string, itemSet: ContextMenuActionSet) =>
     menuActionSets.set(name, itemSet);
 };
 
+const emptyActionSet: ContextMenuActionSet = [];
 const getMenuActionSet = (resource?: ContextMenuResource): ContextMenuActionSet => {
-    return resource ? menuActionSets.get(resource.menuKind) || [] : [];
+    return resource ? menuActionSets.get(resource.menuKind) || emptyActionSet : emptyActionSet;
 };
 
 export enum ContextMenuKind {