Merge pull request #45 from CS3219-AY2425S1/solomon/minor-styling-changes-matching-buttons-and-avatar-username

Minor styling edits to matching buttons and avatar username

Author: bensohh

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

@@ -47,9 +47,13 @@ const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close })
                             canceledIn={timeoutAfter}
                         />;
                     case "joined":
-                        return <JoinedMatchContent cancel={() => {
+                        return <JoinedMatchContent 
+                        cancel={() => {
                             setClosedType("cancelled");
-                        }}/>;
+                        }}
+                            name1={matchingState.info?.myName || ""}
+                            name2={matchingState.info?.partnerName || ""}
+                        />;
                 }
             case 'matching':
                 return <MatchingInProgressContent 

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

@@ -13,17 +13,22 @@ import { formatTime } from '@/utils/DateTime';
 
 interface Props {
     cancel(): void
+    name1: string, // user's username
+    name2: string, // matched user's username
 }
 
-const JoinedMatchContent: React.FC<Props> = ({cancel}) => {
+const JoinedMatchContent: React.FC<Props> = ({cancel, name1: me, name2: you}) => {
     const matchAlreadyJoined = () => {
         throw new Error('Match already joined.');
     }
 
     return (
         <div className="joined-match-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 JoinedMatchContent: React.FC<Props> = ({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

@@ -119,7 +119,6 @@
 
 .join-match-button {
   background-color: #28A745;
-  cursor: not-allowed // TODO: remove when collaboration service is implemented
 }
 
 .join-match-button:hover {
@@ -228,12 +227,3 @@ 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/matching/styles.scss

@@ -28,3 +28,7 @@ button:hover {
 button:active {
   transform: scale(0.95);
 }
+
+button:disabled:active {
+  transform: scale(1);
+}

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

@@ -46,6 +46,7 @@ export default function useMatching(): MatchState {
     const [isSocket, setIsSocket] = useState<boolean>(false);
     const [ste, setSte] = useState<MatchState>({
         state: "closed",
+        info: null,
         start,
     });
 
@@ -67,7 +68,14 @@ export default function useMatching(): MatchState {
                 setSte({
                     state: "found",
                     info: info,
-                    ok: cancel
+                    ok: () => {
+                        setIsSocket(false);
+                        setSte({
+                            state: "closed",
+                            info: info,
+                            start,
+                        });
+                    }
                 })
                 return;
             }
@@ -97,6 +105,7 @@ export default function useMatching(): MatchState {
         setIsSocket(false)
         setSte({
             state: "closed",
+            info: null,
             start,
         })
     }
@@ -110,7 +119,7 @@ export default function useMatching(): MatchState {
     switch (socketState) {
         case ReadyState.CLOSED:
         case ReadyState.UNINSTANTIATED:
-            matchState = {state: "closed", start}
+            matchState = {state: "closed", info: null, start}
             break;
         case ReadyState.OPEN:
             matchState = {state: "matching", cancel, timeout}

apps/frontend/src/contexts/websocketcontext.tsx

@@ -6,6 +6,7 @@ export type SocketState = {
     state: "cancelling" | "starting"
 } | {
     state: "closed";
+    info: MatchInfo | null;
     start(req: MatchRequestParams): void;
 } | {
     state: "matching";