sending and getting messages

RocketChat · Feb 10, 2022 · c9b9cc0 · c9b9cc0
1 parent 6f84fd6
commit c9b9cc0
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 33 deletions.
diff --git a/app/components/rocketchat.js b/app/components/rocketchat.js
@@ -1,5 +1,8 @@
 import dynamic from "next/dynamic";
+import { useState } from "react";
+import { getMessages, fetcher } from "../lib/rocketchatapi";
 import styles from "../styles/RocketChat.module.css";
+import useSWR from 'swr'
 
 const TextInput = dynamic(
   () => import("@rocket.chat/fuselage").then((comp) => comp.TextInput),
@@ -58,38 +61,59 @@ const MessageToolboxItem = dynamic(
   { ssr: false }
 );
 
-const RocketChat = ({ closeChat }) => {
+const RocketChat = ({ closeChat, sendMessage }) => {
+  const [message, setMessage] = useState("");
+  const { data, mutate } = useSWR(getMessages("WS4FgsrngW4WNipgQ"), fetcher)
+
   return (
     <div className={styles.sidechat}>
       <div className={styles.cross} onClick={closeChat}>
         <Icon name="cross" size={"x30"} />
       </div>
       <div className={styles.chatbox}>
-        <Box w={"400px"} style={{ marginTop: "30px" }}>
-          <Message className="customclass" clickable>
-            <MessageContainer>
-              <MessageHeader>
-                <MessageName>Haylie George</MessageName>
-                <MessageUsername>@haylie.george</MessageUsername>
-                <MessageTimestamp>12:00 PM</MessageTimestamp>
-              </MessageHeader>
-              <MessageBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco
-              </MessageBody>
-            </MessageContainer>
-            <MessageToolboxWrapper>
-              <MessageToolbox>
-                <MessageToolboxItem icon="quote" />
-                <MessageToolboxItem icon="clock" />
-                <MessageToolboxItem icon="thread" />
-              </MessageToolbox>
-            </MessageToolboxWrapper>
-          </Message>
+        <Box w={"500px"} style={{ marginTop: "30px" }}>
+          {data && data.messages
+              .sort(function (a, b) {
+                return a.ts < b.ts ? -1 : a.ts > b.ts ? 1 : 0;
+              })
+              .map((m) => (
+                <Message className="customclass" clickable key={m._id}>
+                  <MessageContainer>
+                    <MessageHeader>
+                      <MessageName>{m.u.name}</MessageName>
+                      <MessageUsername>@{m.u.username}</MessageUsername>
+                      <MessageTimestamp>
+                        {new Date(m.ts).toDateString()}
+                      </MessageTimestamp>
+                    </MessageHeader>
+                    <MessageBody>{m.msg}</MessageBody>
+                  </MessageContainer>
+                  <MessageToolboxWrapper>
+                    <MessageToolbox>
+                      <MessageToolboxItem icon="quote" />
+                      <MessageToolboxItem icon="clock" />
+                      <MessageToolboxItem icon="thread" />
+                    </MessageToolbox>
+                  </MessageToolboxWrapper>
+                </Message>
+              ))}
         </Box>
       </div>
       <TextInput
         placeholder="Message"
-        addon={<Icon name="send" size="x20" />}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        addon={
+          <Icon
+            onClick={async () => {
+              const msg = await sendMessage("WS4FgsrngW4WNipgQ", message);
+              mutate({ ...data, messages: [...data.messages, msg.message] });
+              setMessage('');
+            }}
+            name="send"
+            size="x20"
+          />
+        }
         w={"400px"}
       />
     </div>

diff --git a/app/lib/rocketchatapi.js b/app/lib/rocketchatapi.js
@@ -0,0 +1,26 @@
+// using env variables for now, should be replaced with cookies!
+export const fetcher = (url) =>
+  fetch(url, {
+    headers: {
+      "Content-Type": "application/json",
+      "X-Auth-Token": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_TOKEN,
+      "X-User-Id": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_ID,
+    },
+    method: "GET",
+  }).then((res) => res.json());
+
+export const getMessages = (rid) => `http://localhost:3000/api/v1/channels.messages?roomId=${rid}`;
+
+export const sendMessage = async (rid, message) => {
+  const msg = await fetch("http://localhost:3000/api/v1/chat.sendMessage", {
+    body: `{"message": { "rid": "${rid}", "msg": "${message}" }}`,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Auth-Token": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_TOKEN,
+      "X-User-Id": process.env.NEXT_PUBLIC_ROCKET_CHAT_AUTH_USER_ID,
+    },
+    method: "POST",
+  });
+
+  return await msg.json();
+};
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -27,7 +27,8 @@
     "react-icons": "^4.3.1",
     "react-slick": "^0.28.1",
     "react-virtuoso": "^1.2.4",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "swr": "^1.2.1"
   },
   "devDependencies": {
     "eslint": "8.6.0",

diff --git a/app/pages/virtualconf/mainstage/[id].js b/app/pages/virtualconf/mainstage/[id].js
@@ -3,6 +3,10 @@ import { useState } from "react";
 import { Container, Col, Button } from "react-bootstrap";
 import Videostreamer from "../../../components/clientsideonly/videostreamer";
 import RocketChat from '../../../components/rocketchat';
+import { getMessages, sendMessage } from '../../../lib/rocketchatapi';
+
+// THE ROOM IN WHICH THE SUMMIT WILL TAKE PLACE! <HARD CODED FOR NOW>
+const rid = 'WS4FgsrngW4WNipgQ';
 
 export default function ConfMainStage() {
   const [openChat, setOpenChat] = useState(false);
@@ -29,7 +33,15 @@ export default function ConfMainStage() {
           </Videostreamer> 
 
       </Container>
-        {openChat ? <RocketChat closeChat={handleOpenChat} /> : <Button onClick={handleOpenChat}>Open Chat</Button>}
+        {openChat ? (
+          <RocketChat
+            closeChat={handleOpenChat}
+            sendMessage={sendMessage}
+            getMessages={getMessages}
+          />
+        ) : (
+          <Button onClick={handleOpenChat}>Open Chat</Button>
+        )}
       </div>
     </>
   );

diff --git a/app/styles/RocketChat.module.css b/app/styles/RocketChat.module.css
@@ -1,5 +1,5 @@
 .sidechat {
-    height: 100%;
+  height: 100%;
   position: fixed;
   z-index: 1;
   top: 0;
@@ -10,13 +10,15 @@
 }
 
 .chatbox {
-    height: 85vh;
-    overflow: auto;
+  height: 85vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .cross {
-    display: flex;
-    justify-content: right;
-    padding: 0 40px;
-    cursor: pointer;
-}
+  display: flex;
+  justify-content: right;
+  padding: 0 40px;
+  cursor: pointer;
+}