Make resize to a custom hook

3 files changed, 34 insertions, 24 deletions

diff --git a/src/console/components/CommandPrompt.tsx b/src/console/components/CommandPrompt.tsx
index 4e02668..f6f4d8f 100644
--- a/src/console/components/CommandPrompt.tsx
+++ b/src/console/components/CommandPrompt.tsx
@@ -6,12 +6,12 @@ import CommandLineParser, {
   InputPhase,
 } from "../commandline/CommandLineParser";
 import Completion from "./console/Completion";
-import ConsoleFrameClient from "../clients/ConsoleFrameClient";
 import Input from "./console//Input";
 import { Command } from "../../shared/Command";
 import styled from "styled-components";
 import reducer, { defaultState, completedText } from "../reducers/completion";
 import CompletionType from "../../shared/CompletionType";
+import useAutoResize from "../hooks/useAutoResize";
 
 const COMPLETION_MAX_ITEMS = 33;
 
@@ -26,7 +26,8 @@ const CommandPrompt: React.FC = () => {
     defaultState
   );
   const commandLineParser = new CommandLineParser();
-  const consoleFrameClient = new ConsoleFrameClient();
+
+  useAutoResize();
 
   const onBlur = () => {
     dispatch(consoleActions.hideCommand());
@@ -106,12 +107,6 @@ const CommandPrompt: React.FC = () => {
     Promise.resolve(action).then((a) => {
       if (a) {
         completionDispatch(a);
-
-        const {
-          scrollWidth: width,
-          scrollHeight: height,
-        } = document.getElementById("vimvixen-console")!;
-        consoleFrameClient.resize(width, height);
       }
     });
   };
@@ -127,12 +122,6 @@ const CommandPrompt: React.FC = () => {
       Promise.resolve(completionAction).then((a) => {
         if (a) {
           completionDispatch(a);
-
-          const {
-            scrollWidth: width,
-            scrollHeight: height,
-          } = document.getElementById("vimvixen-console")!;
-          consoleFrameClient.resize(width, height);
         }
       });
     });
diff --git a/src/console/components/FindPrompt.tsx b/src/console/components/FindPrompt.tsx
index c79e4d3..10fa6c3 100644
--- a/src/console/components/FindPrompt.tsx
+++ b/src/console/components/FindPrompt.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import * as consoleActions from "../../console/actions/console";
-import ConsoleFrameClient from "../clients/ConsoleFrameClient";
 import AppContext from "./AppContext";
 import Input from "./console/Input";
 import styled from "styled-components";
+import useAutoResize from "../hooks/useAutoResize";
 
 const ConsoleWrapper = styled.div`
   border-top: 1px solid gray;
@@ -13,11 +13,12 @@ const FindPrompt: React.FC = () => {
   const { dispatch } = React.useContext(AppContext);
   const [inputValue, setInputValue] = React.useState("");
 
-  const consoleFrameClient = new ConsoleFrameClient();
   const onBlur = () => {
     dispatch(consoleActions.hideCommand());
   };
 
+  useAutoResize();
+
   const doEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
     e.stopPropagation();
     e.preventDefault();
@@ -41,14 +42,6 @@ const FindPrompt: React.FC = () => {
     setInputValue(e.target.value);
   };
 
-  React.useEffect(() => {
-    const {
-      scrollWidth: width,
-      scrollHeight: height,
-    } = document.getElementById("vimvixen-console")!;
-    consoleFrameClient.resize(width, height);
-  }, []);
-
   return (
     <ConsoleWrapper>
       <Input
diff --git a/src/console/hooks/useAutoResize.ts b/src/console/hooks/useAutoResize.ts
new file mode 100644
index 0000000..4253606
--- /dev/null
+++ b/src/console/hooks/useAutoResize.ts
@@ -0,0 +1,28 @@
+import React from "react";
+import ConsoleFrameClient from "../clients/ConsoleFrameClient";
+
+const useAutoResize = () => {
+  const [prevWidth, setPrevWidth] = React.useState(-1);
+  const [prevHeight, setPrevHeight] = React.useState(-1);
+
+  const consoleFrameClient = React.useMemo(() => {
+    return new ConsoleFrameClient();
+  }, []);
+
+  React.useLayoutEffect(() => {
+    const {
+      scrollWidth: width,
+      scrollHeight: height,
+    } = document.getElementById("vimvixen-console")!;
+    consoleFrameClient.resize(width, height);
+
+    if (width === prevWidth && height === prevHeight) {
+      return;
+    }
+
+    setPrevWidth(width);
+    setPrevHeight(height);
+  });
+};
+
+export default useAutoResize;