Merge pull request #67 from SU-CS-321-Fall-2023/fix-socket-io-links

fix socket-io connection for deployment

Author: AnasGamal

next/.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_NODE_URL=http://localhost:3000/v1
+NEXT_PUBLIC_NODE_URL=http://localhost:3000/v1
+NEXT_PUBLIC_SOCKET_URL=http://localhost:3000

next/app/(routes)/chats/page.js

@@ -47,25 +47,25 @@ export default function Page() {
 
     const friends = (friends) => {
         if (friends.includes(user.id)) {
-            return (<d class="mb-2  text-2xl rounded-full font-bold tracking-tight text-white-900 dark:text-white">friends</d>)
+            return (<d className="mb-2  text-2xl rounded-full font-bold tracking-tight text-white-900 dark:text-white">friends</d>)
         } else {
-            return (<d class="mb-2 text-2xl rounded-full font-bold tracking-tight text-white-900 dark:text-white">Not friends</d>)
+            return (<d className="mb-2 text-2xl rounded-full font-bold tracking-tight text-white-900 dark:text-white">Not friends</d>)
         }
     }
 
     const ContactCard = (chat) => {
         if (chat.receiverId.id == user.id) {
             return (
 
-                <div class="flex flex-row max-w-sm p-4 bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-                    <p class="mb-2 text-2xl font-bold tracking-tight text-white-900 dark:text-white">{chat.senderId.name} -</p>
+                <div className="flex flex-row max-w-sm p-4 bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+                    <p className="mb-2 text-2xl font-bold tracking-tight text-white-900 dark:text-white">{chat.senderId.name} -</p>
                     {friends(chat.senderId.friends)}
                 </div>
             )
         } else {
             return (
-                <div class="flex flex-row max-w-sm p-4 bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-                    <p class="mb-2 text-2xl font-bold tracking-tight text-white-900 dark:text-white">{chat.receiverId.name} -</p>
+                <div className="flex flex-row max-w-sm p-4 bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+                    <p className="mb-2 text-2xl font-bold tracking-tight text-white-900 dark:text-white">{chat.receiverId.name} -</p>
                     {friends(chat.receiverId.friends)}
                 </div>
             )

next/app/(routes)/discover/page.js

@@ -127,12 +127,12 @@ export default function Page() {
           {isLoading && <Spinner />}
           {!isLoading && <Button onClick={handleMatch} color='blue' >Match</Button>}
         </div>
-        <div class="grid grid-cols-4 gap-4">
+        <div className="grid grid-cols-4 gap-4">
           {results?.map((result) => (
-            <a key={result.id} class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
-              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{result.name}</h5>
+            <a key={result.id} className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{result.name}</h5>
               {result.classes.map((cls) => (
-                <p key={cls.id} class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">{cls.department_code} {cls.class_code}</p>
+                <p key={cls.id} className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-400">{cls.department_code} {cls.class_code}</p>
               ))}
               {result.friends?.includes(user.id) ? (
                 <>

next/app/(routes)/studygroups/[id]/page.js

@@ -60,7 +60,7 @@ export default function Page(props) {
                     <div className="flex items-center self-start rounded-xl rounded-tl bg-gray-300 py-2 px-3">
                         <p>{message.content}</p>
                     </div>
-                    <span class="text-sm font-normal text-gray-500 dark:text-gray-500">{message.user.name}</span>
+                    <span className="text-sm font-normal text-gray-500 dark:text-gray-500">{message.user.name}</span>
                 </div>
             )
         }

next/app/socket/socket.js

@@ -1,4 +1,4 @@
 import { io } from "socket.io-client";
 
-const URL = "http://localhost:3000"
-export const socket = io(URL);
+const socketBaseUrl = process.env.NEXT_PUBLIC_SOCKET_URL
+export const socket = io(socketBaseUrl);

node/src/index.js

@@ -32,9 +32,9 @@ mongoose.connect(config.mongoose.url, config.mongoose.options).then(() => {
 
 const io = require("socket.io")(http, {
   cors: {
-    origin: "http://localhost:3001",
+    origin: "*",
   },
-})
+});
 
 io.on('connection', (socket) => {
   console.log('connected')