photo card improvement

dominikschroeder · dominikschroeder · commit 4d4e4d192bab · 2025-02-18T08:41:14.000+01:00
diff --git a/src/app/api/strava/[slug]/route.ts b/src/app/api/strava/[slug]/route.ts
@@ -40,14 +40,26 @@ export async function POST(
   props: { params: Promise<{ slug: string }> },
 ) {
   const params = await props.params;
-  console.log('Webhook received:', params.slug);
+  console.log('Webhook POST received:', {
+    slug: params.slug,
+    method: req.method,
+    headers: Object.fromEntries(req.headers.entries()),
+  });
 
   if (params.slug !== 'webhook')
     return new Response('Invalid endpoint', { status: 404 });
 
   try {
     const data = (await req.json()) as WebhookRequest;
-    console.log('Webhook data:', data);
+    console.log('Webhook payload:', {
+      object_type: data.object_type,
+      object_id: data.object_id,
+      aspect_type: data.aspect_type,
+      owner_id: data.owner_id,
+      subscription_id: data.subscription_id,
+      event_time: new Date(data.event_time * 1000).toISOString(),
+      updates: data.updates,
+    });
 
     // Verify that this is a valid subscription from our database
     const subscription = await db.query.webhooks.findFirst({
@@ -59,6 +71,19 @@ export async function POST(
         ),
     });
 
+    console.log('Subscription check:', {
+      received_id: data.subscription_id,
+      found: !!subscription,
+      subscription_details: subscription
+        ? {
+            id: subscription.id,
+            verified: subscription.verified,
+            active: subscription.active,
+            callback_url: subscription.callback_url,
+          }
+        : null,
+    });
+
     if (!subscription) {
       console.error('Invalid subscription ID:', {
         received: data.subscription_id,
@@ -68,39 +93,69 @@ export async function POST(
     }
 
     if (data.object_type === 'athlete') {
+      console.log('Received athlete webhook, skipping');
       return new Response('OK');
     }
 
     if (data.aspect_type === 'delete') {
+      console.log('Processing delete webhook:', {
+        activity_id: data.object_id,
+        athlete_id: data.owner_id,
+      });
       await db.delete(activities).where(eq(activities.id, data.object_id));
       // Also delete associated photos
       await db.delete(photos).where(eq(photos.activity_id, data.object_id));
       return new Response(`Deleted activity ${data.object_id}`);
     }
 
     if (data.aspect_type === 'create' || data.aspect_type === 'update') {
-      const {
-        activities: [activity],
-        photos,
-      } = await handleWebhookActivity({
+      console.log('Processing create/update webhook:', {
+        activity_id: data.object_id,
+        athlete_id: data.owner_id,
+        aspect_type: data.aspect_type,
+      });
+
+      const result = await handleWebhookActivity({
         activityId: data.object_id,
         athleteId: data.owner_id,
       });
 
-      if (!activity) {
+      console.log('Webhook activity processing result:', {
+        activity_count: result.activities.length,
+        photo_count: result.photos.length,
+        first_activity: result.activities[0]
+          ? {
+              id: result.activities[0].id,
+              name: result.activities[0].name,
+              is_complete: result.activities[0].is_complete,
+            }
+          : null,
+      });
+
+      if (!result.activities[0]) {
         throw new Error('No activity returned from Strava');
       }
 
       return new Response(
         `${data.aspect_type === 'create' ? 'Created' : 'Updated'} activity ${
-          activity.id
-        } with ${photos.length} photos`,
+          result.activities[0].id
+        } with ${result.photos.length} photos`,
       );
     }
 
     return new Response('Invalid aspect type', { status: 400 });
   } catch (e) {
-    console.error('Webhook request failed:', e);
+    console.error('Webhook request failed:', {
+      error:
+        e instanceof Error
+          ? {
+              message: e.message,
+              name: e.name,
+              stack: e.stack,
+            }
+          : e,
+      timestamp: new Date().toISOString(),
+    });
     return new Response(
       e instanceof Error ? e.message : 'Unknown error processing webhook',
       { status: 500 },
diff --git a/src/components/list/card.tsx b/src/components/list/card.tsx
@@ -9,6 +9,9 @@ import {
   Map,
   Info,
   Loader2,
+  ArrowLeft,
+  ArrowRight,
+  X,
 } from 'lucide-react';
 
 import { type Activity, type Photo } from '~/server/db/schema';
@@ -352,30 +355,34 @@ export function PhotoCard({
                 className="h-full rounded-sm aspect-square object-cover"
                 onClick={() => {
                   api?.scrollTo(index);
-                  console.log(api);
                   setOpen(true);
                 }}
               />
             </Button>
           ))}
       </div>
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="[&>button]:hidden p-0 max-w-2xl">
-          <Carousel setApi={setApi}>
-            <DialogTitle>{title}</DialogTitle>
+        <DialogContent className="max-w-[90vw] max-h-[90vh] w-auto p-0 rounded-lg border-2 overflow-hidden">
+          <DialogTitle className="p-6 hidden">{title}</DialogTitle>
+          <Carousel setApi={setApi} className="w-full">
             <CarouselContent>
               {photos.map((photo) => (
-                <CarouselItem key={photo.unique_id}>
+                <CarouselItem
+                  key={photo.unique_id}
+                  className="flex items-center justify-center"
+                >
                   <img
                     src={photo.urls ? Object.values(photo.urls).at(-1) : ''}
                     alt={photo.caption ?? ''}
-                    className="h-full rounded-sm object-contain"
+                    className="object-contain max-w-full max-h-[80vh] w-auto h-auto"
                   />
                 </CarouselItem>
               ))}
             </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
+            <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
+              <CarouselPrevious />
+              <CarouselNext />
+            </div>
           </Carousel>
         </DialogContent>
       </Dialog>
diff --git a/src/env.js b/src/env.js
@@ -25,7 +25,6 @@ export const env = createEnv({
     AUTH_SECRET: z.string(),
     AUTH_STRAVA_ID: z.string(),
     AUTH_STRAVA_SECRET: z.string(),
-    AUTH_STRAVA_VERIFY_TOKEN: z.string(),
     PUBLIC_URL: z.string().url(),
     NODE_ENV: z
       .enum(["development", "test", "production"])
@@ -67,7 +66,6 @@ export const env = createEnv({
     AUTH_SECRET: process.env.AUTH_SECRET,
     AUTH_STRAVA_ID: process.env.AUTH_STRAVA_ID,
     AUTH_STRAVA_SECRET: process.env.AUTH_STRAVA_SECRET,
-    AUTH_STRAVA_VERIFY_TOKEN: process.env.AUTH_STRAVA_VERIFY_TOKEN,
     PUBLIC_URL: process.env.PUBLIC_URL,
     NEXT_PUBLIC_MAPBOX_TOKEN:
       process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
diff --git a/src/server/strava/actions.ts b/src/server/strava/actions.ts
@@ -82,38 +82,66 @@ async function fetchStravaActivities({
   athleteId: number;
   shouldDeletePhotos?: boolean;
 }): Promise<{ activities: Activity[]; photos: Photo[] }> {
-  console.log('Starting fetchStravaActivities with params:', {
-    hasAccessToken: !!accessToken,
-    before,
-    activityIds,
-    includePhotos,
-    athleteId,
-    shouldDeletePhotos,
+  console.log('Starting fetchStravaActivities:', {
+    has_access_token: !!accessToken,
+    before: before ? new Date(before * 1000).toISOString() : undefined,
+    activity_ids: activityIds,
+    include_photos: includePhotos,
+    athlete_id: athleteId,
+    should_delete_photos: shouldDeletePhotos,
+    timestamp: new Date().toISOString(),
   });
 
   const client = new StravaClient(accessToken);
   const photos: Photo[] = [];
 
   try {
-    console.log('Fetching activities from Strava...');
     let stravaActivities: StravaActivity[];
 
     if (activityIds) {
-      // When fetching specific activities, get complete data
-      console.log('Fetching complete activity data for IDs:', activityIds);
+      console.log('Fetching complete activities by IDs:', {
+        ids: activityIds,
+        count: activityIds.length,
+      });
       stravaActivities = await Promise.all(
-        activityIds.map((id) => client.getActivity(id)),
+        activityIds.map(async (id) => {
+          try {
+            const activity = await client.getActivity(id);
+            console.log('Successfully fetched activity:', {
+              id: activity.id,
+              name: activity.name,
+              type: activity.sport_type,
+              has_polyline:
+                !!activity.map.polyline || !!activity.map.summary_polyline,
+            });
+            return activity;
+          } catch (error) {
+            console.error('Failed to fetch individual activity:', {
+              id,
+              error: error instanceof Error ? error.message : error,
+            });
+            throw error;
+          }
+        }),
       );
     } else {
-      // When fetching all activities, get summary data
-      console.log('Fetching summary activity data');
+      console.log('Fetching summary activities');
       stravaActivities = await client.getActivities({
         before,
         per_page: 200,
       });
     }
 
-    console.log(`Retrieved ${stravaActivities.length} activities from Strava`);
+    console.log('Activity fetch completed:', {
+      total_activities: stravaActivities.length,
+      first_activity: stravaActivities[0]
+        ? {
+            id: stravaActivities[0].id,
+            name: stravaActivities[0].name,
+            type: stravaActivities[0].sport_type,
+          }
+        : null,
+    });
 
     // Transform activities
     const activities = stravaActivities
@@ -381,30 +409,83 @@ export async function handleWebhookActivity({
   activityId: number;
   athleteId: number;
 }) {
-  console.log('Handling webhook activity:', { activityId, athleteId });
+  console.log('Starting webhook activity processing:', {
+    activityId,
+    athleteId,
+    timestamp: new Date().toISOString(),
+  });
 
   // Get account directly using Strava athlete ID
   const account = await getAccount({
     providerAccountId: athleteId.toString(),
   });
 
+  console.log('Account lookup result:', {
+    found: !!account,
+    athlete_id: athleteId,
+    has_access_token: account?.access_token ? true : false,
+    token_expires_at: account?.expires_at
+      ? new Date(account.expires_at * 1000).toISOString()
+      : null,
+  });
+
   // If no account found, this user hasn't connected their Strava account to our app
   if (!account) {
     console.log('No account found for athlete ID:', athleteId);
     return { activities: [], photos: [] };
   }
 
   if (!account.access_token) {
+    console.error('Account found but no access token present:', {
+      athlete_id: athleteId,
+      provider_account_id: account.providerAccountId,
+    });
     throw new Error('No Strava access token found');
   }
 
-  return fetchStravaActivities({
-    accessToken: account.access_token,
-    activityIds: [activityId],
-    includePhotos: true,
-    athleteId,
-    shouldDeletePhotos: true,
-  });
+  try {
+    const result = await fetchStravaActivities({
+      accessToken: account.access_token,
+      activityIds: [activityId],
+      includePhotos: true,
+      athleteId,
+      shouldDeletePhotos: true,
+    });
+
+    console.log('Webhook activity processing completed:', {
+      activityId,
+      athleteId,
+      activities_processed: result.activities.length,
+      photos_processed: result.photos.length,
+      first_activity: result.activities[0]
+        ? {
+            id: result.activities[0].id,
+            name: result.activities[0].name,
+            is_complete: result.activities[0].is_complete,
+            has_polyline:
+              !!result.activities[0].map_polyline ||
+              !!result.activities[0].map_summary_polyline,
+          }
+        : null,
+    });
+
+    return result;
+  } catch (error) {
+    console.error('Error in handleWebhookActivity:', {
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              name: error.name,
+              stack: error.stack,
+            }
+          : error,
+      activityId,
+      athleteId,
+      timestamp: new Date().toISOString(),
+    });
+    throw error;
+  }
 }
 
 export async function checkWebhookStatus() {
