feat: add public user profiles
- Add GET /api/users/:username endpoint for public profiles - Create PublicProfilePage component with user stats and info - Add getUserByUsername function to API service - Add /:username route to App.jsx - Display user info: name, location, stats, WSDC ID, social links - Only show public data (no email or sensitive information) - Accessible only to authenticated users Users can now view public profiles of other users by visiting /<username>. The profile displays stats, location, WSDC ID, and social media links.
This commit is contained in:
Radosław Gierwiało
@@ -81,4 +81,71 @@ router.patch('/me', authenticate, updateProfileValidation, updateProfile);
|
|||||||
// PATCH /api/users/me/password - Change password
|
// PATCH /api/users/me/password - Change password
|
||||||
router.patch('/me/password', authenticate, changePasswordValidation, changePassword);
|
router.patch('/me/password', authenticate, changePasswordValidation, changePassword);
|
||||||
|
|
||||||
|
// GET /api/users/:username - Get public user profile by username
|
||||||
|
router.get('/:username', authenticate, async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const { username } = req.params;
|
||||||
|
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { username },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
wsdcId: true,
|
||||||
|
youtubeUrl: true,
|
||||||
|
instagramUrl: true,
|
||||||
|
facebookUrl: true,
|
||||||
|
tiktokUrl: true,
|
||||||
|
country: true,
|
||||||
|
city: true,
|
||||||
|
avatar: true,
|
||||||
|
createdAt: true,
|
||||||
|
_count: {
|
||||||
|
select: {
|
||||||
|
matchesAsUser1: true,
|
||||||
|
matchesAsUser2: true,
|
||||||
|
ratingsReceived: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({
|
||||||
|
success: false,
|
||||||
|
error: 'User not found',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate total matches
|
||||||
|
const totalMatches = user._count.matchesAsUser1 + user._count.matchesAsUser2;
|
||||||
|
|
||||||
|
// Calculate average rating
|
||||||
|
const ratings = await prisma.rating.findMany({
|
||||||
|
where: { ratedId: user.id },
|
||||||
|
select: { score: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const averageRating = ratings.length > 0
|
||||||
|
? ratings.reduce((sum, r) => sum + r.score, 0) / ratings.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
...user,
|
||||||
|
stats: {
|
||||||
|
matchesCount: totalMatches,
|
||||||
|
ratingsCount: user._count.ratingsReceived,
|
||||||
|
rating: averageRating.toFixed(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import MatchChatPage from './pages/MatchChatPage';
|
|||||||
import RatePartnerPage from './pages/RatePartnerPage';
|
import RatePartnerPage from './pages/RatePartnerPage';
|
||||||
import HistoryPage from './pages/HistoryPage';
|
import HistoryPage from './pages/HistoryPage';
|
||||||
import ProfilePage from './pages/ProfilePage';
|
import ProfilePage from './pages/ProfilePage';
|
||||||
|
import PublicProfilePage from './pages/PublicProfilePage';
|
||||||
import VerificationBanner from './components/common/VerificationBanner';
|
import VerificationBanner from './components/common/VerificationBanner';
|
||||||
|
|
||||||
// Protected Route Component with Verification Banner
|
// Protected Route Component with Verification Banner
|
||||||
@@ -132,9 +133,18 @@ function App() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Public Profile - must be before default redirect */}
|
||||||
|
<Route
|
||||||
|
path="/:username"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<PublicProfilePage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Default redirect */}
|
{/* Default redirect */}
|
||||||
<Route path="/" element={<Navigate to="/events" replace />} />
|
<Route path="/" element={<Navigate to="/events" replace />} />
|
||||||
<Route path="*" element={<Navigate to="/events" replace />} />
|
|
||||||
</Routes>
|
</Routes>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|||||||
211
frontend/src/pages/PublicProfilePage.jsx
Normal file
211
frontend/src/pages/PublicProfilePage.jsx
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams, Link } from 'react-router-dom';
|
||||||
|
import { authAPI } from '../services/api';
|
||||||
|
import Layout from '../components/layout/Layout';
|
||||||
|
import { User, MapPin, Globe, Hash, Youtube, Instagram, Facebook, Award, Users, Star, Calendar, Loader2, AlertCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
const PublicProfilePage = () => {
|
||||||
|
const { username } = useParams();
|
||||||
|
const [profile, setProfile] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchProfile = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await authAPI.getUserByUsername(username);
|
||||||
|
setProfile(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.data?.error || 'Failed to load profile');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchProfile();
|
||||||
|
}, [username]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="flex flex-col items-center gap-3">
|
||||||
|
<Loader2 className="w-12 h-12 animate-spin text-primary-600" />
|
||||||
|
<p className="text-gray-600">Loading profile...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="max-w-md w-full mx-4">
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-8 text-center">
|
||||||
|
<AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">User Not Found</h2>
|
||||||
|
<p className="text-gray-600 mb-6">{error}</p>
|
||||||
|
<Link
|
||||||
|
to="/events"
|
||||||
|
className="inline-block px-6 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700"
|
||||||
|
>
|
||||||
|
Back to Events
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50 py-8">
|
||||||
|
<div className="max-w-4xl mx-auto px-4">
|
||||||
|
{/* Profile Header */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-8 mb-6">
|
||||||
|
<div className="flex items-start gap-6">
|
||||||
|
<img
|
||||||
|
src={profile.avatar}
|
||||||
|
alt={profile.username}
|
||||||
|
className="w-32 h-32 rounded-full"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-1">
|
||||||
|
{profile.firstName && profile.lastName
|
||||||
|
? `${profile.firstName} ${profile.lastName}`
|
||||||
|
: profile.username}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600 mb-4">@{profile.username}</p>
|
||||||
|
|
||||||
|
{/* Location */}
|
||||||
|
{(profile.city || profile.country) && (
|
||||||
|
<div className="flex items-center gap-4 text-gray-700 mb-4">
|
||||||
|
{profile.city && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
<span>{profile.city}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{profile.country && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
<span>{profile.country}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="flex gap-6 mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Users className="w-5 h-5 text-primary-600" />
|
||||||
|
<span className="font-semibold">{profile.stats.matchesCount}</span>
|
||||||
|
<span className="text-gray-600">Matches</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Star className="w-5 h-5 text-yellow-500" />
|
||||||
|
<span className="font-semibold">{profile.stats.rating}</span>
|
||||||
|
<span className="text-gray-600">Rating</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Award className="w-5 h-5 text-purple-600" />
|
||||||
|
<span className="font-semibold">{profile.stats.ratingsCount}</span>
|
||||||
|
<span className="text-gray-600">Reviews</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Member since */}
|
||||||
|
<div className="flex items-center gap-2 text-gray-600 text-sm">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>Member since {new Date(profile.createdAt).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* WSDC ID */}
|
||||||
|
{profile.wsdcId && (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6 mb-6">
|
||||||
|
<h2 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||||
|
<Hash className="w-5 h-5 text-primary-600" />
|
||||||
|
WSDC Profile
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-gray-600">WSDC ID:</span>
|
||||||
|
<a
|
||||||
|
href={`https://www.worldsdc.com/member/${profile.wsdcId}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary-600 hover:underline font-medium"
|
||||||
|
>
|
||||||
|
{profile.wsdcId}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Social Media Links */}
|
||||||
|
{(profile.youtubeUrl || profile.instagramUrl || profile.facebookUrl || profile.tiktokUrl) && (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6">
|
||||||
|
<h2 className="text-xl font-semibold mb-4">Social Media</h2>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{profile.youtubeUrl && (
|
||||||
|
<a
|
||||||
|
href={profile.youtubeUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-700 rounded-md hover:bg-red-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Youtube className="w-5 h-5" />
|
||||||
|
YouTube
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{profile.instagramUrl && (
|
||||||
|
<a
|
||||||
|
href={profile.instagramUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-pink-50 text-pink-700 rounded-md hover:bg-pink-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Instagram className="w-5 h-5" />
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{profile.facebookUrl && (
|
||||||
|
<a
|
||||||
|
href={profile.facebookUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Facebook className="w-5 h-5" />
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{profile.tiktokUrl && (
|
||||||
|
<a
|
||||||
|
href={profile.tiktokUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-700 rounded-md hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
|
||||||
|
</svg>
|
||||||
|
TikTok
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PublicProfilePage;
|
||||||
@@ -160,6 +160,11 @@ export const authAPI = {
|
|||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async getUserByUsername(username) {
|
||||||
|
const data = await fetchAPI(`/users/${username}`);
|
||||||
|
return data.data;
|
||||||
|
},
|
||||||
|
|
||||||
logout() {
|
logout() {
|
||||||
localStorage.removeItem('token');
|
localStorage.removeItem('token');
|
||||||
localStorage.removeItem('user');
|
localStorage.removeItem('user');
|
||||||
|
|||||||
Reference in New Issue
Block a user