From 591e03b1247fe9fb43c547f62b136ada6c075c74 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 12 Oct 2020 15:04:56 +0300
Subject: [PATCH] use memo

---
 .../src/components/Button.js                  | 25 ++++++++++-------
 .../src/components/ToolGroupComponent.js      | 28 +++++++++++--------
 .../trackChanges/TrackChangeEnable.js         | 23 +++++++++------
 .../src/ui/buttons/MenuButton.js              |  2 +-
 .../DisplayText.js                            |  9 ++++--
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 681789254..2f2dd9406 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,6 +1,6 @@
 /* eslint react/prop-types: 0 */
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import MenuButton from '../ui/buttons/MenuButton';
 
@@ -26,16 +26,21 @@ const Button = ({ view = {}, item }) => {
   const isDisabled =
     enable && !enable(state) && !(select && select(state, activeViewId));
 
-  return (
-    <MenuButton
-      active={isActive || false}
-      disabled={isDisabled}
-      iconName={icon}
-      label={label}
-      onMouseDown={handleMouseDown}
-      title={title}
-    />
+  const MenuButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isActive || false}
+        disabled={isDisabled}
+        iconName={icon}
+        label={label}
+        onMouseDown={handleMouseDown}
+        title={title}
+      />
+    ),
+    [],
   );
+
+  return MenuButtonComponent;
 };
 
 export default Button;
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index cae23c1c4..6ab71762b 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import Dropdown from '../ui/buttons/Dropdown';
@@ -30,18 +30,22 @@ const ToolGroupComponent = ({ view, tools, name }) => {
       : toolsShown.push(tool.renderTool(view));
   });
 
-  return (
-    <Wrapper data-name={name}>
-      {toolsShown}
-      {rest.length > 0 && (
-        <Dropdown
-          iconName="more"
-          dropComponent={<DropWrapper>{rest}</DropWrapper>}
-          title="Show more tools"
-        />
-      )}
-    </Wrapper>
+  const MemorizedToolGroupComponent = useMemo(
+    () => (
+      <Wrapper data-name={name}>
+        {toolsShown}
+        {rest.length > 0 && (
+          <Dropdown
+            iconName="more"
+            dropComponent={<DropWrapper>{rest}</DropWrapper>}
+            title="Show more tools"
+          />
+        )}
+      </Wrapper>
+    ),
+    [],
   );
+  return MemorizedToolGroupComponent;
 };
 
 export default ToolGroupComponent;
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
index 4615cdf3a..37a147284 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import MenuButton from '../../ui/buttons/MenuButton';
 
 const TrackChangeEnable = ({ view = {}, item, enabled }) => {
@@ -11,15 +11,20 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => {
     item.run(view.state, view.dispatch);
   };
 
-  return (
-    <MenuButton
-      active={isEnabled}
-      disabled={item.enable && !item.enable(view.state)}
-      label="Track Changes"
-      onMouseDown={e => handleMouseDown(e)}
-      title={item.title}
-    />
+  const MenuButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isEnabled}
+        disabled={item.enable && !item.enable(view.state)}
+        label="Track Changes"
+        onMouseDown={e => handleMouseDown(e)}
+        title={item.title}
+      />
+    ),
+    [],
   );
+
+  return MenuButtonComponent;
 };
 
 export default TrackChangeEnable;
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
index 6101c3d50..173f8d174 100644
--- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -78,7 +78,7 @@ const MenuButton = props => {
     title,
     onMouseDown,
   } = props;
-
+  console.log('here?');
   return (
     <Wrapper
       active={active}
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
index 5b1c42631..0ad922f8c 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { injectable, inject } from 'inversify';
 import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components';
 import { isEmpty } from 'lodash';
@@ -50,7 +50,12 @@ class DisplayText extends ToolGroup {
     };
 
     const tabList = [first, second];
-    return <Tabs key={uuidv4()} tabList={tabList} />;
+
+    const TabsComponent = useMemo(
+      () => <Tabs key={uuidv4()} tabList={tabList} />,
+      [],
+    );
+    return TabsComponent;
   }
 }
 
-- 
GitLab