Fixed unescapeHTML crash on passing it null. Refactored code. Added hover title on chat last_message

app/soapbox/features/chats/components/chat.js

@@ -6,6 +6,7 @@ import DisplayName from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import emojify from 'soapbox/features/emoji/emoji';
+import { unescapeHTML } from 'soapbox/utils/html';
 
 export default class Chat extends ImmutablePureComponent {
 
@@ -18,12 +19,6 @@ export default class Chat extends ImmutablePureComponent {
     this.props.onClick(this.props.chat);
   }
 
-  stripBreaks = (content) => {
-    content = content.replace(/[<]br[^>]*[>]/gi, '');
-    content = content.replace(/[<]p[^>]*[>]/gi, '');
-    return content;
-  }
-
   render() {
     const { chat } = this.props;
     if (!chat) return null;
@@ -33,7 +28,7 @@ export default class Chat extends ImmutablePureComponent {
     const parsedContent = content ? emojify(content) : '';
 
     return (
-      <div className='account'>
+      <div className='account' title={unescapeHTML(parsedContent)}>
         <button className='floating-link' onClick={this.handleClick} />
         <div className='account__wrapper'>
           <div key={account.get('id')} className='account__display-name'>
@@ -43,7 +38,7 @@ export default class Chat extends ImmutablePureComponent {
             <DisplayName account={account} />
             <span
               className='chat__last-message'
-              dangerouslySetInnerHTML={{ __html: this.stripBreaks(parsedContent) }}
+              dangerouslySetInnerHTML={{ __html: unescapeHTML(parsedContent) }}
             />
             {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
           </div>

app/soapbox/utils/html.js

@@ -1,6 +1,9 @@
 // NB: This function can still return unsafe HTML
 export const unescapeHTML = (html) => {
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '');
-  return wrapper.textContent;
+  if (html !== null) {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '');
+    return wrapper.textContent;
+  }
+  return null;
 };