Move Sign Out button to profile page
- Remove Sign Out button from UserProfile component in header - Add Sign Out button to UserProfilePage next to Edit Profile - Sign Out button only visible on user's own profile page - Styled with red background to indicate destructive action
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useClerk } from '@clerk/clerk-react';
|
||||
import { userService, type UserProfile, type UserActivity } from '@/services/userService';
|
||||
import type { Report, CleanupEvent } from '@/types';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
@@ -23,6 +24,7 @@ L.Icon.Default.mergeOptions({
|
||||
export function UserProfilePage() {
|
||||
const { userId } = useParams<{ userId: string }>();
|
||||
const { user: currentUser } = useAuth();
|
||||
const { signOut } = useClerk();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [profile, setProfile] = useState<UserProfile | null>(null);
|
||||
@@ -264,12 +266,23 @@ export function UserProfilePage() {
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleEditProfile}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={handleEditProfile}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
await signOut();
|
||||
navigate('/');
|
||||
}}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user