Feature share chat room

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>
   );

client/src/components/InfoBar.js

@@ -1,17 +1,22 @@
 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(`${window.location.origin}/#/?room=${room}`)}
+          text={`Hay! ${name} invites you to join ${room} Chat Room on Chatcus`}
+        />
       </div>
       <div>
         <a href="/">

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);
           }}

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>
+  );
+};