use ExpandOrContractButton

src/client/js/components/PageEditor/ExpandOrContractButton.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 function ExpandOrContractButton(props) {
@@ -8,17 +8,17 @@ function ExpandOrContractButton(props) {
     return isWindowExpanded ? 'icon-size-actual' : 'icon-size-fullscreen';
   }, [isWindowExpanded]);
 
-  const clickContractButtonHandler = useEffect(() => {
+  const clickContractButtonHandler = () => {
     if (contractWindow != null) {
       contractWindow();
     }
-  }, [contractWindow]);
+  };
 
-  const clickExpandButtonHandler = useEffect(() => {
+  const clickExpandButtonHandler = () => {
     if (expandWindow != null) {
       expandWindow();
     }
-  }, [expandWindow]);
+  };
 
   return (
     <button type="button" className="close" onClick={isWindowExpanded ? clickContractButtonHandler : clickExpandButtonHandler}>

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -13,6 +13,7 @@ import { debounce } from 'throttle-debounce';
 
 import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 import MarkdownTable from '../../models/MarkdownTable';
+import ExpandOrContractButton from './ExpandOrContractButton';
 
 const DEFAULT_HOT_HEIGHT = 300;
 const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
@@ -422,12 +423,15 @@ export default class HandsontableModal extends React.PureComponent {
 
     const dialogClassName = dialogClassNames.join(' ');
 
-    // eslint-disable-next-line no-unused-vars
     const buttons = (
       <span>
         {/* change order because of `float: right` by '.close' class */}
         {this.renderCloseButton()}
-        {this.renderExpandOrContractButton()}
+        <ExpandOrContractButton
+          isWindowExpanded={this.state.isWindowExpanded}
+          contractWindow={this.contractWindow}
+          expandWindow={this.expandWindow}
+        />
       </span>
     );