feat (add where poll): finish add where poll conditionally, integrate backend to basic features

Author: Puppychan

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/page.tsx

@@ -19,7 +19,11 @@ export default async function MeetTogetherPlanDetailsPage({ params }: Props) {
   const platformUser = await getCurrentUser(true);
   const plan = await getPlan(planId);
   const users = await getUsers(planId);
+  const polls = await getPollsForPlan(planId);
   const timeblocks = await getTimeBlocks(planId);
+  const isCreator = Boolean(
+    platformUser?.id && plan?.creator_id && platformUser.id === plan.creator_id
+  );
 
   return (
     <div className="flex min-h-screen w-full flex-col items-center">
@@ -34,6 +38,8 @@ export default async function MeetTogetherPlanDetailsPage({ params }: Props) {
           >
             <PlanDetailsClient
               plan={plan}
+              isCreator={isCreator}
+              polls={polls}
               platformUser={platformUser}
               users={users}
               timeblocks={timeblocks}
@@ -95,3 +101,105 @@ async function getTimeBlocks(planId: string) {
     })),
   ];
 }
+export async function getPollsForPlan(planId: string) {
+  const sbAdmin = await createAdminClient();
+
+  // 1. Get all polls for the plan
+  const { data: polls, error: pollsError } = await sbAdmin
+    .from('polls')
+    .select(
+      'id, name, plan_id, created_at, creator_id, allow_anonymous_updates'
+    )
+    .eq('plan_id', planId);
+
+  if (pollsError) {
+    console.log('Error fetching polls');
+    return {
+      error: 'Error fetching polls',
+      polls: null,
+      userVotes: [],
+      guestVotes: [],
+    };
+  }
+
+  // 2. Get options for all polls
+  const pollIds = polls?.map((p) => p.id) ?? [];
+  let allOptions: any[] = [];
+  if (pollIds.length > 0) {
+    const { data: options, error: optionsError } = await sbAdmin
+      .from('poll_options')
+      .select('id, poll_id, value, created_at')
+      .in('poll_id', pollIds);
+
+    if (optionsError) {
+      console.log('Error fetching poll options');
+      return {
+        error: 'Error fetching poll options',
+        polls: null,
+        userVotes: [],
+        guestVotes: [],
+      };
+    }
+    allOptions = options ?? [];
+  }
+
+  // 3. Get user and guest votes for all poll options
+  const optionIds = allOptions.map((o) => o.id);
+  let userVotes: any[] = [];
+  let guestVotes: any[] = [];
+  if (optionIds.length > 0) {
+    // Platform user votes
+    const { data: uVotes, error: uVotesError } = await sbAdmin
+      .from('poll_user_votes')
+      .select('id, option_id, user_id, created_at')
+      .in('option_id', optionIds);
+
+    // Guest votes
+    const { data: gVotes, error: gVotesError } = await sbAdmin
+      .from('poll_guest_votes')
+      .select('id, option_id, guest_id, created_at')
+      .in('option_id', optionIds);
+
+    if (uVotesError || gVotesError) {
+      console.log('Error fetching votes');
+      return {
+        error: 'Error fetching votes',
+        polls: null,
+        userVotes: [],
+        guestVotes: [],
+      };
+    }
+    userVotes = uVotes ?? [];
+    guestVotes = gVotes ?? [];
+  }
+
+  // 4. Attach options and their votes to polls
+  const pollsWithOptions = polls.map((poll) => {
+    const options = allOptions
+      .filter((opt) => opt.poll_id === poll.id)
+      .map((opt) => {
+        const optionUserVotes = userVotes.filter((v) => v.option_id === opt.id);
+        const optionGuestVotes = guestVotes.filter(
+          (v) => v.option_id === opt.id
+        );
+
+        return {
+          ...opt,
+          userVotes: optionUserVotes,
+          guestVotes: optionGuestVotes,
+          totalVotes: optionUserVotes.length + optionGuestVotes.length,
+        };
+      });
+
+    return {
+      ...poll,
+      options,
+    };
+  });
+
+  return {
+    polls: pollsWithOptions,
+    userVotes,
+    guestVotes,
+  };
+}

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-client.tsx

@@ -5,7 +5,11 @@ import EditPlanDialog from './edit-plan-dialog';
 import PlanLogin from './plan-login';
 import PlanUserFilter from './plan-user-filter';
 import UtilityButtons from './utility-buttons';
-import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import PlanDetailsPolls from '@/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-polls';
+import type {
+  GetPollsForPlanResult,
+  MeetTogetherPlan,
+} from '@tuturuuu/types/primitives/MeetTogetherPlan';
 import type { User } from '@tuturuuu/types/primitives/User';
 import { Separator } from '@tuturuuu/ui/separator';
 import html2canvas from 'html2canvas-pro';
