@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/legacy/meet/planId/day-planners.tsx

@@ -0,0 +1,151 @@
+import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import dayjs from 'dayjs';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import DayPlanner from './day-planner';
+
+function DayPlanners({
+  timeblocks,
+  dates,
+  start,
+  end,
+  editable,
+  disabled,
+  showBestTimes = false,
+  tentativeMode = false,
+  onBestTimesStatusByDateAction,
+  stickyHeader = false,
+  hideHeaders = false,
+}: {
+  timeblocks: Timeblock[];
+  dates: string[];
+  start: number;
+  end: number;
+  editable: boolean;
+  disabled: boolean;
+  showBestTimes?: boolean;
+  tentativeMode?: boolean;
+  onBestTimesStatusByDateAction?: (status: Record<string, boolean>) => void;
+  stickyHeader?: boolean;
+  hideHeaders?: boolean;
+}) {
+  const { editing } = useTimeBlocking();
+
+  const [bestTimesStatus, setBestTimesStatus] = useState<
+    Record<string, boolean>
+  >({});
+
+  useEffect(() => {
+    if (onBestTimesStatusByDateAction) {
+      onBestTimesStatusByDateAction(bestTimesStatus);
+    }
+  }, [bestTimesStatus, onBestTimesStatusByDateAction]);
+
+  const handleBestTimesStatus = useCallback(
+    (date: string, hasBestTimes: boolean) => {
+      setBestTimesStatus((prev) => {
+        if (prev[date] === hasBestTimes) return prev;
+        return { ...prev, [date]: hasBestTimes };
+      });
+    },
+    []
+  );
+
+  const preventScroll = useCallback((e: Event) => {
+    e.preventDefault();
+    return false;
+  }, []);
+
+  useEffect(() => {
+    const scrollableDiv = document?.querySelector('#scrollable');
+
+    if (!editing.enabled) {
+      scrollableDiv?.removeEventListener('wheel', preventScroll);
+      scrollableDiv?.removeEventListener('touchmove', preventScroll);
+      return;
+    }
+
+    scrollableDiv?.addEventListener('wheel', preventScroll, { passive: false });
+    scrollableDiv?.addEventListener('touchmove', preventScroll, {
+      passive: false,
+    });
+
+    return () => {
+      scrollableDiv?.removeEventListener('wheel', preventScroll);
+      scrollableDiv?.removeEventListener('touchmove', preventScroll);
+    };
+  }, [editing.enabled, preventScroll]);
+
+  // Memoize expensive global availability calculations
+  const { globalMaxAvailable, dayTimeblocksMap } = useMemo(() => {
+    const hourSplits = 4;
+    let globalMaxAvailable = 0;
+    const dayTimeblocksMap = new Map<string, Timeblock[]>();
+
+    dates.forEach((d) => {
+      const dayTimeblocks = timeblocks.filter((tb) => tb.date === d);
+      dayTimeblocksMap.set(d, dayTimeblocks);
+
+      const hourBlocks = Array.from(Array(Math.floor(end + 1 - start)).keys());
+      const slotAvailableCounts: number[] = hourBlocks
+        .map((i) => (i + start) * hourSplits)
+        .flatMap((i) => Array(hourSplits).fill(i))
+        .map((_, i) => {
+          const currentDate = dayjs(d)
+            .hour(Math.floor(i / hourSplits) + start)
+            .minute((i % hourSplits) * 15)
+            .toDate();
+          const userIds = dayTimeblocks
+            .filter((tb) => {
+              const start = dayjs(`${tb.date} ${tb.start_time}`);
+              const end = dayjs(`${tb.date} ${tb.end_time}`);
+              return dayjs(currentDate).isBetween(start, end, null, '[)');
+            })
+            .map((tb) => tb.user_id)
+            .filter(Boolean);
+          const uniqueUserIds = Array.from(new Set(userIds));
+          return uniqueUserIds.length;
+        });
+      const maxAvailable = Math.max(...slotAvailableCounts);
+      if (maxAvailable > globalMaxAvailable) globalMaxAvailable = maxAvailable;
+    });
+
+    return { globalMaxAvailable, dayTimeblocksMap };
+  }, [dates, timeblocks, start, end]);
+
+  return (
+    <div
+      id="scrollable"
+      className="relative flex flex-1 items-start justify-center"
+    >
+      <div className="flex w-full">
+        {dates.map((d) => (
+          <div
+            key={d}
+            className="min-w-0 flex-1"
+            style={{ width: `${100 / dates.length}%` }}
+          >
+            <DayPlanner
+              date={d}
+              start={start}
+              end={end}
+              editable={editable}
+              disabled={disabled}
+              timeblocks={dayTimeblocksMap.get(d) || []}
+              showBestTimes={showBestTimes}
+              tentativeMode={tentativeMode}
+              globalMaxAvailable={globalMaxAvailable}
+              stickyHeader={stickyHeader}
+              hideHeaders={hideHeaders}
+              onBestTimesStatus={(hasBestTimes) =>
+                handleBestTimesStatus(d, hasBestTimes)
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default memo(DayPlanners);

package/src/components/ui/legacy/meet/planId/day-time.tsx

@@ -0,0 +1,32 @@
+import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import PreviewDayTime from './preview-day-time';
+import SelectableDayTime from './selectable-day-time';
+
+export default function DayTime({
+  editable,
+  tentativeMode,
+  onBestTimesStatus,
+  globalMaxAvailable,
+  ...props
+}: {
+  timeblocks: Timeblock[];
+  date: string;
+  start: number;
+  end: number;
+  editable: boolean;
+  disabled: boolean;
+  showBestTimes?: boolean;
+  tentativeMode?: boolean;
+  globalMaxAvailable: number;
+  onBestTimesStatus?: (hasBestTimes: boolean) => void;
+}) {
+  if (editable)
+    return <SelectableDayTime {...props} tentativeMode={tentativeMode} />;
+  return (
+    <PreviewDayTime
+      {...props}
+      globalMaxAvailable={globalMaxAvailable}
+      onBestTimesStatus={onBestTimesStatus}
+    />
+  );
+}

package/src/components/ui/legacy/meet/planId/download-as-png.tsx

@@ -0,0 +1,16 @@
+import { Image } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+
+export default function DownloadAsPNG({ onClick }: { onClick?: () => void }) {
+  return (
+    <Button
+      variant="outline"
+      onClick={onClick}
+      disabled={!onClick}
+      className="w-full md:w-auto"
+    >
+      <Image className="mr-2 h-4 w-4" />
+      Download
+    </Button>
+  );
+}

package/src/components/ui/legacy/meet/planId/email-button.tsx

@@ -0,0 +1,32 @@
+import { Mail } from '@tuturuuu/icons';
+import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import { Button } from '@tuturuuu/ui/button';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+export default function EmailButton({
+  url,
+  plan,
+}: {
+  url: string;
+  plan: MeetTogetherPlan;
+}) {
+  const t = useTranslations();
+
+  return (
+    <Link
+      href={
+        url
+          ? `mailto:?subject=${t('common.meet-together')}: ${plan.name}&body=${t('meet-together-plan-details.mail_p1')},%0A%0A${t('meet-together-plan-details.mail_p2')} "${plan.name}".%0A%0A${t('meet-together-plan-details.mail_p3')} ${url} ${t('meet-together-plan-details.mail_p4')}.%0A%0A${t('meet-together-plan-details.mail_p5')}!`
+          : '#'
+      }
+      target="_blank"
+      className="hidden md:block"
+    >
+      <Button variant="outline" disabled={!url}>
+        <Mail className="mr-1 h-5 w-5" />
+        {t('meet-together-plan-details.send_email')}
+      </Button>
+    </Link>
+  );
+}

package/src/components/ui/legacy/meet/planId/logged-in-as-button.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@tuturuuu/ui/button';
+import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { Separator } from '@tuturuuu/ui/separator';
+import { useTranslations } from 'next-intl';
+import AccountBadge from './account-badge';
+
+export default function LoggedInAsButton() {
+  const t = useTranslations();
+  const {
+    user: guestUser,
+    originalPlatformUser,
+    setDisplayMode,
+  } = useTimeBlocking();
+
+  const user = guestUser ?? originalPlatformUser;
+
+  return (
+    <div className="w-full rounded border border-foreground/20 bg-foreground/5 p-2 text-center md:w-fit md:min-w-64">
+      <div className="text-sm opacity-80">
+        {user?.id
+          ? t('meet-together-plan-details.interacting_as')
+          : t('meet-together-plan-details.viewing_as')}
+      </div>
+      <div
+        className={`${user?.id ? '' : 'opacity-50'} line-clamp-1 break-all font-semibold`}
+      >
+        {user?.display_name ||
+          originalPlatformUser?.email ||
+          t('meet-together-plan-details.anonymous')}{' '}
+      </div>
+
+      {user?.id ? (
+        <AccountBadge
+          type={
+            user?.is_guest === true
+              ? 'GUEST'
+              : originalPlatformUser?.id
+                ? 'PLATFORM'
+                : 'GUEST'
+          }
+        />
+      ) : null}
+      <Separator className="my-2 bg-foreground/20" />
+      <Button
+        className="w-full"
+        onClick={() => {
+          setDisplayMode('account-switcher');
+        }}
+      >
+        {user?.id
+          ? t('meet-together-plan-details.switch_account')
+          : t('common.login')}
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/legacy/meet/planId/page.tsx

@@ -0,0 +1,242 @@
+import { createAdminClient } from '@tuturuuu/supabase/next/server';
+import type { PlanUser } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import type {
+  GuestVoteWithGuestInfo,
+  PollOption,
+  UserVoteWithUserInfo,
+} from '@tuturuuu/types/primitives/Poll';
+import { TimeBlockingProvider } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { getPlan } from '@tuturuuu/utils/plan-helpers';
+import { getCurrentUser } from '@tuturuuu/utils/user-helper';
+import 'dayjs/locale/vi';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+import PlanDetailsClient from './plan-details-client';
+
+interface Props {
+  params: Promise<{
+    planId: string;
+  }>;
+  actorUserId?: string | null;
+  baseUrl: string;
+}
+
+export default async function MeetTogetherPlanDetailsPage({
+  actorUserId,
+  params,
+  baseUrl,
+}: Props) {
+  const { planId } = await params;
+
+  const platformUser = await getCurrentUser();
+  const plan = await getPlan(planId, { actorUserId });
+
+  if (!plan) return notFound();
+
+  const canonicalPlanId = plan.id;
+  if (!canonicalPlanId) return notFound();
+
+  const users: PlanUser[] = await getUsers(canonicalPlanId);
+  const polls = await getPollsForPlan(canonicalPlanId);
+  const timeblocks = await getTimeBlocks(canonicalPlanId);
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <Suspense fallback={null}>
+        {plan.id && (
+          <TimeBlockingProvider
+            key={`${platformUser?.id || 'guest'}-${plan.id}`}
+            platformUser={platformUser}
+            plan={plan}
+            users={users}
+            timeblocks={timeblocks}
+          >
+            <PlanDetailsClient
+              plan={plan}
+              polls={polls}
+              users={users}
+              timeblocks={timeblocks}
+              baseUrl={baseUrl}
+            />
+          </TimeBlockingProvider>
+        )}
+      </Suspense>
+    </div>
+  );
+}
+
+async function getUsers(planId: string) {
+  const sbAdmin = await createAdminClient();
+
+  const { data, error } = await sbAdmin
+    .from('meet_together_users')
+    .select('id:user_id, display_name, is_guest, timeblock_count')
+    .eq('plan_id', planId);
+
+  if (error) {
+    console.error(error);
+    return notFound();
+  }
+
+  return data;
+}
+
+async function getTimeBlocks(planId: string) {
+  const sbAdmin = await createAdminClient();
+
+  const guestQueryBuilder = sbAdmin
+    .from('meet_together_guest_timeblocks')
+    .select('*')
+    .eq('plan_id', planId);
+
+  const userQueryBuilder = sbAdmin
+    .from('meet_together_user_timeblocks')
+    .select('*')
+    .eq('plan_id', planId);
+
+  const [guestTimeBlocks, userTimeBlocks] = await Promise.all([
+    guestQueryBuilder,
+    userQueryBuilder,
+  ]);
+
+  if (guestTimeBlocks.error || userTimeBlocks.error) {
+    console.log(guestTimeBlocks.error, userTimeBlocks.error);
+    return notFound();
+  }
+
+  return [
+    ...guestTimeBlocks.data.map((tb) => ({
+      ...tb,
+      is_guest: true,
+    })),
+    ...userTimeBlocks.data.map((tb) => ({
+      ...tb,
+      is_guest: false,
+    })),
+  ];
+}
+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: PollOption[] = [];
+  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: UserVoteWithUserInfo[] = [];
+  let guestVotes: GuestVoteWithGuestInfo[] = [];
+  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, users!users_poll_votes_user_id_fkey(display_name)'
+      )
+      .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, meet_together_guests!guest_poll_votes_guest_id_fkey(name)'
+      )
+      .in('option_id', optionIds);
+
+    if (uVotesError || gVotesError) {
+      console.log('Error fetching votes');
+      return {
+        error: 'Error fetching votes',
+        polls: null,
+        userVotes: [],
+        guestVotes: [],
+      };
+    }
+
+    // Transform the data to match the expected types
+    userVotes = (uVotes ?? []).map((vote) => ({
+      id: vote.id,
+      option_id: vote.option_id,
+      user_id: vote.user_id,
+      created_at: vote.created_at,
+      user: {
+        display_name: vote.users?.display_name || '',
+      },
+    }));
+
+    guestVotes = (gVotes ?? []).map((vote) => ({
+      id: vote.id,
+      option_id: vote.option_id,
+      guest_id: vote.guest_id,
+      created_at: vote.created_at,
+      guest: {
+        display_name: vote.meet_together_guests?.name || '',
+      },
+    }));
+  }
+
+  // 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,
+  };
+}