refactor: switch ReadMore to JSX

src/components/ReadMore.js

@@ -1,93 +1,83 @@
-import get from 'lodash/get';
-import { Component } from 'react';
-import { a, div, hh, span } from 'react-hyperscript-helpers';
+import React from 'react';
+import { useEffect, useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 
+export const ReadMore = ({
+  inline = false,
+  content = [<span key='content'>{''}</span>],
+  moreContent = [<span key='moreContent'>{''}</span>],
+  className = '',
+  style = {},
+  readStyle = {},
+  charLimit = 100,
+  hideUnderLimit = false,
+  readMoreText = 'Read More',
+  readLessText = 'Read Less',
+}) => {
+  const [expanded, setExpanded] = useState(false);
 
-export const ReadMore = hh(class ReadMore extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: false,
-      inline: get(this.props, 'inline', false),
-      content: get(this.props, 'content', [span({}, [''])]),
-      moreContent: get(this.props, 'moreContent', [span({}, [''])]),
-      className: get(this.props, 'className', ''),
-      style: get(this.props, 'style', {}),
-      readStyle: get(this.props, 'readStyle', {}),
-      charLimit: get(this.props, 'charLimit', 100),
-      hideUnderLimit: get(this.props, 'hideUnderLimit', false),
-      readMoreText: get(this.props, 'readMoreText', 'Read More'),
-      readLessText: get(this.props, 'readLessText', 'Read Less')
-    };
-  }
-
-  componentDidMount() {
+  useEffect(() => {
     ReactTooltip.rebuild();
+  });
+
+  const getUnderLimit = () => {
+    return !content || content.length <= charLimit;
   }
 
-  getContent = () => {
-    return this.state.inline ? this.getInlineContent() : this.getFormattedContent();
-  };
+  const getInlineContent = () => {
+    const content = expanded
+      ? content
+      : content.slice(0, charLimit) + (hideUnderLimit
+        ? getUnderLimit() ? '' : ' ...'
+        : ' ...');
+    return (
+      <span className={className} style={style}>
+        {content}
+      </span>
+    );
+  }
 
-  getUnderLimit = () => {
-    return !this.state.content || this.state.content.length <= this.state.charLimit;
-  };
+  const getFormattedContent = () => {
+    return expanded ? [...content, ...moreContent] : content;
+  }
 
-  getInlineContent = () => {
-    const content = this.state.expanded
-      ? this.state.content
-      : this.state.content.slice(0, this.state.charLimit) + (this.state.hideUnderLimit
-        ? this.getUnderLimit() ? '' : ' ...'
-        : ' ...');
-    return span({
-      className: this.state.className,
-      style: this.state.style,
-    }, content);
-  };
+  const getContent = () => {
+    return inline ? getInlineContent() : getFormattedContent();
+  }
 
-  getFormattedContent = () => {
-    return this.state.expanded ? [...this.state.content, ...this.state.moreContent] : this.state.content;
-  };
+  const readMore = () => {
+    setExpanded(true);
+  }
 
-  readMore = () => {
-    this.setState(prev => {
-      prev.expanded = true;
-      return prev;
-    });
-  };
+  const readLess = () => {
+    setExpanded(false);
+  }
 
-  readLess = () => {
-    this.setState(prev => {
-      prev.expanded = false;
-      return prev;
-    });
+  const getReadLink = (fun, text, classes) => {
+    const { linkElements, linkElementsStyle } = inline
+      ? { linkElements: [text], linkElementsStyle: {} }
+      : {
+          linkElements: [
+            text,
+            <span key='chevron' className={classes} style={{ padding: '0 1rem' }} aria-hidden="true" />,
+          ],
+          linkElementsStyle: readStyle,
+        };
+    return (
+      <a onClick={() => fun()} style={linkElementsStyle}>
+        {linkElements}
+      </a>
+    );
   };
 
-  getReadLink = (fun, text, classes) => {
-    const {linkElements, linkElementsStyle} = this.state.inline ?
-      {linkElements: [text], linkElementsStyle: {}} :
-      {
-        linkElements: [
-          text,
-          span({
-            className: classes,
-            style: {padding: '0 1rem'},
-            'aria-hidden': 'true',
-          })], linkElementsStyle: this.state.readStyle,
-      };
-    return a({ onClick: () => fun(), style: linkElementsStyle}, linkElements);
-  };
+  const readLink = expanded ?
+    getReadLink(readLess, readLessText, 'glyphicon glyphicon-chevron-up') :
+    getReadLink(readMore, readMoreText, 'glyphicon glyphicon-chevron-down');
 
-  render() {
-    const readLink = this.state.expanded ?
-      this.getReadLink(this.readLess, this.state.readLessText, 'glyphicon glyphicon-chevron-up') :
-      this.getReadLink(this.readMore, this.state.readMoreText, 'glyphicon glyphicon-chevron-down');
-    return div({}, this.state.hideUnderLimit && this.getUnderLimit() ? [
-      this.getContent()
-    ]: [
-      this.getContent(),
-      readLink
-    ]);
-  }
-});
+  return (
+    <div>
+      {getContent()}
+      {hideUnderLimit && getUnderLimit() || readLink}
+    </div>
+  );
+};