@@ -14,7 +18,9 @@ import { useCallback } from 'react';
 
 interface PlanDetailsClientProps {
   plan: MeetTogetherPlan;
+  polls: GetPollsForPlanResult | null;
   platformUser: User | null;
+  isCreator: boolean;
   users: {
     id: string | null;
     display_name: string | null;
@@ -36,7 +42,9 @@ interface PlanDetailsClientProps {
 export default function PlanDetailsClient({
   plan,
   platformUser,
+  isCreator,
   users,
+  polls,
   timeblocks,
 }: PlanDetailsClientProps) {
   const { resolvedTheme } = useTheme();
@@ -139,17 +147,24 @@ export default function PlanDetailsClient({
           platformUser={platformUser}
           handlePNG={downloadAsPNG}
         />
+
         <div id="plan-ref" className="flex w-full flex-col items-center">
           <p className="my-4 flex max-w-xl items-center gap-2 text-center text-2xl leading-tight! font-semibold md:mb-4 lg:text-3xl">
             {plan.name} <EditPlanDialog plan={plan} />
           </p>
-          <div className="mt-8 grid w-full items-center justify-between gap-4 md:grid-cols-2">
+          <div className="mt-8 grid w-full items-center justify-between gap-4 md:grid-cols-2 lg:grid-cols-3">
             <PlanLogin
               plan={plan}
               timeblocks={[]}
               platformUser={platformUser}
             />
             <AllAvailabilities plan={plan} timeblocks={timeblocks} />
+            <PlanDetailsPolls
+              plan={plan}
+              polls={polls}
+              isCreator={isCreator}
+              platformUser={platformUser}
+            />
           </div>
         </div>
       </div>

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/plan-details-polls.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useTimeBlocking } from '@/app/[locale]/(marketing)/meet-together/plans/[planId]/time-blocking-provider';
+import type {
+  GetPollsForPlanResult,
+  MeetTogetherPlan,
+} from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import type { User } from '@tuturuuu/types/primitives/User';
+import MultipleChoiceVote from '@tuturuuu/ui/legacy/tumeet/multiple-choice-vote';
+
+interface PlanDetailsPollsProps {
+  plan: MeetTogetherPlan;
+  isCreator: boolean;
+  platformUser: User | null;
+  polls: GetPollsForPlanResult | null;
+}
+
+export default function PlanDetailsPolls({
+  plan,
+  isCreator,
+  platformUser,
+  polls,
+}: PlanDetailsPollsProps) {
+  const { user: guestUser } = useTimeBlocking();
+
+  const user = guestUser ?? platformUser;
+  const currentUserId = user?.id ?? null;
+  const userType =
+    user?.is_guest === true
+      ? 'GUEST'
+      : platformUser?.id
+        ? 'PLATFORM'
+        : 'DISPLAY';
+
+  // You might want to only show the "where" poll or map over all polls
+  const wherePoll = polls?.polls?.[0]; // Assuming the first poll is the "where to meet" poll
+
+  const onVote = async (pollId: string, optionIds: string[]) => {
+    await fetch(`/api/meet-together/plans/${plan.id}/poll/vote`, {
+      method: 'POST',
+      body: JSON.stringify({
+        pollId,
+        optionIds,
+        userType, // 'PLATFORM' or 'GUEST'
+        guestId: userType === 'GUEST' ? user?.id : undefined,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    });
+  };
+
+  const onAddOption = async (pollId: string, value: string) => {
+    const res = await fetch(`/api/meet-together/plans/${plan.id}/poll/option`, {
+      method: 'POST',
+      body: JSON.stringify({
+        pollId,
+        value,
+        userType, // 'PLATFORM' or 'GUEST'
+        guestId: userType === 'GUEST' ? user?.id : undefined,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    console.log('Option added:', res);
+  };
+
+  if (!plan.where_to_meet && !isCreator) {
+    return null; // Don't render anything if "where to meet" is not enabled and user is not creator
+  }
+
+  return (
+    <div className="sticky top-16 z-10 self-start rounded-lg border px-2 py-4 md:px-4">
+      {plan.where_to_meet && wherePoll ? (
+        <MultipleChoiceVote
+          pollName={wherePoll.name}
+          pollId={wherePoll.id}
+          options={wherePoll.options}
+          currentUserId={currentUserId}
+          isDisplayMode={userType === 'DISPLAY'}
+          onAddOption={onAddOption}
+          onVote={onVote}
+        />
+      ) : (
+        isCreator && (
+          <div className="flex flex-col gap-4">
+            <p className="text-sm text-gray-500">
+              You can enable "Where to meet" voting for your plan.
+            </p>
+            <button
+              className="rounded bg-dynamic-blue px-4 py-2 font-medium text-white shadow transition hover:bg-dynamic-blue/80"
+              onClick={async () => {
+                // call your backend here to enable where_to_meet
+                // await onUpdateWhereToMeet(true);
+              }}
+            >
+              Enable "Where to meet" voting
+            </button>
+          </div>
+        )
+      )}
+    </div>
+  );
+}

apps/web/src/app/api/meet-together/plans/[planId]/poll/option/route.ts

@@ -0,0 +1,57 @@
+// /api/meet-together/poll/option.ts
+import {
+  createAdminClient,
+  createClient,
+} from '@tuturuuu/supabase/next/server';
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const { pollId, value, userType, guestId } = await req.json();
+  const sbAdmin = await createAdminClient();
+  const supabase = await createClient();
+
+  let userId: string | null = null;
+  if (userType === 'PLATFORM') {
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    userId = user?.id ?? null;
+    if (!userId)
+      return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
+  }
+
+  // Insert new poll option (open to both guests and users)
+  const { data: option, error } = await sbAdmin
+    .from('poll_options')
+    .insert({
+      poll_id: pollId,
+      value,
+    })
+    .select('id')
+    .single();
+
+  if (error) {
+    return NextResponse.json(
+      { message: 'Failed to add option', error },
+      { status: 500 }
+    );
+  }
+
+  //   Optionally: Auto-vote for the new option
+  if (userType === 'PLATFORM' && userId) {
+    await sbAdmin.from('poll_user_votes').insert({
+      user_id: userId,
+      option_id: option.id,
+    });
+  } else if (userType === 'GUEST' && guestId) {
+    await sbAdmin.from('poll_guest_votes').insert({
+      guest_id: guestId,
+      option_id: option.id,
+    });
+  }
+
+  return NextResponse.json({
+    message: 'Option added and voted',
+    optionId: option.id,
+  });
+}