using cookies from component level

RocketChat · Mar 31, 2022 · 2d81f9d · 2d81f9d
1 parent 8a4c3c3
commit 2d81f9d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 23 deletions.
diff --git a/app/components/inappchat/inappchat.js b/app/components/inappchat/inappchat.js
@@ -1,5 +1,6 @@
 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 } from "./helpers";
@@ -22,8 +23,9 @@ import InappchatTextInput from "./inappchattextinput";
 
 const rcClient = new Rocketchat({ logger: console, protocol: "ddp" });
 
-const InAppChat = ({ host, 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);
@@ -97,15 +99,15 @@ const InAppChat = ({ host, closeChat, cookies, rid }) => {
           ) : (
             <p>
               Please login into{" "}
-              <a href={host} 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>
   );
 };

diff --git a/app/package.json b/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",

diff --git a/app/pages/virtualconf/greenroom/index.js b/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 host="http://localhost:3000" 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,
-	};
-  };
diff --git a/app/pages/virtualconf/mainstage/[id].js b/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 host="http://localhost:3000" 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,
-  };
-};