From 2960899c96b657bc9683528811972fb2cdeaebe0 Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 10:20:09 +0530
Subject: [PATCH 1/7] Add Share Component

---
 client/src/components/Chat.js    |   6 +-
 client/src/components/InfoBar.js |  11 ++-
 client/src/components/Share.js   | 118 +++++++++++++++++++++++++++++++
 3 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Share.js

diff --git a/client/src/components/Chat.js b/client/src/components/Chat.js
index 27a0326..80bb5cd 100644
--- a/client/src/components/Chat.js
+++ b/client/src/components/Chat.js
@@ -41,7 +41,7 @@ const Chat = ({ location }) => {
     });
   }, []);
 
-  const sendMesssage = (event) => {
+  const sendMessage = (event) => {
     event.preventDefault();
     if (message) {
       socket.emit("sendMessage", message, () => setMessage(""));
@@ -52,12 +52,12 @@ const Chat = ({ location }) => {
 
   return (
     <div className="flex flex-col items-center pt-16 bg-green-50 h-screen">
-      <InfoBar room={room} />
+      <InfoBar room={room} name={name} />
       <Messages messages={messages} name={name} />
       <Input
         message={message}
         setMessage={setMessage}
-        sendMessage={sendMesssage}
+        sendMessage={sendMessage}
       />
     </div>
   );
diff --git a/client/src/components/InfoBar.js b/client/src/components/InfoBar.js
index 844a9f8..e2363c5 100644
--- a/client/src/components/InfoBar.js
+++ b/client/src/components/InfoBar.js
@@ -1,17 +1,24 @@
 import React from "react";
 import closeIcon from "../../icons/closeIcon.png";
 import onlineIcon from "../../icons/onlineIcon.png";
+import { ShareButton } from "./Share";
 
-const InfoBar = ({ room }) => {
+const InfoBar = ({ room, name }) => {
   return (
     <div className="flex justify-between items-center w-5/6 md:w-4/6 lg:w-3/6 bg-white rounded-t-xl p-4 shadow-t-3xl pt-6 border-b-2 border-blue-50">
-      <div className="flex">
+      <div className="flex items-center">
         <img
           src={onlineIcon}
           alt="online"
           className="h-3 ml-5 place-self-center"
         />
         <h3 className="ml-1 place-self-center">{room}</h3>
+        <ShareButton
+          link={encodeURIComponent(
+            `https://chatcus.vercel.app/#/?room=${room}`
+          )}
+          text={`Hay! ${name} invites you to join ${room} Chat Room on Chatcus`}
+        />
       </div>
       <div>
         <a href="/">
diff --git a/client/src/components/Share.js b/client/src/components/Share.js
new file mode 100644
index 0000000..138cb2a
--- /dev/null
+++ b/client/src/components/Share.js
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from "react";
+
+const SHARE_OPTIONS = [
+  {
+    type: "LinkedIn",
+    url: (url, text) =>
+      `https://www.linkedin.com/shareArticle?mini=true&title=${text}&source=Chatcus&url=${url}`,
+  },
+  {
+    type: "Facebook",
+    url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+  },
+  {
+    type: "Twitter",
+    url: (url, text) =>
+      `https://twitter.com/intent/tweet?text=${text}&url=${url}`,
+  },
+  {
+    type: "Reddit",
+    url: (url, text) =>
+      `https://www.reddit.com/submit?title=${text}&url=${url}`,
+  },
+];
+
+export const ShareButton = ({ link, text }) => {
+  const [dropdownState, setDropdownState] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
+  const shareViaNavigator = () => {
+    if (navigator.share) {
+      navigator
+        .share({
+          title: text,
+          url: link,
+        })
+        .then(() => {
+          console.log("Thanks for sharing!");
+        })
+        .catch(console.error);
+    }
+  };
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(decodeURIComponent(link)).then(() => {
+      setLinkCopied(true);
+    });
+  };
+  useEffect(() => {
+    if (!dropdownState) setLinkCopied(false);
+  }, [dropdownState]);
+  return (
+    <div className="relative inline-block text-left">
+      <div className="flex">
+        <button
+          type="button"
+          id="menu-button"
+          aria-expanded="true"
+          aria-haspopup="true"
+          onClick={() => setDropdownState(!dropdownState)}
+        >
+          <svg
+            className="ml-2 h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 30 30"
+            width="30px"
+            height="30px"
+          >
+            <path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z" />
+          </svg>
+        </button>
+      </div>
+
+      <div
+        className={`origin-top-right absolute mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 ${
+          dropdownState ? "" : "opacity-0"
+        }`}
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="menu-button"
+        tabIndex={-1}
+      >
+        <div className="py-1" role="none">
+          <button
+            type="button"
+            className="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 text-gray-900"
+            role="menuitem"
+            tabIndex={dropdownState ? 0 : -1}
+            id="menu-item-0"
+            onClick={copyToClipboard}
+          >
+            {linkCopied ? "Copied to Clipboard" : "Copy Link"}
+          </button>
+          {SHARE_OPTIONS.map((option, i) => (
+            <a
+              key={option.type}
+              href={option.url(link, text)}
+              className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
+              role="menuitem"
+              tabIndex={dropdownState ? 0 : -1}
+              id={`menu-item-${i + 1}`}
+              target="_blank"
+            >
+              Share to {option.type}
+            </a>
+          ))}
+          <button
+            type="button"
+            className="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
+            role="menuitem"
+            tabIndex={dropdownState ? 0 : -1}
+            id="menu-item-5"
+            onClick={shareViaNavigator}
+          >
+            Share Post Via...
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

From 36429148f950a2220116ea1285f4c7696c4149fc Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 10:20:44 +0530
Subject: [PATCH 2/7] Modify Join component to parse room from query string

---
 client/src/components/Join.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Join.js b/client/src/components/Join.js
index 816760e..c417fa3 100644
--- a/client/src/components/Join.js
+++ b/client/src/components/Join.js
@@ -1,10 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import queryString from "query-string";
 import { Link } from "react-router-dom";
 
-const Join = () => {
+const Join = ({ location }) => {
   const [name, setName] = useState("");
   const [room, setRoom] = useState("");
-
+  useEffect(() => {
+    const { room } = queryString.parse(location.search);
+    console.log(queryString.parse(location.search));
+    if (room) {
+      setRoom(room);
+    }
+  }, []);
   return (
     <div className="flex flex-col items-center h-screen">
       <h1 className="sm:text-3xl md:text-5xl mt-40 mb-10 ">
@@ -23,6 +30,7 @@ const Join = () => {
           placeholder="Room"
           className="w-70 p-2 bg-green-100 outline-none"
           type="text"
+          value={room}
           onChange={(event) => {
             setRoom(event.target.value);
           }}

From 46d4c93d1105c369d1d56baec8acb5bf3ddb302b Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 11:55:52 +0530
Subject: [PATCH 3/7] Update URL from static to origin URL

---
 client/src/components/InfoBar.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/InfoBar.js b/client/src/components/InfoBar.js
index e2363c5..ccecc48 100644
--- a/client/src/components/InfoBar.js
+++ b/client/src/components/InfoBar.js
@@ -14,9 +14,7 @@ const InfoBar = ({ room, name }) => {
         />
         <h3 className="ml-1 place-self-center">{room}</h3>
         <ShareButton
-          link={encodeURIComponent(
-            `https://chatcus.vercel.app/#/?room=${room}`
-          )}
+          link={encodeURIComponent(`${window.location.origin}/#/?room=${room}`)}
           text={`Hay! ${name} invites you to join ${room} Chat Room on Chatcus`}
         />
       </div>

From 7a79cd25c3ae122a057e026b8c1ca9599f6c4c9b Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 12:27:00 +0530
Subject: [PATCH 4/7] Update Share text message in InfoBar

---
 client/src/components/InfoBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/InfoBar.js b/client/src/components/InfoBar.js
index ccecc48..5ea1909 100644
--- a/client/src/components/InfoBar.js
+++ b/client/src/components/InfoBar.js
@@ -15,7 +15,7 @@ const InfoBar = ({ room, name }) => {
         <h3 className="ml-1 place-self-center">{room}</h3>
         <ShareButton
           link={encodeURIComponent(`${window.location.origin}/#/?room=${room}`)}
-          text={`Hay! ${name} invites you to join ${room} Chat Room on Chatcus`}
+          text={`Hey! ${name} invites you to join ${room} Chat Room on Chatcus`}
         />
       </div>
       <div>

From ffff6f372062262e29ef2a3e047fc96cc6d1f4ec Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 12:57:06 +0530
Subject: [PATCH 5/7] fix:Close sharepopup when clicked outside

---
 client/src/components/Share.js | 124 ++++++++++++++++++---------------
 1 file changed, 66 insertions(+), 58 deletions(-)

diff --git a/client/src/components/Share.js b/client/src/components/Share.js
index 138cb2a..4c08abb 100644
--- a/client/src/components/Share.js
+++ b/client/src/components/Share.js
@@ -47,72 +47,80 @@ export const ShareButton = ({ link, text }) => {
     if (!dropdownState) setLinkCopied(false);
   }, [dropdownState]);
   return (
-    <div className="relative inline-block text-left">
-      <div className="flex">
-        <button
-          type="button"
-          id="menu-button"
-          aria-expanded="true"
-          aria-haspopup="true"
-          onClick={() => setDropdownState(!dropdownState)}
-        >
-          <svg
-            className="ml-2 h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 30 30"
-            width="30px"
-            height="30px"
-          >
-            <path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z" />
-          </svg>
-        </button>
-      </div>
-
-      <div
-        className={`origin-top-right absolute mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 ${
-          dropdownState ? "" : "opacity-0"
-        }`}
-        role="menu"
-        aria-orientation="vertical"
-        aria-labelledby="menu-button"
-        tabIndex={-1}
-      >
-        <div className="py-1" role="none">
+    <React.Fragment>
+      <div className="relative inline-block text-left">
+        <div className="flex">
           <button
             type="button"
-            className="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 text-gray-900"
-            role="menuitem"
-            tabIndex={dropdownState ? 0 : -1}
-            id="menu-item-0"
-            onClick={copyToClipboard}
+            id="menu-button"
+            aria-expanded="true"
+            aria-haspopup="true"
+            onClick={() => setDropdownState(!dropdownState)}
+            className="z-10"
           >
-            {linkCopied ? "Copied to Clipboard" : "Copy Link"}
+            <svg
+              className="ml-2 h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 30 30"
+              width="30px"
+              height="30px"
+            >
+              <path d="M 23 3 A 4 4 0 0 0 19 7 A 4 4 0 0 0 19.09375 7.8359375 L 10.011719 12.376953 A 4 4 0 0 0 7 11 A 4 4 0 0 0 3 15 A 4 4 0 0 0 7 19 A 4 4 0 0 0 10.013672 17.625 L 19.089844 22.164062 A 4 4 0 0 0 19 23 A 4 4 0 0 0 23 27 A 4 4 0 0 0 27 23 A 4 4 0 0 0 23 19 A 4 4 0 0 0 19.986328 20.375 L 10.910156 15.835938 A 4 4 0 0 0 11 15 A 4 4 0 0 0 10.90625 14.166016 L 19.988281 9.625 A 4 4 0 0 0 23 11 A 4 4 0 0 0 27 7 A 4 4 0 0 0 23 3 z" />
+            </svg>
           </button>
-          {SHARE_OPTIONS.map((option, i) => (
-            <a
-              key={option.type}
-              href={option.url(link, text)}
-              className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
+        </div>
+
+        <div
+          className={`origin-top-right absolute mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 ${
+            dropdownState ? "" : "opacity-0"
+          }`}
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="menu-button"
+          tabIndex={-1}
+        >
+          <div className="py-1" role="none">
+            <button
+              type="button"
+              className="text-gray-700 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 text-gray-900"
               role="menuitem"
               tabIndex={dropdownState ? 0 : -1}
-              id={`menu-item-${i + 1}`}
-              target="_blank"
+              id="menu-item-0"
+              onClick={copyToClipboard}
             >
-              Share to {option.type}
-            </a>
-          ))}
-          <button
-            type="button"
-            className="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
-            role="menuitem"
-            tabIndex={dropdownState ? 0 : -1}
-            id="menu-item-5"
-            onClick={shareViaNavigator}
-          >
-            Share Post Via...
-          </button>
+              {linkCopied ? "Copied to Clipboard" : "Copy Link"}
+            </button>
+            {SHARE_OPTIONS.map((option, i) => (
+              <a
+                key={option.type}
+                href={option.url(link, text)}
+                className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
+                role="menuitem"
+                tabIndex={dropdownState ? 0 : -1}
+                id={`menu-item-${i + 1}`}
+                target="_blank"
+              >
+                Share to {option.type}
+              </a>
+            ))}
+            <button
+              type="button"
+              className="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
+              role="menuitem"
+              tabIndex={dropdownState ? 0 : -1}
+              id="menu-item-5"
+              onClick={shareViaNavigator}
+            >
+              Share Post Via...
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+      <div
+        style={{ zIndex: dropdownState ? "1" : "-1" }}
+        onClick={() => setDropdownState(false)}
+        className="w-full h-full fixed left-0 top-0"
+      ></div>
+    </React.Fragment>
   );
 };

From 97d6211df1c2238aa8bb2279e6f72f22528b58e0 Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 13:46:21 +0530
Subject: [PATCH 6/7] fix:decode URI when sharing through navigator

---
 client/src/components/Share.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Share.js b/client/src/components/Share.js
index 4c08abb..a6496ca 100644
--- a/client/src/components/Share.js
+++ b/client/src/components/Share.js
@@ -30,7 +30,7 @@ export const ShareButton = ({ link, text }) => {
       navigator
         .share({
           title: text,
-          url: link,
+          url: decodeURIComponent(link),
         })
         .then(() => {
           console.log("Thanks for sharing!");

From 99305124a4e2837688da9c33c103aa86e456a09d Mon Sep 17 00:00:00 2001
From: Vishal Sharma <vishalagnihotri345@gmail.com>
Date: Thu, 7 Oct 2021 13:50:42 +0530
Subject: [PATCH 7/7] Code refactoring

---
 client/src/components/InfoBar.js | 2 +-
 client/src/components/Share.js   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/InfoBar.js b/client/src/components/InfoBar.js
index 5ea1909..72f7b8f 100644
--- a/client/src/components/InfoBar.js
+++ b/client/src/components/InfoBar.js
@@ -14,7 +14,7 @@ const InfoBar = ({ room, name }) => {
         />
         <h3 className="ml-1 place-self-center">{room}</h3>
         <ShareButton
-          link={encodeURIComponent(`${window.location.origin}/#/?room=${room}`)}
+          link={`${window.location.origin}/#/?room=${room}`}
           text={`Hey! ${name} invites you to join ${room} Chat Room on Chatcus`}
         />
       </div>
diff --git a/client/src/components/Share.js b/client/src/components/Share.js
index a6496ca..6b676b1 100644
--- a/client/src/components/Share.js
+++ b/client/src/components/Share.js
@@ -30,7 +30,7 @@ export const ShareButton = ({ link, text }) => {
       navigator
         .share({
           title: text,
-          url: decodeURIComponent(link),
+          url: link,
         })
         .then(() => {
           console.log("Thanks for sharing!");
@@ -39,7 +39,7 @@ export const ShareButton = ({ link, text }) => {
     }
   };
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(decodeURIComponent(link)).then(() => {
+    navigator.clipboard.writeText(link).then(() => {
       setLinkCopied(true);
     });
   };
@@ -93,7 +93,7 @@ export const ShareButton = ({ link, text }) => {
             {SHARE_OPTIONS.map((option, i) => (
               <a
                 key={option.type}
-                href={option.url(link, text)}
+                href={option.url(encodeURIComponent(link), text)}
                 className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 text-gray-900"
                 role="menuitem"
                 tabIndex={dropdownState ? 0 : -1}