feat: add image to innkeeper

Author: kevinchua6

frontend/src/app/components/modal/PreviewModalButton.tsx

@@ -16,7 +16,7 @@ const PreviewModalButton = ({
     modalId: string,
     e: React.MouseEvent<HTMLButtonElement>,
   ) => {
-    e.preventDefault;
+    e.preventDefault();
     if (document) {
       (document.getElementById(modalId) as HTMLFormElement).showModal();
     }

frontend/src/app/components/status-bar/UserStatusBadge.tsx

@@ -1,4 +1,5 @@
 import { UserState } from "@/libs/innkeeper-api-types";
+import { BiUserCircle } from "@react-icons/all-files/bi/BiUserCircle";
 
 interface UserStateBadgeProps {
   userState: UserState; // Update the prop name to 'userState'
@@ -17,13 +18,13 @@ const fromEpochToRelative = (epochTime: number) => {
 };
 
 const UserStateBadge: React.FC<UserStateBadgeProps> = ({ userState }) => {
-  const { displayName, status, lastSeen } = userState;
+  const { displayName, status, lastSeen, imageUrl } = userState;
   const lastSeenRelative = fromEpochToRelative(lastSeen);
   return status !== "EXITED" ? (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center">
       <div className="tooltip" data-tip={`Last Seen: ${lastSeenRelative}`}>
         <div
-          className={`aspect-square w-4 rounded-full ${
+          className={`mr-3 aspect-square w-4 rounded-full ${
             status === "INACTIVE"
               ? "bg-gray-200"
               : status === "ACTIVE"
@@ -32,6 +33,15 @@ const UserStateBadge: React.FC<UserStateBadgeProps> = ({ userState }) => {
           }`}
         />
       </div>
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          className="mr-2 aspect-square w-8 rounded-full"
+        ></img>
+      ) : (
+        <BiUserCircle className="mr-2 aspect-square w-8 text-4xl" />
+      )}
+
       <h3>{displayName}</h3>
     </div>
   ) : (

frontend/src/libs/innkeeper-api-types.ts

@@ -14,11 +14,13 @@ export type WaitingUsersCount = {
 export type UserId = {
   userId: string;
   displayName: string;
+  imageUrl: string;
 };
 
 export type UserState = {
   userId: string;
   displayName: string;
+  imageUrl: string;
   status: "INACTIVE" | "ACTIVE" | "EXITED";
   lastSeen: number; // Unix time (seconds since epoch)
 };

innkeeper/src/controllers/lobby.ts

@@ -36,14 +36,14 @@ export const handleMatchingRequest = (
   params: MatchingParameters,
 ): void => {
   socket.data.lastMessage = getUnixTimestamp();
-  const { userId, displayName } = socket.data;
+  const { userId, displayName, imageUrl } = socket.data;
 
   SHOULD_LOG && console.log(`User ${displayName} (${userId}) requested a match with parameters ${JSON.stringify(params)}.`);
 
   // Remove user from queue in case this is a re-request.
-  inn.removeUserFromQueue({ userId, displayName });
+  inn.removeUserFromQueue({ userId, displayName, imageUrl });
 
-  const maybeMatch = inn.queueUserOrReturnMatchResult({ userId, displayName }, params);
+  const maybeMatch = inn.queueUserOrReturnMatchResult({ userId, displayName, imageUrl }, params);
   if (!maybeMatch) {
     notifyOnQueue(io, inn, socket);
     SHOULD_LOG && console.log(`User ${userId} added to queue.`);
@@ -75,14 +75,14 @@ export const handleMatchingRequest = (
       console.error(`Could not find socket for userId ${otherUserId} (returned from queue).`);
       inn.removeUserFromQueue(otherUserId);
 
-      inn.addUserToQueue({ userId, displayName }, params);
+      inn.addUserToQueue({ userId, displayName, imageUrl }, params);
       notifyOnQueue(io, inn, socket);
     });
 };
 
 export const handleDisconnect = (io: InnkeeperIoServer, inn: InnState, socket: InnkeeperIoSocket): void => {
-  const { userId, displayName } = socket.data;
-  inn.removeUserFromQueue({ userId, displayName });
+  const { userId, displayName, imageUrl } = socket.data;
+  inn.removeUserFromQueue({ userId, displayName, imageUrl });
 
   SHOULD_LOG && console.log(`User ${userId} disconnected from queue.`);
 };

innkeeper/src/types/innkeeper-api-types.ts

@@ -14,6 +14,7 @@ export type WaitingUsersCount = {
 export type UserId = {
   userId: string;
   displayName: string;
+  imageUrl: string;
 };
 
 export type UserState = {
@@ -100,6 +101,7 @@ export interface InterServerEvents {}
 export interface InnkeeperSocketData {
   userId: string; // Primary key for Users table.
   displayName: string; // Display name for user.
+  imageUrl: string;
   roomId: string | null; // convenience field populated manually by server.
   lastMessage: number; // Last active timestamp in Unix time (seconds since epoch). 0 indicates user has never joined.
 }

innkeeper/src/utils/index.ts

@@ -5,6 +5,7 @@ import { InnState } from '../models';
 import { InnkeeperIoServer, InnkeeperIoSocket, NotificationMessage } from '../types';
 
 export const SHOULD_LOG = process.env.LOGGING === 'VERBOSE';
+export const URL = process.env.URL ?? 'https://peerprep.sivarn.com';
 
 export const getUnixTimestamp = (): number => {
   return Math.floor(Date.now() / 1000);
@@ -31,8 +32,13 @@ export const requireUser = async (
     return next(new Error('Authorization failed.'));
   }
 
+  const data = await fetch(`${URL}/api/v1/users/profile`, {
+    headers: { 'firebase-token': socket.handshake.auth.token },
+  }).then(res => res.json());
+
   socket.data.userId = userId;
-  socket.data.displayName = (await firebaseAuth.getUser(userId)).displayName ?? 'Anonymous';
+  socket.data.displayName = data.payload.name ?? 'Anonymous';
+  socket.data.imageUrl = data.payload.imageUrl;
   socket.data.roomId = inn.getRoomId(userId);
   socket.data.lastMessage = getUnixTimestamp();