refactor(home): address hero carousel review feedback

Author: dethan3

components/Activity/HeroCarousel.module.less

@@ -1,5 +1,6 @@
 .heroCarousel {
   --hero-carousel-offset: 4.125rem;
+
   background: #050816;
   min-height: calc(100vh - var(--hero-carousel-offset) - 2.5rem);
 

components/Activity/HeroCarousel.tsx

@@ -8,7 +8,7 @@ import { I18nContext } from '../../models/Translation';
 import { LarkImage } from '../LarkImage';
 import styles from './HeroCarousel.module.less';
 
-const MAX_ITEMS = 5;
+export const HERO_CAROUSEL_ITEMS = 3;
 
 const timestampOf = (value: unknown) => {
   if (typeof value === 'number') return value;
@@ -21,12 +21,12 @@ const timestampOf = (value: unknown) => {
   return 0;
 };
 
-const formatDateLabel = (value: unknown) => {
+const formatDateLabel = (value: unknown, locale: string) => {
   const timestamp = timestampOf(value);
 
   if (!timestamp) return '';
 
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(locale, {
     month: 'short',
     day: 'numeric',
   }).format(timestamp);
@@ -40,10 +40,9 @@ const locationTextOf = ({ city, location }: Activity) =>
 const descriptionOf = (activity: Activity) =>
   (activity.summary as string) || locationTextOf(activity) || (activity.type as string) || '';
 
-export const HeroCarousel: FC = () => {
-  const { t } = useContext(I18nContext);
+export const HeroCarousel: FC<{ activities: Activity[] }> = ({ activities }) => {
+  const { currentLanguage, t } = useContext(I18nContext);
   const [heroStyle, setHeroStyle] = useState<CSSProperties>();
-  const [activities, setActivities] = useState<Activity[]>([]);
   const [descriptionRows, setDescriptionRows] = useState(3);
   const infoBodyStyle = { minHeight: 'clamp(0rem, 38vh, 24rem)' } as CSSProperties;
 
@@ -64,31 +63,6 @@ export const HeroCarousel: FC = () => {
     return () => observer?.disconnect();
   }, []);
 
-  useEffect(() => {
-    let mounted = true;
-
-    (async () => {
-      try {
-        const model = new ActivityModel();
-        const data = await model.getAll();
-        const latestActivities = data
-          .filter(({ name }) => Boolean(name))
-          .sort(
-            ({ startTime: left }, { startTime: right }) => timestampOf(right) - timestampOf(left),
-          )
-          .slice(0, MAX_ITEMS);
-
-        if (mounted) setActivities(latestActivities);
-      } catch (err) {
-        console.error('Failed to load activities:', err);
-      }
-    })();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
   useEffect(() => {
     const syncDescriptionRows = () => {
       setDescriptionRows(window.innerWidth <= 767.98 ? 4 : 3);
@@ -122,10 +96,10 @@ export const HeroCarousel: FC = () => {
         className={`${styles.carousel} h-100`}
       >
         {activities.map(activity => {
-          const href = (activity.link as string) || ActivityModel.getLink(activity);
+          const href = ActivityModel.getLink(activity);
           const hosts = ((activity.host as string[]) || []).slice(0, 2);
           const locationText = locationTextOf(activity);
-          const dateText = formatDateLabel(activity.startTime);
+          const dateText = formatDateLabel(activity.startTime, currentLanguage);
           const title = (activity.name as string) || t('activity');
           const description = descriptionOf(activity);
           const image = activity.cardImage || activity.image;

models/Activity.ts

@@ -55,7 +55,7 @@ export class ActivityModel extends BiDataTable<Activity>() {
     link,
     database,
   }: Pick<Activity, 'id' | 'type' | 'alias' | 'link' | 'database'>) =>
-    database ? `/${type?.toString().toLowerCase() || 'activity'}/${alias || id}` : link + '';
+    database ? `/${type?.toString().toLowerCase() || 'activity'}/${alias || id}` : link?.toString();
 
   extractFields({
     id,

pages/index.tsx

@@ -1,22 +1,33 @@
 import { observer } from 'mobx-react';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Card, Col, Row } from 'react-bootstrap';
 import { renderToStaticMarkup } from 'react-dom/server';
 import ReactTyped from 'react-typed-component';
 
 import { HeroCarousel } from '../components/Activity/HeroCarousel';
 import { PageHead } from '../components/Layout/PageHead';
+import { Activity, ActivityModel } from '../models/Activity';
 import { I18nContext } from '../models/Translation';
 import styles from '../styles/Home.module.less';
 
-const HomePage: FC = observer(() => {
+interface HomePageProps {
+  activities: Activity[];
+}
+
+export const getServerSideProps = compose<{}, HomePageProps>(cache(), errorLogger, async () => {
+  const activities = await new ActivityModel().getList({}, 1, 3);
+  return { props: JSON.parse(JSON.stringify({ activities })) };
+});
+
+const HomePage: FC<HomePageProps> = observer(({ activities }) => {
   const { t } = useContext(I18nContext);
 
   return (
     <>
       <PageHead />
 
-      <HeroCarousel />
+      <HeroCarousel activities={activities} />
 
       <section
         className={`flex-fill d-flex flex-column justify-content-center align-items-center bg-secondary bg-gradient text-dark bg-opacity-10 ${styles.main}`}