feat: implement Players component with data fetching and loading state; remove mock data and enhance error handling in database service

2026-05-14 00:16:47 +02:00 · 2025-12-30 15:58:07 +01:00
parent c6ad8a92ec
commit ea2b803534
12 changed files with 184 additions and 341 deletions
--- a/pages/Cities.tsx
+++ b/pages/Cities.tsx
@@ -53,6 +53,17 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
    const loadCities = () => {
      // Get all organizations from database
      const allOrgs = dbService.getOrgs();
@@ -63,7 +74,7 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
        // Count citizens (players with this organizationId)
        const allPlayers = dbService.getPlayers();
        const citizenCount = allPlayers.filter(player =>
-          player.stats.organizationId === city.id
+          player.organizationId === city.id
        ).length;

        // Count businesses/projects in this city
@@ -87,11 +98,10 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {

      setCities(cityOrgs);
      setCitiesWithStats(citiesStats);
-      setLoading(false);
    };

-    // Initial load
-    loadCities();
+    // Load fresh data on mount
+    loadData();

    // Subscribe to updates
    const unsub = dbService.subscribe(loadCities);
--- a/pages/CityProfile.tsx
+++ b/pages/CityProfile.tsx
@@ -270,8 +270,8 @@ const CityProfile: React.FC = () => {
                        onClick={() => onSelectPlayer(player.uuid)}
                        className="bg-surface border border-border p-4 rounded-xl flex items-center gap-4 hover:border-accentInfo/50 transition-colors cursor-pointer group hover:shadow-card hover:bg-surfaceHighlight/30"
                    >
-                        <div className="w-10 h-10 bg-surfaceHighlight rounded flex items-center justify-center font-bold text-lg text-textMuted group-hover:text-textMain transition-colors">
-                            {player.username.charAt(0)}
+                        <div className="w-10 h-10 flex items-center justify-center font-bold text-lg text-textMuted group-hover:text-textMain transition-colors">
+                            <img src={"https://minotar.net/armor/bust/"+player.username+"/500.png"}></img>
                        </div>
                        <div>
                            <div className="font-medium text-white group-hover:text-accentInfo transition-colors">{player.username}</div>
--- a/pages/Dashboard.tsx
+++ b/pages/Dashboard.tsx
@@ -48,19 +48,26 @@ const Dashboard: React.FC = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
    // Subscribe to database updates
    const unsubscribe = dbService.subscribe(() => {
      setPlayers(dbService.getPlayers());
      setProjects(dbService.getProjects());
      setOrgs(dbService.getOrgs());
-      setLoading(false);
    });

-    // Initial data load
-    setPlayers(dbService.getPlayers());
-    setProjects(dbService.getProjects());
-    setOrgs(dbService.getOrgs());
-    setLoading(false);
+    // Load fresh data on mount
+    loadData();

    return unsubscribe;
  }, []);
--- a/pages/Organizations.tsx
+++ b/pages/Organizations.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { MOCK_ORGS } from '../constants';
+import React, { useState, useEffect } from 'react';
 import { Organization } from '../types';
 import { Icons } from '../components/IconSet';
+import { dbService } from '../services/DatabaseService';

 const OrgCard = ({ org, onClick }: { org: Organization; onClick: () => void }) => (
  <div 
@@ -43,8 +43,35 @@ const OrgCard = ({ org, onClick }: { org: Organization; onClick: () => void }) =

 const Organizations: React.FC<{ onSelectOrg: (id: string) => void }> = ({ onSelectOrg }) => {
  const [filter, setFilter] = useState<'all' | Organization['type']>('all');
+  const [orgs, setOrgs] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);

-  const filteredOrgs = MOCK_ORGS.filter(org => 
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
+    const loadOrgs = () => {
+      const allOrgs = dbService.getOrgs();
+      setOrgs(allOrgs);
+    };
+
+    // Load fresh data on mount
+    loadData();
+
+    // Subscribe to updates
+    const unsub = dbService.subscribe(loadOrgs);
+    return unsub;
+  }, []);
+
+  const filteredOrgs = orgs.filter(org =>
    filter === 'all' ? true : org.type === filter
  );

