Add URL Detection

frontend-next/src/components/app/datatypes.js

@@ -26,6 +26,27 @@ let dateOptions = {
   minute: "2-digit",
 };
 
+/**
+ * Rich Message Formatting
+ * @param {String} message - Message to Format
+ * @returns {String} - Formatted Message (IN HTML)
+ */
+function RMF(message) {
+  var URLREGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
+  var URLmatch = message.match(URLREGEX);
+  if (URLmatch) {
+    for (var i = 0; i < URLmatch.length; i++) {
+      var link = (<span>
+        {message.split(URLmatch[i])[0]}
+        <Link href={"https://"+URLmatch[i]} target="_blank" className="hover:underline">{URLmatch[i]}</Link>
+        {message.split(URLmatch[i])[1]}
+      </span>)
+      message = link
+    }
+  }
+  return message
+}
+
 /**
  * Generates Color based on string hash
  * @param {String} user_str - Username / String for hashing
@@ -48,6 +69,7 @@ const generateColor = (user_str) => {
  * @returns {Object} - Chat Message Component
  */
 export function Chat({ chatObj }) {
+  var message = RMF(chatObj.body)
   return (
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
       <div>
@@ -58,7 +80,7 @@ export function Chat({ chatObj }) {
             {chatObj.user}
           </Link>
         </span>
-        : {chatObj.body}
+        : {message}
       </div>
       <div className="text-right text-[#d1d1d1]">
         {new Date(chatObj.timestamp).toLocaleString(dateOptions)}

frontend-next/src/components/app/sidebar/home.js

@@ -83,7 +83,6 @@ function classNames(...classes) {
  * @returns {Object} - App Page Sidebar Component
  */
 export function Sidebar({user,location,loadingLoc}) {
-  const [tab, setTab] = useState("nearby");
   const [nearbyArr, setNearbyArr] = useState([])
   const [nearbyArrReady, setNearbyArrReady] = useState(false)
 
@@ -116,6 +115,8 @@ export function Sidebar({user,location,loadingLoc}) {
             );
             nearbyArr.push(newRoom);
           }
+          } else {
+            nearbyArr.push(<div className="pt-5">No Nearby Rooms<br />Create One?</div>)
           }
           setNearbyArr(nearbyArr)
           setNearbyArrReady(true)
@@ -154,13 +155,6 @@ export function Sidebar({user,location,loadingLoc}) {
             <Tab.Panel>
               <div className="overflow-y-auto h-[90%]">
                 <div>
-                  {!nearbyArr && !loadingLoc && (
-                    <div>
-                      No Nearby Rooms
-                      <br />
-                      Create One?
-                    </div>
-                  )}
                   {loadingLoc && <div>Loading...</div>}
                   {nearbyArrReady && nearbyArr}
                 </div>