Message Requests: Add new "Report spam and block" button

ts/util/hooks.ts

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { ActionCreatorsMapObject, bindActionCreators } from 'redux';
 import { useDispatch } from 'react-redux';
+import { first, last, noop } from 'lodash';
 
 export function usePrevious<T>(initialValue: T, currentValue: T): T {
   const previousValueRef = React.useRef<T>(initialValue);
@@ -132,3 +133,57 @@ export function useIntersectionObserver(): [
 
   return [setRef, intersectionObserverEntry];
 }
+
+function getTop(element: Readonly<Element>): number {
+  return element.getBoundingClientRect().top;
+}
+
+function isWrapped(element: Readonly<null | HTMLElement>): boolean {
+  if (!element) {
+    return false;
+  }
+
+  const { children } = element;
+  const firstChild = first(children);
+  const lastChild = last(children);
+
+  return Boolean(
+    firstChild &&
+      lastChild &&
+      firstChild !== lastChild &&
+      getTop(firstChild) !== getTop(lastChild)
+  );
+}
+
+/**
+ * A hook that returns a ref (to put on your element) and a boolean. The boolean will be
+ * `true` if the element's children have different `top`s, and `false` otherwise.
+ */
+export function useHasWrapped<T extends HTMLElement>(): [
+  React.Ref<T>,
+  boolean
+] {
+  const [element, setElement] = React.useState<null | T>(null);
+
+  const [hasWrapped, setHasWrapped] = React.useState(isWrapped(element));
+
+  React.useEffect(() => {
+    if (!element) {
+      return noop;
+    }
+
+    // We can remove this `any` when we upgrade to TypeScript 4.2+, which adds
+    //   `ResizeObserver` type definitions.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const observer = new (window as any).ResizeObserver(() => {
+      setHasWrapped(isWrapped(element));
+    });
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return [setElement, hasWrapped];
+}