119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import { profileAPI, likeAPI, API_BASE_URL } from '../api'
|
|
import '../styles/discover.css'
|
|
|
|
export default function Discover() {
|
|
const [profiles, setProfiles] = useState([])
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
loadProfiles()
|
|
}, [])
|
|
|
|
const loadProfiles = async () => {
|
|
try {
|
|
setIsLoading(true)
|
|
const response = await profileAPI.discoverProfiles()
|
|
setProfiles(response.data || [])
|
|
} catch (err) {
|
|
setError('Failed to load profiles')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleLike = async () => {
|
|
if (currentIndex >= profiles.length) return
|
|
|
|
const profile = profiles[currentIndex]
|
|
try {
|
|
const response = await likeAPI.likeUser(profile.id)
|
|
if (response.data.is_match) {
|
|
alert(`It's a match with ${profile.display_name}!`)
|
|
}
|
|
nextProfile()
|
|
} catch (err) {
|
|
setError(err.response?.data?.detail || 'Failed to like profile')
|
|
}
|
|
}
|
|
|
|
const handlePass = () => {
|
|
nextProfile()
|
|
}
|
|
|
|
const nextProfile = () => {
|
|
if (currentIndex < profiles.length - 1) {
|
|
setCurrentIndex((prev) => prev + 1)
|
|
} else {
|
|
setError('No more profiles to discover')
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <div className="discover">Loading profiles...</div>
|
|
}
|
|
|
|
if (currentIndex >= profiles.length) {
|
|
return (
|
|
<div className="discover">
|
|
<div className="empty-state">
|
|
<h2>No more profiles</h2>
|
|
<p>Come back later for new matches!</p>
|
|
<button onClick={loadProfiles}>Refresh</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const profile = profiles[currentIndex]
|
|
|
|
return (
|
|
<div className="discover">
|
|
<h1>Discover</h1>
|
|
{error && <div className="error-message">{error}</div>}
|
|
|
|
<div className="card-container">
|
|
<div className="profile-card">
|
|
{profile.photos && profile.photos.length > 0 ? (
|
|
<img src={`${API_BASE_URL}/media/${profile.photos[0].file_path}`} alt={profile.display_name} />
|
|
) : (
|
|
<div className="no-photo">No photo</div>
|
|
)}
|
|
|
|
<div className="card-info">
|
|
<h2>
|
|
{profile.display_name}, {profile.age}
|
|
</h2>
|
|
<p className="location">{profile.location}</p>
|
|
{profile.bio && <p className="bio">{profile.bio}</p>}
|
|
{profile.interests && profile.interests.length > 0 && (
|
|
<div className="interests">
|
|
{profile.interests.map((interest) => (
|
|
<span key={interest} className="interest-tag">
|
|
{interest}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="card-actions">
|
|
<button className="pass-btn" onClick={handlePass}>
|
|
Pass
|
|
</button>
|
|
<button className="like-btn" onClick={handleLike}>
|
|
♥ Like
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="progress">
|
|
Profile {currentIndex + 1} of {profiles.length}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|