getting some socket stuff set up on client and server

packages/desktop/src/controller/index.tsx

@@ -1,5 +1,7 @@
 import { $authTokens, $searchQuery } from "./recoil";
 import axios, { AxiosResponse } from "axios";
+import { queryClient, socket } from "../nirvanaApp";
+import { useEffect, useState } from "react";
 import { useMutation, useQuery } from "react-query";
 
 import GetContactsResponse from "../../../core/responses/getContacts.response";
@@ -7,10 +9,10 @@ import GetConversationDetailsResponse from "@nirvana/core/responses/getConversat
 import { ObjectId } from "mongodb";
 import { RelationshipState } from "@nirvana/core/models/relationship.model";
 import SearchResponse from "@nirvana/core/responses/search.response";
+import SocketChannels from "@nirvana/core/sockets/channels";
 import UpdateRelationshipStateRequest from "../../../core/requests/updateRelationshipState.request";
 import { User } from "@nirvana/core/models";
 import { nirvanaApi } from "./nirvanaApi";
-import { queryClient } from "../nirvanaApp";
 import { useRecoilValue } from "recoil";
 
 // =========== API
@@ -133,13 +135,63 @@ export function useConversationDetails(otherUserGoogleId: string) {
 export function useGetAllContactBasicDetails() {
   const authTokens = useRecoilValue($authTokens);
 
-  return useQuery(
+  // relationshipId's of the conversations where there is someone speaking
+  const [speakingRooms, setSpeakingRooms] = useState<string[]>([]);
+
+  useEffect(() => {
+    socket.on(
+      SocketChannels.SEND_STARTED_SPEAKING,
+      (relationshipId: string) => {
+        setSpeakingRooms((prevSpeakingRooms) => [
+          ...prevSpeakingRooms,
+          relationshipId,
+        ]);
+      }
+    );
+
+    socket.on(
+      SocketChannels.SEND_STOPPED_SPEAKING,
+      (relationshipId: string) => {
+        setSpeakingRooms((prevSpeakingRooms) =>
+          prevSpeakingRooms.filter(
+            (relationshipRoomId) => relationshipRoomId !== relationshipId
+          )
+        );
+      }
+    );
+
+    return () => {
+      socket.removeAllListeners(SocketChannels.SEND_STARTED_SPEAKING);
+      socket.removeAllListeners(SocketChannels.SEND_STOPPED_SPEAKING);
+    };
+  }, []);
+
+  const reactQueryRes = useQuery(
     Querytypes.GET_CONTACTS_RELATIONSHIPS,
     () => getContactsBasicDetails(authTokens.idToken),
     {
       refetchOnWindowFocus: false,
     }
   );
+
+  // go through all conversations and mutate adding in data
+  // on whether or not someone is speaking or not
+  if (reactQueryRes.data) {
+    reactQueryRes.data.contactsDetails.map((contactDet) => {
+      // todo: join the right rooms based on the relevant contacts/conversations returned here
+      socket.emit(
+        SocketChannels.JOIN_ROOM,
+        contactDet.relationship._id.toString()
+      );
+
+      // if this contact/conversation is in the list of speaking ones, then change isSpeaking
+      if (speakingRooms.includes(contactDet.relationship._id.toString())) {
+        contactDet.isSpeaking = true;
+      }
+    });
+  }
+
+  return reactQueryRes;
 }
 
 // =========== MUTATIONS

packages/desktop/src/index.ts

@@ -34,7 +34,7 @@ const createWindow = (): void => {
   browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   // Open the DevTools.
-  browserWindow.webContents.openDevTools({ mode: "detach" });
+  browserWindow.webContents.openDevTools({ mode: "right" });
 };
 
 // This method will be called when Electron has finished

packages/desktop/src/nirvanaApp.tsx

@@ -5,6 +5,7 @@ import Login from "./pages/Login";
 import ProtectedRoute from "./components/ProtectedRoute";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { RecoilRoot } from "recoil";
+import io from "socket.io-client";
 import testConnection from "@nirvana/core";
 
 testConnection();
@@ -12,6 +13,8 @@ testConnection();
 // Create a client
 export const queryClient = new QueryClient();
 
+export const socket = io("http://localhost:5000");
+
 function NirvanaApp() {
   return (
     <>

packages/desktop/src/pages/Home/conversations/index.tsx

@@ -2,6 +2,7 @@ import { Add, LinkRounded } from "@mui/icons-material";
 
 import { $selectedConversation } from "../../../controller/recoil";
 import { Avatar } from "antd";
+import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
 import { FaVolumeUp } from "react-icons/fa";
 import SkeletonLoader from "../../../components/loading/skeleton";
 import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
@@ -55,36 +56,46 @@ export default function Conversations() {
         </span>
       </div>
 
-      {isLoading ? <SkeletonLoader /> : null}
-      <div className="flex flex-col m-5 p-4">
-        <span className="flex flex-row justify-start items-center mb-2">
-          <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
-            Inbox
+      {isLoading ? (
+        <SkeletonLoader />
+      ) : (
+        <div className="flex flex-col m-5 p-4">
+          <span className="flex flex-row justify-start items-center mb-2">
+            <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
+              Inbox
+            </span>
           </span>
-        </span>
 
-        {contactDetailsListResponse?.contactsDetails.map((contactDetail) => {
-          return (
-            <div
-              onClick={() => selectContact(contactDetail.otherUser.googleId)}
-              className="flex flex-row items-center hover:bg-slate-600 group border-t border-t-slate-500
+          {contactDetailsListResponse?.contactsDetails.map(
+            (contactDetail: ContactDetails) => {
+              return (
+                <div
+                  key={contactDetail.relationship._id.toString()}
+                  onClick={() =>
+                    selectContact(contactDetail.otherUser.googleId)
+                  }
+                  className="flex flex-row items-center hover:bg-slate-600 group border-t border-t-slate-500
             py-4 px-2 cursor-pointer"
-            >
-              <UserAvatarWithStatus user={contactDetail.otherUser} />
+                >
+                  <UserAvatarWithStatus user={contactDetail.otherUser} />
 
-              <span className="text-white font-semibold ml-2">
-                {contactDetail.otherUser.name}
-              </span>
+                  <span className="text-white font-semibold ml-2">
+                    {contactDetail.otherUser.name}
+                  </span>
 
-              <span className="ml-2">
-                <UserStatusText status={contactDetail.otherUser.status} />
-              </span>
+                  <span className="ml-2">
+                    <UserStatusText status={contactDetail.otherUser.status} />
+                  </span>
 
-              <span className="ml-auto">speaking...</span>
-            </div>
-          );
-        })}
-      </div>
+                  {contactDetail.isSpeaking ? (
+                    <span className="ml-auto">speaking...</span>
+                  ) : null}
+                </div>
+              );
+            }
+          )}
+        </div>
+      )}
     </>
   );
 }

packages/desktop/src/pages/Home/selectedConversation/index.tsx

@@ -11,10 +11,12 @@ import { Dimensions } from "../../../electron/constants";
 import { FaWindowClose } from "react-icons/fa";
 import { GlobalHotKeys } from "react-hotkeys";
 import { RelationshipState } from "@nirvana/core/models/relationship.model";
+import SocketChannels from "@nirvana/core/sockets/channels";
 import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request";
 import UserStatusText from "../../../components/User/userStatusText";
 import moment from "moment";
 import { queryClient } from "../../../nirvanaApp";
+import { socket } from "../../../nirvanaApp";
 import { useEffect } from "react";
 import { useRecoilState } from "recoil";
 
@@ -126,6 +128,13 @@ export default function SelectedConversation() {
     }
   };
 
+  // emit to room/conversation that someone started speaking
+  const socketStartedSpeaking = () => {
+    // send the room name and the update type
+
+    socket.emit(SocketChannels.SEND_STARTED_SPEAKING);
+  };
+
   // hot keys for closing this window
   const handleClose = () => {
     setSelectedConvo(null);

packages/desktop/src/pages/Login/index.tsx

@@ -45,6 +45,8 @@ export default function Login({ onReady }: { onReady: Function }) {
     if (authFailureCount >= 2) {
       logOut();
     } else {
+      // todo: comment all of this else when trying to test with two users/instances
+
       // see if we have tokens in localstorage in which case we can continue on
       window.electronAPI.store
         .get(STORE_ITEMS.AUTH_TOKENS)