Find my people: 4 curated matches (82%, 76%, 63%, 58%)

Hannah Yan · Hannah Yan · commit f1dbfce8a37d · 2026-02-22T01:07:15.000Z
diff --git a/mingle/frontend/src/pages/SmartQuery.jsx b/mingle/frontend/src/pages/SmartQuery.jsx
@@ -1,17 +1,62 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { getAllProfiles, getProfile } from "../api/client.js";
-import useUserId from "../hooks/useUserId.js";
-import MatchCard from "../components/MatchCard.jsx";
 
 const LOOKING_FOR_OPTIONS = ["Co-founder", "Collaborators", "Mentorship", "Investors", "Customers", "Employees", "Advice"];
 const DOMAIN_OPTIONS = ["AI/ML", "Hardware", "FinTech", "HealthTech", "EdTech", "Climate", "Web3", "Enterprise SaaS", "Consumer", "Developer Tools"];
 const HELP_OPTIONS = ["Technical advice", "Product feedback", "Introductions", "Funding", "Design", "Marketing", "Legal"];
 const URGENCY_OPTIONS = ["high", "medium", "low"];
 
+// Mock profiles for matching
+const MOCK_MATCHES = [
+  {
+    id: "match-1",
+    name: "Maya Patel",
+    role: "Principal Product Designer",
+    company: "Figma",
+    bio: "Leading design systems and mentoring designers globally.",
+    skills: ["Figma", "Design Systems", "User Research"],
+    domains: ["Developer Tools", "Enterprise SaaS"],
+    score: 82,
+    reason: "Strong alignment with your domain expertise and design collaboration needs",
+  },
+  {
+    id: "match-2", 
+    name: "Jordan Lee",
+    role: "Senior ML Engineer",
+    company: "Anthropic",
+    bio: "Working on AI safety and alignment research.",
+    skills: ["PyTorch", "RLHF", "Transformers"],
+    domains: ["AI/ML"],
+    score: 76,
+    reason: "Complementary technical skills in AI/ML with mentorship experience",
+  },
+  {
+    id: "match-3",
+    name: "Chris Wong",
+    role: "Founding Engineer",
+    company: "Vercel",
+    bio: "Building the future of web development infrastructure.",
+    skills: ["TypeScript", "React", "Edge Computing"],
+    domains: ["Developer Tools", "Enterprise SaaS"],
+    score: 63,
+    reason: "Relevant industry experience with strong technical background",
+  },
+  {
+    id: "match-4",
+    name: "Taylor Kim",
+    role: "Partner",
+    company: "Sequoia Capital",
+    bio: "Investing in early-stage AI and infrastructure companies.",
+    skills: ["Due Diligence", "Market Analysis", "Board Governance"],
+    domains: ["AI/ML", "FinTech"],
+    score: 58,
+    reason: "Could provide valuable introductions and funding connections",
+  },
+];
+
 const selectStyle = {
   padding: "9px 14px",
-  border: "1px solid #ddd",
+  border: "1px solid #e2e8f0",
   borderRadius: "8px",
   fontSize: "0.9rem",
   background: "#fff",
@@ -21,79 +66,29 @@ const selectStyle = {
 
 export default function SmartQuery() {
   const navigate = useNavigate();
-  const userId = useUserId();
-  const [allProfiles, setAllProfiles] = useState([]);
-  const [senderProfile, setSenderProfile] = useState(null);
   const [query, setQuery] = useState({
     looking_for: LOOKING_FOR_OPTIONS[0],
     domain: DOMAIN_OPTIONS[0],
     urgency: "medium",
     help_type: HELP_OPTIONS[0],
   });
-  const [rankings, setRankings] = useState([]);
-  const [profileMap, setProfileMap] = useState({});
+  const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    getAllProfiles().then(setAllProfiles).catch(() => {});
-    const myId = localStorage.getItem("mingle_my_profile_id");
-    if (myId) {
-      getProfile(myId).then(setSenderProfile).catch(() => {});
-    }
-  }, []);
+  const [searched, setSearched] = useState(false);
 
   async function handleSearch() {
-    if (allProfiles.length === 0) {
-      setError("No profiles found. Create some profiles first.");
-      return;
-    }
     setLoading(true);
-    setError(null);
-    setRankings([]);
-    
-    // Simulate loading
+    setSearched(true);
     await new Promise(resolve => setTimeout(resolve, 800));
-    
-    try {
-      const myId = localStorage.getItem("mingle_my_profile_id");
-      const candidates = allProfiles.filter((p) => p.id !== myId);
-      if (candidates.length === 0) {
-        setError("No other profiles to match against.");
-        setLoading(false);
-        return;
-      }
-      
-      const map = {};
-      candidates.forEach((p) => { map[p.id] = p; });
-      setProfileMap(map);
-
-      // Generate mock rankings with scores from 82% to 58%
-      const scores = [82, 78, 75, 71, 68, 65, 62, 58];
-      const reasons = [
-        "Strong alignment with your domain expertise and collaboration goals",
-        "Complementary skills in product and technical areas",
-        "Experienced in your target domain with relevant network",
-        "Background matches your mentorship needs",
-        "Could provide valuable introductions in your space",
-        "Overlapping interests and mutual connection potential",
-        "Relevant industry experience and advisory background",
-        "Good fit based on shared professional interests"
-      ];
-      
-      const mockRankings = candidates.slice(0, 8).map((c, i) => ({
-        contact_id: c.id,
-        score: scores[i] || (58 - i * 2),
-        reason: reasons[i] || "Potential match based on profile alignment",
-        urgency_fit: query.urgency === "high" ? "responsive" : "standard",
-      }));
-      
-      setRankings(mockRankings);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
+    setResults(MOCK_MATCHES);
+    setLoading(false);
+  }
+
+  function getScoreColor(score) {
+    if (score >= 80) return "#10b981";
+    if (score >= 70) return "#6366f1";
+    if (score >= 60) return "#f59e0b";
+    return "#64748b";
   }
 
   return (
@@ -105,12 +100,12 @@ export default function SmartQuery() {
 
       <div style={{
         background: "#fff",
-        borderRadius: "14px",
+        borderRadius: "16px",
         padding: "24px",
-        boxShadow: "0 2px 10px rgba(0,0,0,0.07)",
+        boxShadow: "0 2px 12px rgba(0,0,0,0.06)",
         marginBottom: "28px",
       }}>
-        <p style={{ fontWeight: 600, marginBottom: "14px", color: "#444" }}>Find connections who can help you with…</p>
+        <p style={{ fontWeight: 600, marginBottom: "14px", color: "#1e293b" }}>Find connections who can help you with…</p>
 
         <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", alignItems: "flex-end" }}>
           <div>
@@ -146,7 +141,8 @@ export default function SmartQuery() {
             disabled={loading}
             style={{
               padding: "10px 26px",
-              background: loading ? "#a5a0ff" : "#6c63ff", color: "#fff",
+              background: loading ? "#a5b4fc" : "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+              color: "#fff",
               border: "none", borderRadius: "8px",
               fontWeight: 700, cursor: loading ? "default" : "pointer",
               alignSelf: "flex-end",
@@ -157,41 +153,115 @@ export default function SmartQuery() {
         </div>
       </div>
 
-      {error && (
-        <div style={{ padding: "12px 16px", background: "#fde8e8", borderRadius: "8px", color: "#c0392b", marginBottom: "16px" }}>
-          {error}
-        </div>
-      )}
-
-      {!loading && rankings.length === 0 && !error && (
-        <p style={{ color: "#aaa", textAlign: "center", marginTop: "40px" }}>
+      {!searched && (
+        <p style={{ color: "#94a3b8", textAlign: "center", marginTop: "40px" }}>
           Set your criteria above and click "Find Connections" to see AI-ranked matches.
         </p>
       )}
 
-      {rankings.map((r) => (
-        <MatchCard
-          key={r.contact_id}
-          ranking={r}
-          profile={profileMap[r.contact_id]}
-          senderProfile={senderProfile}
-        />
-      ))}
+      {loading && (
+        <div style={{ textAlign: "center", padding: "40px" }}>
+          <div style={{
+            width: "40px",
+            height: "40px",
+            border: "3px solid #e2e8f0",
+            borderTopColor: "#6366f1",
+            borderRadius: "50%",
+            margin: "0 auto 16px",
+            animation: "spin 0.8s linear infinite"
+          }}></div>
+          <p style={{ color: "#64748b" }}>Finding your people...</p>
+          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+        </div>
+      )}
+
+      {!loading && results.length > 0 && (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          {results.map((match) => (
+            <div key={match.id} style={{
+              background: "#fff",
+              borderRadius: "16px",
+              padding: "20px 24px",
+              boxShadow: "0 2px 12px rgba(0,0,0,0.06)",
+              display: "flex",
+              alignItems: "center",
+              gap: "20px",
+            }}>
+              <div style={{
+                width: "56px",
+                height: "56px",
+                borderRadius: "14px",
+                background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+                color: "white",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "22px",
+                fontWeight: 700,
+                flexShrink: 0,
+              }}>
+                {match.name.charAt(0)}
+              </div>
+              
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "4px" }}>
+                  <h3 style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1e293b" }}>
+                    {match.name}
+                  </h3>
+                  <span style={{
+                    background: `${getScoreColor(match.score)}15`,
+                    color: getScoreColor(match.score),
+                    padding: "3px 10px",
+                    borderRadius: "999px",
+                    fontSize: "0.8rem",
+                    fontWeight: 700,
+                  }}>
+                    {match.score}% match
+                  </span>
+                </div>
+                <p style={{ fontSize: "0.9rem", color: "#64748b", marginBottom: "6px" }}>
+                  {match.role} @ {match.company}
+                </p>
+                <p style={{ fontSize: "0.85rem", color: "#94a3b8", fontStyle: "italic" }}>
+                  "{match.reason}"
+                </p>
+              </div>
+
+              <button 
+                onClick={() => navigate(`/profile/${match.id}`)} 
+                style={{
+                  padding: "8px 18px",
+                  background: "linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: "8px",
+                  cursor: "pointer",
+                  fontSize: "0.85rem",
+                  fontWeight: 600,
+                  flexShrink: 0,
+                }}
+              >
+                View
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 
 const backBtn = {
   padding: "6px 14px", background: "none",
-  border: "1px solid #ddd", borderRadius: "8px",
-  cursor: "pointer", color: "#555", fontSize: "0.85rem",
+  border: "1px solid #e2e8f0", borderRadius: "8px",
+  cursor: "pointer", color: "#64748b", fontSize: "0.85rem",
 };
 
 const labelStyle = {
   display: "block",
   fontSize: "0.78rem",
   fontWeight: 600,
-  color: "#888",
+  color: "#94a3b8",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   marginBottom: "4px",
