routing

pages/CityProfile.tsx

@@ -1,23 +1,17 @@
 import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Organization, Project, Player } from '../types';
 import { Icons } from '../components/IconSet';
 import { dbService } from '../services/DatabaseService';
 
-interface CityProfileProps {
-  city: Organization;
-  onBack: () => void;
-  backLabel?: string;
-  onSelectPlayer: (id: string) => void;
-  onSelectProject: (id: string) => void;
-}
+const CityProfile: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [city, setCity] = useState<Organization | null>(null);
+  const backLabel = 'Zurück zu Städte';
 
-const CityProfile: React.FC<CityProfileProps> = ({
-  city,
-  onBack,
-  backLabel = 'Zurück',
-  onSelectPlayer,
-  onSelectProject
-}) => {
+  const onSelectPlayer = (playerId: string) => navigate(`/players/${playerId}`);
+  const onSelectProject = (projectId: string) => navigate(`/projects/${projectId}`);
   const [activeTab, setActiveTab] = useState<'overview' | 'residents' | 'ventures'>('overview');
   const [residents, setResidents] = useState<Player[]>([]);
   const [ventures, setVentures] = useState<Project[]>([]);
@@ -25,6 +19,26 @@ const CityProfile: React.FC<CityProfileProps> = ({
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    if (!id) {
+      navigate('/cities');
+      return;
+    }
+
+    // Load city data
+    const cityData = dbService.getOrg(id);
+    if (cityData) {
+      setCity(cityData);
+    } else {
+      navigate('/cities');
+      return;
+    }
+
+    setLoading(false);
+  }, [id, navigate]);
+
+  useEffect(() => {
+    if (!city) return;
+
     const loadCityData = () => {
       // Load residents (players in this city)
       const allPlayers = dbService.getPlayers();
@@ -46,8 +60,6 @@ const CityProfile: React.FC<CityProfileProps> = ({
         ...city.cityStats
       };
       setCityStats(stats);
-
-      setLoading(false);
     };
 
     // Initial load
@@ -56,11 +68,21 @@ const CityProfile: React.FC<CityProfileProps> = ({
     // Subscribe to updates
     const unsub = dbService.subscribe(loadCityData);
     return unsub;
-  }, [city.id]);
+  }, [city]);
+
+  if (loading || !city) {
+    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>
+    );
+  }
 
   return (
     <div className="animate-in slide-in-from-right-4 duration-300">
-      <button onClick={onBack} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain mb-6 transition-colors group">
+      <button onClick={() => navigate('/cities')} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain mb-6 transition-colors group">
         <span className="group-hover:-translate-x-1 transition-transform">←</span> {backLabel}
       </button>