Add captions under matched users

Author: chiaryan

apps/frontend/src/app/matching/MatchingModal.tsx

@@ -77,6 +77,8 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                         matchingState.ok();
                         setClosedType("joined");
                     }}
+                    name1={matchingState.info.myName}
+                    name2={matchingState.info.partnerName}
                 />
             case 'timeout':
                 return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}}  timedOutIn={10}/>;

apps/frontend/src/app/matching/modalContent/MatchFoundContent.tsx

@@ -10,11 +10,13 @@ import { useTimer } from "react-timer-hook"
 interface Props {
     join(): void,
     cancel(): void,
+    name1: string, // user's username
+    name2: string, // matched user's username
 }
 
 const TIMEOUT = 10;
 
-const MatchFoundContent: React.FC<Props> = ({join, cancel}) => {
+const MatchFoundContent: React.FC<Props> = ({join, cancel, name1: me, name2: you}) => {
     const { totalSeconds } = useTimer({
         expiryTimestamp: new Date(Date.now() + 10 * 1000),
         onExpire: join
@@ -23,7 +25,10 @@ const MatchFoundContent: React.FC<Props> = ({join, cancel}) => {
     return (
         <div className="matching-found-content">
             <div className="matched-profiles">
-                <Avatar size={64} icon={<UserOutlined />} />
+                <div className="avatar-caption-container">
+                    <Avatar size={64} icon={<UserOutlined />} />
+                    <div className="user-caption">{me}</div>
+                </div>
                 <svg xmlns="http://www.w3.org/2000/svg" 
                     height="24px" 
                     viewBox="0 -960 960 960" 
@@ -33,7 +38,10 @@ const MatchFoundContent: React.FC<Props> = ({join, cancel}) => {
                 >
                     <path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/>
                 </svg>
-                <Avatar size={64} icon={<UserOutlined />} />
+                <div className="avatar-caption-container">
+                    <Avatar size={64} icon={<UserOutlined />} />
+                    <div className="user-caption">{you}</div>
+                </div>
             </div>
             <div className="match-status-label">Match Found!</div>
             <div className="match-status-message">

apps/frontend/src/app/matching/modalContent/styles.scss

@@ -228,3 +228,12 @@ button:disabled, .joined-match-deactivated-button {
   height: 60px; 
   fill: #463F3A;
 }
+
+.user-caption {
+  display: flex;
+  justify-content: center;
+}
+
+.avatar-caption-container {
+  width: 64px;
+}

apps/frontend/src/app/services/use-matching.ts

@@ -133,12 +133,14 @@ function parseInfoFromResponse(responseJson: MatchFoundResponse): MatchInfo {
             matchId: responseJson.matchId?.toString() ?? "unknown",
             partnerId: responseJson.partnerId?.toString() ?? "unknown",
             partnerName: responseJson.partnerName ?? "unknown",
+            myName: "unknown",
         };
     } else {
         return {
             matchId: responseJson.matchId?.toString() ?? "unknown",
             partnerId: "unknown",
             partnerName: responseJson.matchedUser ?? "unknown",
+            myName: responseJson.user ?? "unknown",
         };
     }
 }

apps/frontend/src/contexts/websocketcontext.tsx

@@ -15,6 +15,7 @@ export type SocketState = {
 export type MatchInfo = {
     matchId: string;
     partnerId: string;
+    myName: string;
     partnerName: string;
 }
 export type MatchState = SocketState | {