From f9b2ab3b940f209c3d1f6c5e10d964e2c2cf1b75 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 19 Sep 2023 16:27:22 +0800
Subject: [PATCH] Refactor truncated class

Also removed the hack fix, not sure why/how it's even fixed.
Don't even know how to explain the logic.
Will revisit and investigate more if the bug happens.

This `useTruncated` can now be reusable.
---
 src/components/status.jsx | 37 +++----------------------------------
 src/utils/useTruncated.js | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 34 deletions(-)
 create mode 100644 src/utils/useTruncated.js

diff --git a/src/components/status.jsx b/src/components/status.jsx
index dc24b308..c72b4d1f 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -48,6 +48,7 @@ import showToast from '../utils/show-toast';
 import states, { getStatus, saveStatus, statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import store from '../utils/store';
+import useTruncated from '../utils/useTruncated';
 import visibilityIconsMap from '../utils/visibility-icons-map';
 
 import Avatar from './avatar';
@@ -318,40 +319,8 @@ function Status({
   const [showEdited, setShowEdited] = useState(false);
   const [showReactions, setShowReactions] = useState(false);
 
-  const spoilerContentRef = useRef(null);
-  useResizeObserver({
-    ref: spoilerContentRef,
-    onResize: () => {
-      if (spoilerContentRef.current) {
-        const { scrollHeight, clientHeight } = spoilerContentRef.current;
-        if (scrollHeight < window.innerHeight * 0.4) {
-          spoilerContentRef.current.classList.remove('truncated');
-        } else {
-          spoilerContentRef.current.classList.toggle(
-            'truncated',
-            scrollHeight > clientHeight,
-          );
-        }
-      }
-    },
-  });
-  const contentRef = useRef(null);
-  useResizeObserver({
-    ref: contentRef,
-    onResize: () => {
-      if (contentRef.current) {
-        const { scrollHeight, clientHeight } = contentRef.current;
-        if (scrollHeight < window.innerHeight * 0.4) {
-          contentRef.current.classList.remove('truncated');
-        } else {
-          contentRef.current.classList.toggle(
-            'truncated',
-            scrollHeight > clientHeight,
-          );
-        }
-      }
-    },
-  });
+  const spoilerContentRef = useTruncated();
+  const contentRef = useTruncated();
   const readMoreText = 'Read more →';
 
   const statusRef = useRef(null);
diff --git a/src/utils/useTruncated.js b/src/utils/useTruncated.js
new file mode 100644
index 00000000..7d71842d
--- /dev/null
+++ b/src/utils/useTruncated.js
@@ -0,0 +1,17 @@
+import { useRef } from 'preact/hooks';
+import useResizeObserver from 'use-resize-observer';
+
+export default function useTruncated({ className = 'truncated' } = {}) {
+  const ref = useRef();
+  useResizeObserver({
+    ref,
+    box: 'border-box',
+    onResize: ({ height }) => {
+      if (ref.current) {
+        const { scrollHeight } = ref.current;
+        ref.current.classList.toggle(className, scrollHeight > height);
+      }
+    },
+  });
+  return ref;
+}