routing

pages/PlayerProfile.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Player } from '../types';
 import { dbService } from '../services/DatabaseService';
 import { authService } from '../services/AuthService';
@@ -6,24 +7,22 @@ import InventoryGrid from '../components/InventoryGrid';
 import EditModal from '../components/EditModal';
 import { Icons } from '../components/IconSet';
 
-interface PlayerProfileProps {
-  player: Player;
-  onBack: () => void;
-}
-
-const PlayerProfile: React.FC<PlayerProfileProps> = ({ player: initialPlayer, onBack }) => {
-  const [player, setPlayer] = useState(initialPlayer);
+const PlayerProfile: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [player, setPlayer] = useState<Player | null>(null);
   const [currentUser, setCurrentUser] = useState(authService.getUser());
-  
+
   // Edit State
   const [isEditStoryOpen, setIsEditStoryOpen] = useState(false);
   const [isEditTagsOpen, setIsEditTagsOpen] = useState(false);
   const [isEditOrgOpen, setIsEditOrgOpen] = useState(false);
   const [ownedProjects, setOwnedProjects] = useState<any[]>([]);
-  
+  const [loading, setLoading] = useState(true);
+
   // Is this the logged-in user's profile?
-  const isOwner = currentUser?.linkedPlayerUuid === player.uuid;
-  const playerOrg = dbService.getOrg(player.stats.organizationId || '');
+  const isOwner = currentUser?.linkedPlayerUuid === player?.uuid;
+  const playerOrg = player ? dbService.getOrg(player.stats.organizationId || '') : null;
 
   // Check if player is already linked to anyone in our mock/real DB logic
   // Since the Player object doesn't expose 'discordId' publicly in types yet (it's hidden in DB),
@@ -31,9 +30,25 @@ const PlayerProfile: React.FC<PlayerProfileProps> = ({ player: initialPlayer, on
   const canClaim = !!currentUser && !currentUser.linkedPlayerUuid && !isOwner;
 
   useEffect(() => {
-    // Refresh player data from "DB" to ensure we have latest local edits
-    const freshData = dbService.getPlayer(player.uuid);
-    if (freshData) setPlayer(freshData);
+    if (!id) {
+      navigate('/players');
+      return;
+    }
+
+    // Load player data
+    const playerData = dbService.getPlayer(id);
+    if (playerData) {
+      setPlayer(playerData);
+    } else {
+      navigate('/players');
+      return;
+    }
+
+    setLoading(false);
+  }, [id, navigate]);
+
+  useEffect(() => {
+    if (!player) return;
 
     // Load owned projects
     const allProjects = dbService.getProjects();
@@ -43,7 +58,17 @@ const PlayerProfile: React.FC<PlayerProfileProps> = ({ player: initialPlayer, on
     // Subscribe to auth to show/hide edit buttons
     const unsub = authService.subscribe(u => setCurrentUser(u));
     return unsub;
-  }, [player.uuid, player.username]);
+  }, [player]);
+
+  if (loading || !player) {
+    return (
+      <div className="max-w-4xl mx-auto animate-in slide-in-from-right-4 duration-300">
+        <div className="flex justify-center py-20">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
+        </div>
+      </div>
+    );
+  }
 
   const handleSaveStory = (newStory: string) => {
     // Update local DB
@@ -113,7 +138,7 @@ const PlayerProfile: React.FC<PlayerProfileProps> = ({ player: initialPlayer, on
   return (
     <div className="max-w-4xl mx-auto animate-in slide-in-from-right-4 duration-300">
       <div className="flex justify-between items-center mb-6">
-        <button onClick={onBack} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain transition-colors">
+        <button onClick={() => navigate('/players')} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain transition-colors">
             <span className="text-lg">←</span> Zurück zur Liste
         </button>
         {canClaim && (