From 185c485ec7fe192667946ece8411da0d33ecaf83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Sun, 23 Nov 2025 22:11:43 +0100
Subject: [PATCH] refactor(frontend): extract MatchCard component from
 MatchesPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create components/matches/MatchCard.jsx (119 lines)
- Create components/matches/index.js barrel export
- Reduce MatchesPage.jsx from 349 → 240 lines (-31%)
---
 frontend/src/components/matches/MatchCard.jsx | 118 ++++++++++++++++++
 frontend/src/components/matches/index.js      |   1 +
 frontend/src/pages/MatchesPage.jsx            | 115 +----------------
 3 files changed, 122 insertions(+), 112 deletions(-)
 create mode 100644 frontend/src/components/matches/MatchCard.jsx
 create mode 100644 frontend/src/components/matches/index.js

diff --git a/frontend/src/components/matches/MatchCard.jsx b/frontend/src/components/matches/MatchCard.jsx
new file mode 100644
index 0000000..5c4223f
--- /dev/null
+++ b/frontend/src/components/matches/MatchCard.jsx
@@ -0,0 +1,118 @@
+import { Link } from 'react-router-dom';
+import { MessageCircle, Check, X, Loader2, Calendar, MapPin } from 'lucide-react';
+
+/**
+ * Match card for matches list page
+ * Shows match details with accept/reject/chat actions
+ */
+const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
+  const isIncoming = !match.isInitiator && match.status === 'pending';
+  const isOutgoing = match.isInitiator && match.status === 'pending';
+  const isAccepted = match.status === 'accepted';
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <div className="flex items-center gap-3 mb-2">
+            <Link to={`/${match.partner.username}`} className="flex-shrink-0">
+              <img
+                src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
+                alt={match.partner.username}
+                className="w-12 h-12 rounded-full hover:ring-2 hover:ring-primary-500 transition-all"
+              />
+            </Link>
+            <div>
+              <Link to={`/${match.partner.username}`}>
+                <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
+                  {match.partner.firstName && match.partner.lastName
+                    ? `${match.partner.firstName} ${match.partner.lastName}`
+                    : match.partner.username}
+                </h3>
+              </Link>
+              <p className="text-sm text-gray-600">@{match.partner.username}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
+            <div className="flex items-center gap-1">
+              <Calendar className="w-4 h-4" />
+              <span>{match.event.name}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <MapPin className="w-4 h-4" />
+              <span>{match.event.location}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {isIncoming && (
+              <span className="text-xs px-2 py-1 bg-amber-100 text-amber-700 rounded-full font-medium">
+                Incoming Request
+              </span>
+            )}
+            {isOutgoing && (
+              <span className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full font-medium">
+                Sent Request
+              </span>
+            )}
+            {isAccepted && (
+              <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full font-medium">
+                Active Match
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 ml-4">
+          {isIncoming && (
+            <>
+              <button
+                onClick={() => onAccept(match.slug)}
+                disabled={processing}
+                className="p-2 bg-green-600 text-white rounded-full hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                title="Accept"
+              >
+                {processing ? (
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                ) : (
+                  <Check className="w-5 h-5" />
+                )}
+              </button>
+              <button
+                onClick={() => onReject(match.slug)}
+                disabled={processing}
+                className="p-2 bg-red-600 text-white rounded-full hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                title="Reject"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </>
+          )}
+
+          {isOutgoing && (
+            <button
+              onClick={() => onReject(match.slug)}
+              disabled={processing}
+              className="px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Cancel Request
+            </button>
+          )}
+
+          {isAccepted && (
+            <button
+              onClick={() => onOpenChat(match)}
+              className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
+            >
+              <MessageCircle className="w-4 h-4" />
+              Open Chat
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MatchCard;
diff --git a/frontend/src/components/matches/index.js b/frontend/src/components/matches/index.js
new file mode 100644
index 0000000..ab331b7
--- /dev/null
+++ b/frontend/src/components/matches/index.js
@@ -0,0 +1 @@
+export { default as MatchCard } from './MatchCard';
diff --git a/frontend/src/pages/MatchesPage.jsx b/frontend/src/pages/MatchesPage.jsx
index 189a200..8b4d0e3 100644
--- a/frontend/src/pages/MatchesPage.jsx
+++ b/frontend/src/pages/MatchesPage.jsx
@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { useAuth } from '../contexts/AuthContext';
 import { matchesAPI } from '../services/api';
-import { MessageCircle, Check, X, Loader2, Users, Calendar, MapPin } from 'lucide-react';
+import { Loader2, Users } from 'lucide-react';
 import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
+import { MatchCard } from '../components/matches';
 
 const MatchesPage = () => {
   const { user } = useAuth();
@@ -236,114 +237,4 @@ const MatchesPage = () => {
   );
 };
 
-const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
-  const isIncoming = !match.isInitiator && match.status === 'pending';
-  const isOutgoing = match.isInitiator && match.status === 'pending';
-  const isAccepted = match.status === 'accepted';
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
-      <div className="flex items-start justify-between">
-        <div className="flex-1">
-          <div className="flex items-center gap-3 mb-2">
-            <Link to={`/${match.partner.username}`} className="flex-shrink-0">
-              <img
-                src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
-                alt={match.partner.username}
-                className="w-12 h-12 rounded-full hover:ring-2 hover:ring-primary-500 transition-all"
-              />
-            </Link>
-            <div>
-              <Link to={`/${match.partner.username}`}>
-                <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
-                  {match.partner.firstName && match.partner.lastName
-                    ? `${match.partner.firstName} ${match.partner.lastName}`
-                    : match.partner.username}
-                </h3>
-              </Link>
-              <p className="text-sm text-gray-600">@{match.partner.username}</p>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
-            <div className="flex items-center gap-1">
-              <Calendar className="w-4 h-4" />
-              <span>{match.event.name}</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <MapPin className="w-4 h-4" />
-              <span>{match.event.location}</span>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2">
-            {isIncoming && (
-              <span className="text-xs px-2 py-1 bg-amber-100 text-amber-700 rounded-full font-medium">
-                Incoming Request
-              </span>
-            )}
-            {isOutgoing && (
-              <span className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full font-medium">
-                Sent Request
-              </span>
-            )}
-            {isAccepted && (
-              <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full font-medium">
-                Active Match
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 ml-4">
-          {isIncoming && (
-            <>
-              <button
-                onClick={() => onAccept(match.slug)}
-                disabled={processing}
-                className="p-2 bg-green-600 text-white rounded-full hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                title="Accept"
-              >
-                {processing ? (
-                  <Loader2 className="w-5 h-5 animate-spin" />
-                ) : (
-                  <Check className="w-5 h-5" />
-                )}
-              </button>
-              <button
-                onClick={() => onReject(match.slug)}
-                disabled={processing}
-                className="p-2 bg-red-600 text-white rounded-full hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                title="Reject"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </>
-          )}
-
-          {isOutgoing && (
-            <button
-              onClick={() => onReject(match.slug)}
-              disabled={processing}
-              className="px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            >
-              Cancel Request
-            </button>
-          )}
-
-          {isAccepted && (
-            <button
-              onClick={() => onOpenChat(match)}
-              className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
-            >
-              <MessageCircle className="w-4 h-4" />
-              Open Chat
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export default MatchesPage;