feat: implement tenant OAuth flow and guest achievements

resources/js/admin/pages/EventPhotosPage.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { deletePhoto, featurePhoto, getEventPhotos, unfeaturePhoto } from '../api';
 import { Button } from '@/components/ui/button';
+import { deletePhoto, featurePhoto, getEventPhotos, unfeaturePhoto } from '../api';
+import { isAuthError } from '../auth/tokens';
 
 export default function EventPhotosPage() {
   const [sp] = useSearchParams();
@@ -9,33 +10,83 @@ export default function EventPhotosPage() {
   const [rows, setRows] = React.useState<any[]>([]);
   const [loading, setLoading] = React.useState(true);
 
-  async function load() {
+  const load = React.useCallback(async () => {
     setLoading(true);
-    try { setRows(await getEventPhotos(id)); } finally { setLoading(false); }
-  }
-  React.useEffect(() => { load(); }, [id]);
+    try {
+      setRows(await getEventPhotos(id));
+    } catch (error) {
+      if (!isAuthError(error)) {
+        console.error(error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
 
-  async function onFeature(p: any) { await featurePhoto(p.id); load(); }
-  async function onUnfeature(p: any) { await unfeaturePhoto(p.id); load(); }
-  async function onDelete(p: any) { await deletePhoto(p.id); load(); }
+  React.useEffect(() => {
+    load();
+  }, [load]);
+
+  async function onFeature(photo: any) {
+    try {
+      await featurePhoto(photo.id);
+      await load();
+    } catch (error) {
+      if (!isAuthError(error)) {
+        console.error(error);
+      }
+    }
+  }
+
+  async function onUnfeature(photo: any) {
+    try {
+      await unfeaturePhoto(photo.id);
+      await load();
+    } catch (error) {
+      if (!isAuthError(error)) {
+        console.error(error);
+      }
+    }
+  }
+
+  async function onDelete(photo: any) {
+    try {
+      await deletePhoto(photo.id);
+      await load();
+    } catch (error) {
+      if (!isAuthError(error)) {
+        console.error(error);
+      }
+    }
+  }
 
   return (
     <div className="mx-auto max-w-5xl p-4">
       <h1 className="mb-3 text-lg font-semibold">Fotos moderieren</h1>
-      {loading && <div>Lade…</div>}
+      {loading && <div>Lade ...</div>}
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
         {rows.map((p) => (
           <div key={p.id} className="rounded border p-2">
-            <img src={p.thumbnail_path || p.file_path} className="mb-2 aspect-square w-full rounded object-cover" />
+            <img
+              src={p.thumbnail_path || p.file_path}
+              className="mb-2 aspect-square w-full rounded object-cover"
+              alt={p.caption ?? 'Foto'}
+            />
             <div className="flex items-center justify-between text-sm">
-              <span>❤ {p.likes_count}</span>
+              <span>?? {p.likes_count}</span>
               <div className="flex gap-1">
                 {p.is_featured ? (
-                  <Button size="sm" variant="secondary" onClick={() => onUnfeature(p)}>Unfeature</Button>
+                  <Button size="sm" variant="secondary" onClick={() => onUnfeature(p)}>
+                    Unfeature
+                  </Button>
                 ) : (
-                  <Button size="sm" variant="secondary" onClick={() => onFeature(p)}>Feature</Button>
+                  <Button size="sm" variant="secondary" onClick={() => onFeature(p)}>
+                    Feature
+                  </Button>
                 )}
-                <Button size="sm" variant="destructive" onClick={() => onDelete(p)}>Löschen</Button>
+                <Button size="sm" variant="destructive" onClick={() => onDelete(p)}>
+                  L<EFBFBD>schen
+                </Button>
               </div>
             </div>
           </div>
@@ -44,4 +95,3 @@ export default function EventPhotosPage() {
     </div>
   );
 }
-