[IMPROVE] Inappchat improvements and fixes (#112)

We don't have time to go ping pong anymore.   Fingers crossed.

app/components/inappchat/helpers/index.js

@@ -1,4 +1,3 @@
 export { default as messagesSortedByDate } from './sortMessagesByDate';
 export { default as emojify } from './emojify';
 export { emojis } from './emojisThatAnimate';
-export { useSsl, rcURL } from './url';

app/components/inappchat/inappchat.js

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
 import { Rocketchat } from "@rocket.chat/sdk";
+import Cookie from 'js-cookie';
 import { getMessages, sendMessage } from "./lib/api";
 import styles from "../../styles/Inappchat.module.css";
-import { emojify, messagesSortedByDate, rcURL, useSsl } from "./helpers";
+import { emojify, messagesSortedByDate } from "./helpers";
 import {
   Message,
   MessageBody,
@@ -22,8 +23,12 @@ import InappchatTextInput from "./inappchattextinput";
 
 const rcClient = new Rocketchat({ logger: console, protocol: "ddp" });
 
-const InAppChat = ({ closeChat, cookies, rid }) => {
+const InAppChat = ({ host, closeChat, rid }) => {
   const [messages, setMessages] = useState([]);
+  const cookies = { rc_token: Cookie.get('rc_token'), rc_uid: Cookie.get('rc_uid') };
+  const isAuth = cookies.rc_token && cookies.rc_uid;
+  const rcURL = new URL(host);
+  const useSsl = !/http:\/\//.test(host);
 
   useEffect(() => {
     const runRealtime = async (token, rid) => {
@@ -41,8 +46,12 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
       }
     };
     async function getData() {
-      const data = await getMessages(rid, cookies);
-      setMessages(data.messages);
+      try {
+        const data = await getMessages(host, rid, cookies);
+        setMessages(data.messages);
+      } catch (err) {
+        console.log(err.message);
+      }
     }
     getData();
     runRealtime(cookies.rc_token, rid);
@@ -52,7 +61,7 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
     if (message.trim() === "") {
       return;
     }
-    const msg = await sendMessage(rid, message, cookies);
+    const msg = await sendMessage(host, rid, message, cookies);
     setMessages([...messages, msg.message]);
   };
 
@@ -63,7 +72,7 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
       </div>
       <div className={styles.chatbox}>
         <Box>
-          {cookies.rc_token && cookies.rc_uid ? (
+          {isAuth ? (
             messagesSortedByDate(messages)?.map((m) => (
               <Message className="customclass" clickable key={m._id}>
                 <MessageContainer>
@@ -90,15 +99,15 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
           ) : (
             <p>
               Please login into{" "}
-              <a href="https://open.rocket.chat" target="_blank">
+              <a href={host} rel="noopener noreferrer" target="_blank">
                 RocketChat
               </a>{" "}
               to chat!
             </p>
           )}
         </Box>
       </div>
-      {cookies.rc_token && cookies.rc_uid && <InappchatTextInput sendMsg={sendMsg} />}
+      {isAuth && <InappchatTextInput sendMsg={sendMsg} />}
     </div>
   );
 };

app/components/inappchat/lib/api.js

@@ -1,9 +1,7 @@
-import { rcURL } from "../helpers";
-
-export const getMessages = async (rid, cookies) => {
+export const getMessages = async (host, rid, cookies) => {
   try {
     const messages = await fetch(
-      `${rcURL.origin}/api/v1/channels.messages?roomId=${rid}`,
+      `${host}/api/v1/channels.messages?roomId=${rid}`,
       {
         headers: {
           "Content-Type": "application/json",
@@ -20,9 +18,9 @@ export const getMessages = async (rid, cookies) => {
   }
 };
 
-export const sendMessage = async (rid, message, cookies) => {
+export const sendMessage = async (host, rid, message, cookies) => {
   try {
-    const msg = await fetch(`${rcURL.origin}/api/v1/chat.sendMessage`, {
+    const msg = await fetch(`${host}/api/v1/chat.sendMessage`, {
       body: `{"message": { "rid": "${rid}", "msg": "${message}" }}`,
       headers: {
         "Content-Type": "application/json",

app/package.json

@@ -19,6 +19,7 @@
     "dompurify": "^2.3.5",
     "emoji-toolkit": "^6.6.0",
     "firebase": "^9.6.3",
+    "js-cookie": "^3.0.1",
     "marked": "^4.0.12",
     "next": "12.0.7",
     "next-auth": "^4.2.1",

app/pages/virtualconf/greenroom/index.js

@@ -7,8 +7,9 @@ import InAppChat from "../../../components/inappchat/inappchat";
 import { Button } from "react-bootstrap";
 
 const greenroom_rid = process.env.NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RID;
+const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://community.liaison.rocketchat.digital";
 
-const Greenroom = ({ cookies }) => {
+const Greenroom = () => {
 	const [openChat, setOpenChat] = useState(false);
 
   	const handleOpenChat = () => {
@@ -23,7 +24,7 @@ const Greenroom = ({ cookies }) => {
 				<div className={styles.container}>
 				</div>
 				{openChat ? (
-          			<InAppChat closeChat={handleOpenChat} cookies={cookies} rid={greenroom_rid} />
+          			<InAppChat host={host} closeChat={handleOpenChat} rid={greenroom_rid} />
         			) : (
           			<Button style={{ float: 'right' }} onClick={handleOpenChat}>Open Chat</Button>
         		)}
@@ -41,11 +42,3 @@ const Greenroom = ({ cookies }) => {
 }
 
 export default Greenroom;
-
-Greenroom.getInitialProps = ({ req }) => {
-	const cookies = req.cookies;
-
-	return {
-	  cookies,
-	};
-  };

app/pages/virtualconf/mainstage/[id].js

@@ -5,8 +5,9 @@ import Videostreamer from "../../../components/clientsideonly/videostreamer";
 import InAppChat from '../../../components/inappchat/inappchat';
 
 const rid = process.env.NEXT_PUBLIC_ROCKET_CHAT_CONF_RID;
+const host = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://community.liaison.rocketchat.digital";
 
-export default function ConfMainStage({ cookies }) {
+export default function ConfMainStage() {
   const [openChat, setOpenChat] = useState(false);
 
   const handleOpenChat = () => {
@@ -32,19 +33,11 @@ export default function ConfMainStage({ cookies }) {
 
         </Container>
         {openChat ? (
-          <InAppChat closeChat={handleOpenChat} cookies={cookies} rid={rid} />
+          <InAppChat host={host} closeChat={handleOpenChat} rid={rid} />
         ) : (
           <Button onClick={handleOpenChat}>Open Chat</Button>
         )}
       </div>
     </>
   );
 }
-
-ConfMainStage.getInitialProps = ({ req }) => {
-  const cookies = req.cookies;
-
-  return {
-    cookies,
-  };
-};