From 3f6b14de9bddfff6af460a4ff398a29e63d0813f Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 12 Jun 2022 20:20:00 -0700
Subject: [PATCH] refactor widthhandler a bit

---
 components/Editor.js       | 7 ++++---
 components/WidthHandler.js | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/Editor.js b/components/Editor.js
index 2807c23..f301592 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -89,12 +89,13 @@ class Editor extends React.Component {
     leading: true,
   })
 
-  updateState = updates => this.setState(updates, () => this.onUpdate(this.state))
+  sync = () => this.onUpdate(this.state)
+
+  updateState = updates => this.setState(updates, this.sync)
 
   updateCode = code => this.updateState({ code })
   updateTitleBar = titleBar => this.updateState({ titleBar })
   updateWidth = width => this.setState({ widthAdjustment: false, width })
-  confirmWidth = () => this.onUpdate(this.state)
 
   getCarbonImage = async (
     {
@@ -408,7 +409,7 @@ class Editor extends React.Component {
                   <WidthHandler
                     innerRef={this.carbonNode}
                     onChange={this.updateWidth}
-                    onConfirm={this.confirmWidth}
+                    onChangeComplete={this.sync}
                     paddingHorizontal={config.paddingHorizontal}
                   />
                 }
diff --git a/components/WidthHandler.js b/components/WidthHandler.js
index 138f981..57e805e 100644
--- a/components/WidthHandler.js
+++ b/components/WidthHandler.js
@@ -13,7 +13,7 @@ function clamp(value, min, max) {
   return value
 }
 
-export default function WidthHandler({ onChange, onConfirm, innerRef, paddingHorizontal }) {
+export default function WidthHandler({ onChange, onChangeComplete, innerRef, paddingHorizontal }) {
   const startX = React.useRef(null)
   const startWidth = React.useRef(null)
 
@@ -35,11 +35,11 @@ export default function WidthHandler({ onChange, onConfirm, innerRef, paddingHor
   React.useEffect(() => {
     function handleMouseUp() {
       startX.current = null
-      onConfirm()
+      onChangeComplete()
     }
     window.addEventListener('mouseup', handleMouseUp)
     return () => window.removeEventListener('mouseup', handleMouseUp)
-  }, [onConfirm])
+  }, [onChangeComplete])
 
   return (
     // eslint-disable-next-line