comments and expandable changes

comments are collapsed if larger than 120 height
expandable checks the useRect ref height before inserting itself

src/ui/component/comment/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import relativeDate from 'tiny-relative-date';
 import Button from 'component/button';
+import Expandable from 'component/expandable';
 
 type Props = {
   author: string,
@@ -25,8 +26,11 @@ function Comment(props: Props) {
           {relativeDate(timePosted)}
         </time>
       </div>
-
+      <div>
-      <p className={'comment__message'}>{message}</p>
+        <Expandable>
+          <p className={'comment__message'}>{message}</p>
+        </Expandable>
+      </div>
     </li>
   );
 }

src/ui/component/expandable/view.jsx

@@ -1,7 +1,8 @@
 // @flow
-import React, { PureComponent } from 'react';
+import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
+import { useRect } from '@reach/rect';
 
 // Note:
 // When we use this in other parts of the app, we will probably need to
@@ -11,48 +12,38 @@ type Props = {
   children: React$Node | Array<React$Node>,
 };
 
-type State = {
+export default function Expandable(props: Props) {
-  expanded: boolean,
+  const [expanded, setExpanded] = useState(false);
-};
+  const { children } = props;
+  const ref = useRef();
+  const rect = useRect(ref);
 
-export default class Expandable extends PureComponent<Props, State> {
+  function handleClick() {
-  constructor() {
+    setExpanded(!expanded);
-    super();
-
-    this.state = {
-      expanded: false,
-    };
-
-    (this: any).handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  return (
-    this.setState({
+    <div ref={ref}>
-      expanded: !this.state.expanded,
+      {rect && rect.height > 120 ? (
-    });
+        <div ref={ref} className="expandable">
-  }
+          <div
-
+            className={classnames({
-  render() {
+              'expandable--open': expanded,
-    const { children } = this.props;
+              'expandable--closed': !expanded,
-    const { expanded } = this.state;
+            })}
-
+          >
-    return (
+            {children}
-      <div className="expandable">
+          </div>
-        <div
+          <Button
-          className={classnames({
+            button="link"
-            'expandable--open': expanded,
+            className="expandable__button"
-            'expandable--closed': !expanded,
+            label={expanded ? __('Less') : __('More')}
-          })}
+            onClick={handleClick}
-        >
+          />
-          {children}
         </div>
-        <Button
+      ) : (
-          button="link"
+        <div>{children}</div>
-          className="expandable__button"
+      )}
-          label={expanded ? __('Less') : __('More')}
+    </div>
-          onClick={this.handleClick}
+  );
-        />
-      </div>
-    );
-  }
 }

src/ui/scss/component/_expandable.scss

@@ -1,5 +1,5 @@
 .expandable {
-  border-bottom: 1px solid $lbry-gray-1;
+  //border-bottom: 1px solid $lbry-gray-1;
   margin-bottom: var(--spacing-medium);
   padding-bottom: var(--spacing-medium);