Merge branch 'master' of gitlab.com:MrFry/qmining-page

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "babel-eslint": "^10.1.0",
         "eslint-plugin-react": "^7.21.5",
+        "linkify-html": "^3.0.4",
         "next": "^10.0.3",
         "react": "^16.13.0",
         "react-dom": "^16.13.0",
@@ -2357,6 +2358,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/linkify-html": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkify-html/-/linkify-html-3.0.4.tgz",
+      "integrity": "sha512-pQrMEkEaKfbVj/eCUyi+5lgmRwaCt1MOuzHexyCOZp40iLGEH6j/6kMqg2WLCGKYET70SvFGOoSe5aAnDsoJoQ==",
+      "peerDependencies": {
+        "linkifyjs": "^3.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.4.tgz",
+      "integrity": "sha512-JWw1HHMx54g8mEsG7JwI8I/xh7qeJbF6L9u1dQOYW91RdRqDYpnTn1UaNXYkmLD967Vk0xGuyHzuRnkSApby3w==",
+      "peer": true
+    },
     "node_modules/loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@@ -6021,6 +6036,18 @@
         "type-check": "~0.4.0"
       }
     },
+    "linkify-html": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkify-html/-/linkify-html-3.0.4.tgz",
+      "integrity": "sha512-pQrMEkEaKfbVj/eCUyi+5lgmRwaCt1MOuzHexyCOZp40iLGEH6j/6kMqg2WLCGKYET70SvFGOoSe5aAnDsoJoQ==",
+      "requires": {}
+    },
+    "linkifyjs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.4.tgz",
+      "integrity": "sha512-JWw1HHMx54g8mEsG7JwI8I/xh7qeJbF6L9u1dQOYW91RdRqDYpnTn1UaNXYkmLD967Vk0xGuyHzuRnkSApby3w==",
+      "peer": true
+    },
     "loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "babel-eslint": "^10.1.0",
     "eslint-plugin-react": "^7.21.5",
+    "linkify-html": "^3.0.4",
     "next": "^10.0.3",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

src/pages/chat.js

@@ -2,6 +2,8 @@ import React from 'react'
 import Head from 'next/head'
 import io from 'socket.io-client'
 
+import linkifyHtml from 'linkify-html'
+
 import constants from '../constants.json'
 import LoadingIndicator from '../components/LoadingIndicator'
 import styles from './chat.module.css'
@@ -231,10 +233,7 @@ export default class Chat extends React.Component {
                 ...msgGroup,
                 lastLoaded: !hasMore,
                 msgs: msgGroup.msgs.map((msg) => {
-                  return {
+                  return msg
-                    ...msg,
-                    unread: 0,
-                  }
                 }),
               }
             } else {
@@ -537,7 +536,17 @@ export default class Chat extends React.Component {
     const { msg, type } = message
 
     if (type === 'text') {
-      return <div className={`${styles.messageEntry}`}>{msg}</div>
+      return (
+        <div
+          className={`${styles.messageEntry}`}
+          dangerouslySetInnerHTML={{
+            __html: linkifyHtml(msg, {
+              defaultProtocol: 'https',
+              target: '_blank',
+            }),
+          }}
+        />
+      )
     } else if (type === 'img') {
       return (
         <a key={key} href={msg} rel="noreferrer" target="_blank">