@@ -73,8 +100,8 @@ const Organizations: React.FC<{ onSelectOrg: (id: string) => void }> = ({ onSele
            key={tab.id}
            onClick={() => setFilter(tab.id as any)}
            className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors relative top-[1px] ${
-              filter === tab.id 
-                ? 'text-textMain border-b-2 border-accentInfo bg-surfaceHighlight/20' 
+              filter === tab.id
+                ? 'text-textMain border-b-2 border-accentInfo bg-surfaceHighlight/20'
                : 'text-textMuted hover:text-textMain hover:bg-white/5'
            }`}
          >
@@ -83,19 +110,29 @@ const Organizations: React.FC<{ onSelectOrg: (id: string) => void }> = ({ onSele
        ))}
      </div>

-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {filteredOrgs.map(org => (
-          <OrgCard key={org.id} org={org} onClick={() => onSelectOrg(org.id)} />
-        ))}
-      </div>
-      
-       {filteredOrgs.length === 0 && (
-        <div className="text-center py-20 text-textMuted">
-          <p>Keine Organisationen gefunden.</p>
+      {loading ? (
+        <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 className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+            {filteredOrgs.map(org => (
+              <div key={org.id}>
+                <OrgCard org={org} onClick={() => onSelectOrg(org.id)} />
+              </div>
+            ))}
+          </div>
+
+          {filteredOrgs.length === 0 && (
+            <div className="text-center py-20 text-textMuted">
+              <p>Keine Organisationen gefunden.</p>
+            </div>
+          )}
+        </>
      )}
    </div>
  );
 };

-export default Organizations;
+export default Organizations;
--- a/pages/Players.tsx
+++ b/pages/Players.tsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import { Player } from '../types';
+import { dbService } from '../services/DatabaseService';
+
+interface PlayersProps {
+  onSelectPlayer: (id: string) => void;
+}
+
+const Players: React.FC<PlayersProps> = ({ onSelectPlayer }) => {
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
+    // Subscribe to database updates
+    const unsubDb = dbService.subscribe(() => {
+      setPlayers(dbService.getPlayers());
+    });
+
+    // Load fresh data on mount
+    loadData();
+
+    return unsubDb;
+  }, []);
+
+  return (
+    <div className="animate-in fade-in">
+       <div className="flex justify-between items-center mb-6">
+         <h2 className="text-2xl font-bold">Bürgerverzeichnis</h2>
+         <div className="relative">
+            <input
+              type="text"
+              placeholder="Filtern nach Tag oder Name..."
+              className="bg-surfaceHighlight border border-border rounded-lg pl-10 pr-4 py-2 text-sm text-textMain focus:border-accentInfo focus:outline-none w-64 transition-colors"
+            />
+         </div>
+       </div>
+
+       {loading ? (
+         <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 className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+           {players.map(player => (
+             <div
+               key={player.uuid}
+               onClick={() => onSelectPlayer(player.uuid)}
+               className="group bg-surface border border-border p-4 rounded-xl cursor-pointer hover:border-accentInfo/50 transition-all duration-200 hover:shadow-card"
+             >
+               <div className="flex items-center gap-4">
+                 <div className="w-12 h-12 rounded-md flex items-center justify-center font-bold text-lg text-textMuted group-hover:text-textMain transition-colors">
+                   <img src={"https://minotar.net/armor/bust/"+player.username+"/500.png"}></img>
+                 </div>
+                 <div>
+                   <div className="font-semibold text-textMain group-hover:text-accentInfo transition-colors">{player.username}</div>
+                   <div className="text-xs text-textMuted mt-1 flex gap-2">
+                      {player.tags.slice(0, 2).map(t => <span key={t}>{t}</span>)}
+                   </div>
+                 </div>
+               </div>
+             </div>
+           ))}
+         </div>
+       )}
+    </div>
+  );
+};
+
+export default Players;
--- a/pages/Projects.tsx
+++ b/pages/Projects.tsx
@@ -138,14 +138,24 @@ const Projects: React.FC<ProjectsProps> = ({ onSelectProject }) => {

  // Subscribe to auth and data updates
  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
    const unsubAuth = authService.subscribe(setUser);
    const unsubDb = dbService.subscribe(() => {
      setProjects(dbService.getProjects());
    });

-    // Initial data load
-    setProjects(dbService.getProjects());
-    setLoading(false);
+    // Load fresh data on mount
+    loadData();

    return () => {
      unsubAuth();