[refactor] redesign Hackathon Team page

components/Activity/Hackathon/TeamMember.module.less

@@ -0,0 +1,45 @@
+@import './theme.less';
+
+.card {
+  // prettier-ignore
+  .panel-card();
+  padding: 1.35rem;
+}
+
+.avatar {
+  flex-shrink: 0;
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.14);
+  border: 1px solid rgba(44, 232, 255, 0.26);
+  width: 4rem;
+  height: 4rem;
+}
+
+.name {
+  margin: 0;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.05rem;
+}
+
+.link {
+  color: @cyan;
+  text-decoration: none;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+.summary {
+  margin: 1rem 0 0;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.skill {
+  // prettier-ignore
+  .chip();
+  padding: 0.45rem 0.72rem;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.82rem;
+}

components/Activity/Hackathon/TeamMember.tsx

@@ -0,0 +1,48 @@
+import { Avatar } from 'idea-react';
+import { TableCellUser } from 'mobx-lark';
+import { FC } from 'react';
+import { Card } from 'react-bootstrap';
+
+import { Member } from '../../../models/Hackathon';
+import styles from './TeamMember.module.less';
+
+export const TeamMemberCard: FC<Member> = ({ person, githubAccount, summary, skills }) => {
+  const member = person as TableCellUser;
+  const githubName = githubAccount as string;
+  const memberSummary = summary as string;
+  const memberSkills = (skills as string[]).slice(0, 6);
+
+  return (
+    <Card className={`${styles.card} h-100`} body>
+      <div className="d-flex align-items-center gap-3">
+        <Avatar className={styles.avatar} src={member?.avatar_url} />
+        <div>
+          <h3 className={styles.name}>{member?.name || '-'}</h3>
+
+          {githubName && (
+            <a
+              className={styles.link}
+              href={`https://github.com/${githubName}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              @{githubName}
+            </a>
+          )}
+        </div>
+      </div>
+
+      {memberSummary && <p className={styles.summary}>{memberSummary}</p>}
+
+      {memberSkills[0] && (
+        <ul className="d-flex flex-wrap gap-2 mt-3 mb-0 p-0 list-unstyled">
+          {memberSkills.map(skill => (
+            <li key={skill} className={styles.skill}>
+              {skill}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Card>
+  );
+};

components/Activity/Hackathon/constant.ts

@@ -1,5 +1,4 @@
 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';
@@ -336,7 +335,6 @@ export const buildProjectItems = (
   { projects, activity }: { projects: Project[]; activity: Activity },
 ) =>
   projects.map(({ id, name, score, summary, createdBy, members }) => {
-    const creator = createdBy as TableCellUser | undefined;
     const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
 
     return {
@@ -346,11 +344,10 @@ export const buildProjectItems = (
       score: scoreText,
       description: (summary as string) || '',
       meta: [
-        creator
+        createdBy
           ? {
               label: t('created_by'),
-              value: creator.name || '—',
-              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
+              value: (createdBy as TableCellUser)?.name || '—',
             }
           : { 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,5 +1,5 @@
 import { TableCellValue, TableFormView } from 'mobx-lark';
-import { formatDate } from 'web-utility';
+import { Day, formatDate } from 'web-utility';
 
 import type { HackathonScheduleTone } from './Schedule';
 import { i18n, I18nKey } from '../../../models/Translation';
@@ -33,14 +33,124 @@ 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 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 +185,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,12 +205,12 @@ 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;
 
-  return Math.max(1, Math.ceil((end - start) / (24 * 60 * 60 * 1000)));
+  return Math.max(1, Math.ceil((end - start) / Day));
 };
 
 export const normalizeAgendaType = (value?: TableCellValue) =>

components/Activity/ProductCard.tsx

@@ -68,7 +68,11 @@ export const ProductCard: FC<ProductCardProps> = observer(
           </div>
         )}
 
-        <time className="text-dark opacity-75 small" dateTime={new Date(createdAt as number).toJSON()}>
+        <time
+          suppressHydrationWarning
+          className="text-dark opacity-75 small"
+          dateTime={new Date(createdAt as number).toJSON()}
+        >
           📅 {formatDate(createdAt as number)}
         </time>
       </Card.Body>