From 100910a07286e4782b4aa911f5cef391bc0fa5c5 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Mon, 5 Apr 2021 09:23:29 +0100
Subject: [PATCH] =?UTF-8?q?[15=20min=20fix]=20=E2=9C=82=EF=B8=8F=E2=9C=82?=
 =?UTF-8?q?=EF=B8=8F=E2=9C=82=EF=B8=8F=20Remove=20preact-textarea-autosize?=
 =?UTF-8?q?=20library=20=E2=9C=82=EF=B8=8F=E2=9C=82=EF=B8=8F=E2=9C=82?=
 =?UTF-8?q?=EF=B8=8F=20(#13234)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove lib from title component, use hook instead

* remove lib from chat compose, and remove package
---
 .../article-form/components/Title.jsx         | 23 +++++++++++++------
 app/javascript/chat/compose.jsx               | 22 +++++++++++++++---
 package.json                                  |  1 -
 yarn.lock                                     |  5 ----
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/app/javascript/article-form/components/Title.jsx b/app/javascript/article-form/components/Title.jsx
index 26f70e7e6..eacb03249 100644
--- a/app/javascript/article-form/components/Title.jsx
+++ b/app/javascript/article-form/components/Title.jsx
@@ -1,23 +1,32 @@
 import { h } from 'preact';
+import { useRef, useLayoutEffect } from 'preact/hooks';
 import PropTypes from 'prop-types';
-// We use this magic Textarea component for title field because it's automatically
-// resizable. Even though it looks like a classic input, if you enter long title
-// it would wrap the text to the next line automatically resizing itself. It helps keep
-// the entire layout the way it is without having unnecessary scrolling and white spaces.
-// Keep in mind this is what happens only here - in preact component.
+// We use this hook for the title field to automatically grow the height of the textarea.
+// It helps keep the entire layout the way it is without having unnecessary scrolling and white spaces.
+// Keep in mind this is what happens only here - in the Preact component.
 // I'm mentioning this because the entire "Write a post" view is a preact component
 // BUT it is also a classic .html.erb view which is being loaded BEFORE this component
 // to give a feeling of blazing fast page load. And we do NOT use this magic autoresizing
 // functionality on .html.erb view because there's no point of it.
-import Textarea from 'preact-textarea-autosize';
+import { useTextAreaAutoResize } from '@utilities/textAreaUtils';
 
 export const Title = ({ onChange, defaultValue, switchHelpContext }) => {
+  const textAreaRef = useRef(null);
+  const { setTextArea } = useTextAreaAutoResize();
+
+  useLayoutEffect(() => {
+    if (textAreaRef.current) {
+      setTextArea(textAreaRef.current);
+    }
+  }, [setTextArea]);
+
   return (
     <div
       data-testid="article-form__title"
       className="crayons-article-form__title"
     >
-      <Textarea
+      <textarea
+        ref={textAreaRef}
         className="crayons-textfield crayons-textfield--ghost fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight"
         type="text"
         id="article-form-title"
diff --git a/app/javascript/chat/compose.jsx b/app/javascript/chat/compose.jsx
index b8c3b6a85..0f85e623b 100644
--- a/app/javascript/chat/compose.jsx
+++ b/app/javascript/chat/compose.jsx
@@ -1,7 +1,13 @@
 import { h } from 'preact';
-import { useState, useEffect, useMemo } from 'preact/hooks';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useLayoutEffect,
+} from 'preact/hooks';
 import PropTypes from 'prop-types';
-import Textarea from 'preact-textarea-autosize';
+import { useTextAreaAutoResize } from '@utilities/textAreaUtils';
 
 export const Compose = ({
   handleKeyDown,
@@ -18,6 +24,15 @@ export const Compose = ({
   activeChannelName,
 }) => {
   const [value, setValue] = useState('');
+  const textAreaRef = useRef(null);
+
+  const { setTextArea } = useTextAreaAutoResize();
+
+  useLayoutEffect(() => {
+    if (textAreaRef.current) {
+      setTextArea(textAreaRef.current);
+    }
+  }, [setTextArea]);
 
   useEffect(() => {
     if (!markdownEdited && startEditing) {
@@ -56,7 +71,8 @@ export const Compose = ({
           startEditing ? 'composer-container__edit' : 'messagecomposer'
         }
       >
-        <Textarea
+        <textarea
+          ref={textAreaRef}
           className={
             startEditing
               ? 'crayons-textfield composer-textarea__edit'
diff --git a/package.json b/package.json
index 76938951f..85541ac31 100644
--- a/package.json
+++ b/package.json
@@ -172,7 +172,6 @@
     "postcss-smart-import": "^0.7.6",
     "postscribe": "^2.0.8",
     "preact": "^10.5.13",
-    "preact-textarea-autosize": "^4.0.7",
     "prop-types": "^15.7.2",
     "pusher-js": "^7.0.3",
     "rails-erb-loader": "^5.5.2",
diff --git a/yarn.lock b/yarn.lock
index aa89c35d6..42a0d8676 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15372,11 +15372,6 @@ postscribe@^2.0.8:
   dependencies:
     prescribe ">=1.1.2"
 
-preact-textarea-autosize@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/preact-textarea-autosize/-/preact-textarea-autosize-4.0.7.tgz#aa654ce1a0ed57027dca21e4710a78cb6f007457"
-  integrity sha1-qmVM4aDtVwJ9yiHkcQp4y28AdFc=
-
 preact@^10.5.13:
   version "10.5.13"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"