App, Chat, Thread using hooks

2 files changed, 54 insertions, 56 deletions

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 57415d29..e2b8d2f1 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { UserType } from './Types';
 import moment from 'moment';
@@ -11,74 +11,68 @@ import { getChat, pm } from '../api';
 
 import './Chat.css';
 
-export default class Chat extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            chats: []
+export default function Chat(props) {
+    const [chats, setChats] = useState([]);
+    useEffect(() => {
+        console.log(props.connection);
+        if (props.connection) {
+            props.connection.addEventListener('msg', onMessage);
+        }
+        loadChat(props.match.params.user);
+        return () => {
+            if (props.connection) {
+                props.connection.removeEventListener('msg', onMessage);
+            }
         };
-    }
-    componentDidMount() {
-        this.loadChat(this.props.match.params.user);
-    }
+    }, [props.connection]);
 
-    loadChat = (uname) => {
-        const { hash } = this.props.visitor;
-        this.setState({
-            chats: []
-        });
+    let loadChat = (uname) => {
+        const { hash } = props.visitor;
+        setChats([]);
         if (hash && uname) {
             getChat(uname)
                 .then(response => {
-                    this.setState({
-                        chats: response.data
-                    });
+                    setChats(response.data);
                 });
         }
     }
 
-    onMessage = (msg) => {
-        if (msg.user.uname === this.props.match.params.user) {
-            this.setState({
-                chats: [msg, ...this.state.chats]
-            });
+    let onMessage = (json) => {
+        const msg = JSON.parse(json.data);
+        if (msg.user.uname === props.match.params.user) {
+            setChats([msg, ...chats]);
         }
     }
 
-    onSend = (template) => {
+    let onSend = (template) => {
         pm(template.to.uname, template.body)
             .then(res => {
-                this.loadChat(this.props.match.params.user);
+                loadChat(props.match.params.user);
             }).catch(console.log);
     }
-
-    render() {
-        const { chats } = this.state;
-        const uname = this.props.match.params.user;
-        return (
-            <div className="msg-cont">
-                <UserInfo user={uname} />
-                {uname ? (
-                    <div className="chatroom">
-                        <ul className="Chat_messages">
-                            {
-                                chats.map((chat) =>
-                                    <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} />
-                                )
-                            }
-                        </ul>
-                        <MessageInput data={{ mid: 0, timestamp: '0', to: { uname: uname } }} onSend={this.onSend}>
-                            Reply...
+    const uname = props.match.params.user;
+    return (
+        <div className="msg-cont">
+            <UserInfo user={uname} />
+            {uname ? (
+                <div className="chatroom">
+                    <ul className="Chat_messages">
+                        {
+                            chats.map((chat) =>
+                                <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...props} />
+                            )
+                        }
+                    </ul>
+                    <MessageInput data={{ mid: 0, timestamp: '0', to: { uname: uname } }} onSend={onSend}>
+                        Reply...
                             </MessageInput>
-                    </div>
-                ) : (
-                        <div className="chatroom no-selection"><p>No chat selected</p></div>
-                    )
-                }
-            </div>
-        );
-    }
+                </div>
+            ) : (
+                    <div className="chatroom no-selection"><p>No chat selected</p></div>
+                )
+            }
+        </div>
+    );
 }
 
 Chat.propTypes = {
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index d61fd87f..c1dc915b 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -22,13 +22,17 @@ export default function Thread(props) {
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
   useEffect(() => {
-    props.connection.addEventListener('msg', onReply);
+    if (props.connection) {
+      props.connection.addEventListener('msg', onReply);
+    }
     setActive(0);
     loadReplies();
     return () => {
-      props.connection.removeEventListener('msg', onReply);
+      if (props.connection) {
+        props.connection.removeEventListener('msg', onReply);
+      }
     }
-  }, []);
+  }, [props.connection]);
   let loadReplies = () => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
@@ -54,7 +58,7 @@ export default function Thread(props) {
       });
   }
   let onReply = (json) => {
-    const msg = JSON.parse(json);
+    const msg = JSON.parse(json.data);
     if (msg.mid == message.mid) {
       setReplies([...this.state.replies, msg]);
     }