reworked the guest pwa, modernized start and gallery page. added share link functionality.

2025-11-10 22:25:25 +01:00
parent 1e8810ca51
commit 1cec116933
22 changed files with 1208 additions and 476 deletions
--- a/resources/js/guest/pages/SharedPhotoPage.tsx
+++ b/resources/js/guest/pages/SharedPhotoPage.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { fetchPhotoShare } from '../services/photosApi';
+import { useTranslation } from '../i18n/useTranslation';
+import { useToast } from '../components/ToastHost';
+import { Loader2 } from 'lucide-react';
+
+interface ShareResponse {
+  slug: string;
+  expires_at?: string;
+  photo: {
+    id: number;
+    title?: string;
+    likes_count?: number;
+    emotion?: { name?: string; emoji?: string } | null;
+    image_urls: { full: string; thumbnail: string };
+  };
+  event?: { id: number; name?: string | null } | null;
+}
+
+export default function SharedPhotoPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [state, setState] = React.useState<{
+    loading: boolean;
+    error: string | null;
+    data: ShareResponse | null;
+  }>({ loading: true, error: null, data: null });
+
+  React.useEffect(() => {
+    let active = true;
+    if (!slug) return;
+
+    setState({ loading: true, error: null, data: null });
+    fetchPhotoShare(slug)
+      .then((data) => {
+        if (!active) return;
+        setState({ loading: false, error: null, data });
+      })
+      .catch((error: any) => {
+        if (!active) return;
+        setState({ loading: false, error: error?.message ?? t('share.error', 'Moment konnte nicht geladen werden.'), data: null });
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [slug, t]);
+
+  const handleCopy = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
+    } catch {
+      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
+    }
+  }, [toast, t]);
+
+  if (state.loading) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-gradient-to-br from-pink-50 to-white px-4 text-center">
+        <Loader2 className="h-8 w-8 animate-spin text-pink-500" aria-hidden />
+        <p className="text-sm text-muted-foreground">{t('share.loading', 'Moment wird geladen...')}</p>
+      </div>
+    );
+  }
+
+  if (state.error || !state.data) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-gradient-to-br from-pink-50 to-white px-6 text-center">
+        <p className="text-lg font-semibold text-foreground">{t('share.expiredTitle', 'Link abgelaufen')}</p>
+        <p className="text-sm text-muted-foreground max-w-md">{state.error ?? t('share.expiredDescription', 'Dieses Foto ist nicht mehr verfügbar.')}</p>
+        <Button asChild>
+          <Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { data } = state;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-white via-pink-50 to-white px-4 py-8">
+      <div className="mx-auto flex max-w-2xl flex-col gap-5">
+        <div className="rounded-3xl border border-white/60 bg-white/80 p-6 text-center shadow">
+          <p className="text-xs uppercase tracking-wide text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</p>
+          <h1 className="mt-2 text-2xl font-semibold text-foreground">{data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')}</h1>
+          {data.photo.title && (
+            <p className="mt-1 text-sm text-muted-foreground">{data.photo.title}</p>
+          )}
+        </div>
+
+        <div className="overflow-hidden rounded-[32px] border border-white/60 bg-black">
+          <img
+            src={data.photo.image_urls.full}
+            alt={data.photo.title ?? 'Foto'}
+            className="h-full w-full object-cover"
+            loading="lazy"
+          />
+        </div>
+
+        {data.photo.emotion && (
+          <p className="text-center text-sm text-muted-foreground">
+            {data.photo.emotion.emoji} {data.photo.emotion.name}
+          </p>
+        )}
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+          <Button variant="secondary" onClick={handleCopy}>
+            {t('share.copyLink', 'Link kopieren')}
+          </Button>
+          <Button asChild>
+            <Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}