Feat/hackathon team page

README.md

@@ -22,10 +22,13 @@
 ## 开始
 
 ```bash
+pnpm run sync-env
 pnpm install
 pnpm dev
 ```
 
+`pnpm run sync-env` 会在你显式执行时，从 `Open-Source-Bazaar/key-vault` 同步当前项目所需的私有环境文件。出于安全考虑，仓库不会在 `pnpm install` 阶段自动下载 `.env.local`。
+
 可访问 http://localhost:3000.
 
 [1]: https://github.com/idea2app/Lark-Next-Bootstrap-ts

components/Activity/Hackathon/Hero.tsx

@@ -80,30 +80,30 @@ const useCountdown = (countdownTo?: string) => {
 
     return Number.isFinite(value) ? value : NaN;
   }, [countdownTo]);
-  const [now, setNow] = useState<number | null>(null);
+  const [clientNow, setClientNow] = useState<number | null>(null);
 
   useEffect(() => {
     if (!Number.isFinite(target)) return;
 
-    setNow(Date.now());
+    setClientNow(Date.now());
 
-    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    const timer = window.setInterval(() => setClientNow(Date.now()), 1000);
 
     return () => window.clearInterval(timer);
   }, [target]);
 
   return useMemo(() => {
-    if (!Number.isFinite(target) || now === null) return ['--', '--', '--', '--'];
+    if (!Number.isFinite(target) || clientNow === null) return ['--', '--', '--', '--'];
 
-    const rest = Math.max(0, target - now);
+    const rest = Math.max(0, target - clientNow);
     const totalSeconds = Math.floor(rest / 1000);
     const days = Math.floor(totalSeconds / 86400);
     const hours = Math.floor((totalSeconds % 86400) / 3600);
     const minutes = Math.floor((totalSeconds % 3600) / 60);
     const seconds = totalSeconds % 60;
 
     return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
-  }, [now, target]);
+  }, [clientNow, target]);
 };
 
 const splitHeroTitle = (name: string, subtitle: string) => {

components/Activity/Hackathon/constant.ts

@@ -1,5 +1,3 @@
-import { TableCellUser } from 'mobx-lark';
-
 import { Activity, ActivityModel } from '../../../models/Activity';
 import { Agenda, Organization, Person, Prize, Project, Template } from '../../../models/Hackathon';
 import { i18n } from '../../../models/Translation';
@@ -13,6 +11,7 @@ import {
   formatPeriod,
   normalizeAgendaType,
   previewText,
+  userOf,
 } from './utility';
 
 export const RequiredTableKeys = [
@@ -336,7 +335,7 @@ export const buildProjectItems = (
   { projects, activity }: { projects: Project[]; activity: Activity },
 ) =>
   projects.map(({ id, name, score, summary, createdBy, members }) => {
-    const creator = createdBy as TableCellUser | undefined;
+    const creator = userOf(createdBy);
     const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
 
     return {
@@ -350,7 +349,6 @@ export const buildProjectItems = (
           ? {
               label: t('created_by'),
               value: creator.name || '—',
-              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
             }
           : { label: t('created_by'), value: '—' },
         {

components/Activity/Hackathon/useLiveCountdownState.ts

@@ -0,0 +1,44 @@
+import { TableCellValue } from 'mobx-lark';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { CountdownWindow, firstTextOf, resolveCountdownState, timeOf } from './utility';
+
+export const useLiveCountdownState = <T extends CountdownWindow>(
+  items: T[],
+  startTime?: TableCellValue,
+  endTime?: TableCellValue,
+) => {
+  const [referenceTime, setReferenceTime] = useState<number | null>(null);
+  const refreshReferenceTime = useCallback(() => setReferenceTime(Date.now()), []);
+
+  useEffect(() => refreshReferenceTime(), [refreshReferenceTime]);
+
+  const countdownState = useMemo(
+    () =>
+      referenceTime === null
+        ? {
+            nextItem: undefined as T | undefined,
+            countdownTo: firstTextOf(startTime) || firstTextOf(endTime) || undefined,
+          }
+        : resolveCountdownState(items, referenceTime, startTime, endTime),
+    [endTime, items, referenceTime, startTime],
+  );
+
+  useEffect(() => {
+    if (referenceTime === null) return;
+
+    const targetTime = timeOf(countdownState.countdownTo);
+
+    if (!Number.isFinite(targetTime)) return;
+
+    const delay = Math.min(2_147_483_647, Math.max(1000, targetTime - Date.now() + 1000));
+    const timer = window.setTimeout(
+      refreshReferenceTime,
+      delay,
+    );
+
+    return () => window.clearTimeout(timer);
+  }, [countdownState.countdownTo, referenceTime, refreshReferenceTime]);
+
+  return countdownState;
+};

components/Activity/Hackathon/utility.ts

@@ -1,4 +1,4 @@
-import { TableCellValue, TableFormView } from 'mobx-lark';
+import { TableCellUser, TableCellValue, TableFormView } from 'mobx-lark';
 import { formatDate } from 'web-utility';
 
 import type { HackathonScheduleTone } from './Schedule';
@@ -33,14 +33,133 @@ export const buildAgendaTypeLabelMap = ({
 export const isPublicForm = ({ shared_limit }: TableFormView) =>
   ['anyone_editable'].includes(shared_limit as string);
 
+type NamedLike = { name?: string | null };
+type TextLike = TableCellValue | NamedLike | null | undefined;
+type TextListLike = TextLike | TextLike[];
+
+const textOf = (value: TextLike) => {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'boolean') return '';
+
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const {
+      name,
+      text,
+      value: primitiveValue,
+      displayName,
+      display_name,
+      title,
+      content,
+      plainText,
+      plain_text,
+      user,
+    } = value as NamedLike & {
+      text?: string | null;
+      value?: string | number | null;
+      displayName?: string | null;
+      display_name?: string | null;
+      title?: string | null;
+      content?: string | null;
+      plainText?: string | null;
+      plain_text?: string | null;
+      user?: {
+        name?: string | null;
+        displayName?: string | null;
+        display_name?: string | null;
+      } | null;
+    };
+    const candidate = [
+      name,
+      text,
+      primitiveValue,
+      displayName,
+      display_name,
+      title,
+      content,
+      plainText,
+      plain_text,
+      user?.displayName,
+      user?.display_name,
+      user?.name,
+    ].find(item => item !== null && item !== undefined && `${item}`.trim());
+
+    return candidate === null || candidate === undefined ? '' : `${candidate}`.trim();
+  }
+
+  const text = value.toString().trim();
+
+  return text === '[object Object]' ? '' : text;
+};
+
+export const firstTextOf = (value: TextListLike) =>
+  (Array.isArray(value) ? value.map(textOf).find(Boolean) : textOf(value)) || '';
+
+export const textListOf = (value: TextListLike) =>
+  (Array.isArray(value) ? value : [value]).map(textOf).filter(Boolean);
+
+export const relationNameOf = (value: TextListLike) => firstTextOf(value);
+
+export const userOf = (value?: TableCellValue | TableCellUser) =>
+  value && typeof value === 'object' && !Array.isArray(value) && 'name' in value
+    ? (value as TableCellUser)
+    : undefined;
+
 export const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
 
 export const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
   [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
 
+export const timeOf = (value?: TableCellValue) => {
+  if (value instanceof Date) return value.getTime();
+
+  if (typeof value === 'number') return Number.isFinite(value) ? value : NaN;
+
+  const text = firstTextOf(value as TextListLike);
+
+  if (!text) return NaN;
+
+  const time = Date.parse(text);
+
+  return Number.isFinite(time) ? time : NaN;
+};
+
+export interface CountdownWindow {
+  startedAt?: TableCellValue;
+  endedAt?: TableCellValue;
+}
+
+const countdownTextOf = (value?: TableCellValue) => {
+  const time = timeOf(value);
+
+  return Number.isFinite(time) ? new Date(time).toISOString() : undefined;
+};
+
+export const resolveCountdownState = <T extends CountdownWindow>(
+  items: T[],
+  referenceTime: number,
+  startTime?: TableCellValue,
+  endTime?: TableCellValue,
+) => {
+  const nextItem = items.find(({ startedAt, endedAt }) => {
+    const started = timeOf(startedAt);
+    const ended = timeOf(endedAt);
+
+    return Number.isFinite(started) && Number.isFinite(ended) && referenceTime <= ended;
+  });
+  const nextStartedAt = timeOf(nextItem?.startedAt);
+  const nextCountdownTarget =
+    Number.isFinite(nextStartedAt) && nextStartedAt > referenceTime
+      ? nextItem?.startedAt
+      : nextItem?.endedAt;
+  const fallbackCountdownTarget = timeOf(startTime) > referenceTime ? startTime : endTime;
+  const countdownTo = countdownTextOf(nextCountdownTarget) || countdownTextOf(fallbackCountdownTarget);
+
+  return { nextItem, countdownTo };
+};
+
 export const previewText = (items: TableCellValue[], fallback: string) =>
   items
-    .map(item => item?.toString())
+    .map(item => textOf(item))
     .filter(Boolean)
     .slice(0, 2)
     .join(' · ') || fallback;
@@ -75,10 +194,10 @@ export const compactSummaryOf = (
 ) => {
   const source = Array.isArray(text)
     ? text
-        .map(item => item?.toString())
+        .map(item => textOf(item))
         .filter(Boolean)
         .join(' · ')
-    : text?.toString() || '';
+    : textOf(text);
   const normalized = source.replace(/\s+/g, ' ').trim();
 
   if (!normalized) return fallback;
@@ -95,8 +214,8 @@ export const dateKeyOf = (value?: TableCellValue) => {
 export const compactDateKeyOf = (value?: TableCellValue) => dateKeyOf(value).replace('-', '.');
 
 export const daysBetween = (startedAt?: TableCellValue, endedAt?: TableCellValue) => {
-  const start = new Date((startedAt as string) || '').getTime();
-  const end = new Date((endedAt as string) || '').getTime();
+  const start = timeOf(startedAt);
+  const end = timeOf(endedAt);
 
   if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return 0;