[add] Time Range component

[fix] some SSR detail errors
[fix] Sentry SSL error in Docker

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:18-slim AS base
 RUN apt-get update && \
-    apt-get install curl -y --no-install-recommends
+    apt-get install ca-certificates curl -y --no-install-recommends
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

components/Activity/Agenda/Card.tsx

@@ -4,12 +4,12 @@ import { observer } from 'mobx-react';
 import dynamic from 'next/dynamic';
 import { Component } from 'react';
 import { Badge, Carousel, Col, Container, Row } from 'react-bootstrap';
-import { formatDate } from 'web-utility';
 
 import { blobURLOf } from '../../../models/Base';
 import { LarkImage } from '../../Base/LarkImage';
 import { ScoreBar } from '../../Base/ScoreBar';
 import { TextScrollableBox } from '../../Base/TextScrollableBox';
+import { TimeRange } from '../../Base/TimeRange';
 import { ActivityPeople } from '../People';
 import { AgendaToolbarProps } from './Toolbar';
 
@@ -98,8 +98,7 @@ export class AgendaCard extends Component<AgendaToolbarProps> {
             </h3>
             <ul className="list-unstyled flex-fill d-flex flex-column justify-content-between gap-2">
               <li>
-                🕒 {formatDate(+startTime!, 'YYYY-MM-DD')} ~{' '}
-                {formatDate(+endTime!, 'YYYY-MM-DD')}
+                <TimeRange {...{ startTime, endTime }} />
               </li>
               <li>{(mentorOrganizations as string[])?.join(' ')}</li>
 

components/Base/TimeRange.tsx

@@ -0,0 +1,15 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC } from 'react';
+import { formatDate } from 'web-utility';
+
+export const TimeRange: FC<Record<'startTime' | 'endTime', TableCellValue>> = ({
+  startTime,
+  endTime,
+}) =>
+  startTime &&
+  endTime && (
+    <>
+      🕒 {formatDate(+startTime!, 'YYYY-MM-DD')} ~{' '}
+      {formatDate(+endTime!, 'YYYY-MM-DD')}
+    </>
+  );

models/Activity/index.ts

@@ -1,3 +1,4 @@
+import { HTTPError } from 'koajax';
 import { action, computed, makeObservable, observable } from 'mobx';
 import {
   BiDataTable,
@@ -185,13 +186,21 @@ export class ActivityModel extends BiDataTable<Activity>() {
     return database ? `/activity/${alias || id}` : link + '';
   }
 
+  @toggle('downloading')
   async getOneByAlias(alias: string) {
     const { body } = await this.client.get<LarkPageData<TableRecord<Activity>>>(
       `${this.baseURI}?${buildURLData({
         filter: makeSimpleFilter({ alias }, '='),
       })}`,
     );
-    const [item] = body!.data!.items;
+    const [item] = body!.data!.items || [];
+
+    if (!item)
+      throw new HTTPError(`Activity "${alias}" is not found`, {
+        status: 404,
+        statusText: 'Not found',
+        headers: {},
+      });
     return (this.currentOne = this.normalize(item));
   }
 

models/Product/Article.ts

@@ -1,3 +1,4 @@
+import { HTTPError } from 'koajax';
 import {
   BiDataTable,
   LarkPageData,
@@ -67,7 +68,15 @@ export class ArticleModel extends BiDataTable<Article>() {
         filter: makeSimpleFilter({ alias }, '='),
       })}`,
     );
-    const item = this.normalize(body!.data!.items[0]);
+    const [rawItem] = body!.data!.items || [];
+
+    if (!rawItem)
+      throw new HTTPError(`Article "${alias}" is not found`, {
+        status: 404,
+        statusText: 'Not found',
+        headers: {},
+      });
+    const item = this.normalize(rawItem);
 
     const path = `article/${
       (item.link as string).split('/').slice(-1)[0]

pages/activity/[id]/agenda/[agendaId]/index.tsx

@@ -21,7 +21,7 @@ import {
   DropdownButton,
   Row,
 } from 'react-bootstrap';
-import { buildURLData, formatDate } from 'web-utility';
+import { buildURLData } from 'web-utility';
 
 import {
   ActivityPeople,
@@ -33,6 +33,7 @@ import {
 import { CommentBox } from '../../../../../components/Base/CommentBox';
 import { QRCodeButton } from '../../../../../components/Base/QRCodeButton';
 import { ScoreBar } from '../../../../../components/Base/ScoreBar';
+import { TimeRange } from '../../../../../components/Base/TimeRange';
 import PageHead from '../../../../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../../../../models/Activity';
 import { Agenda } from '../../../../../models/Activity/Agenda';
@@ -128,8 +129,7 @@ export default class AgendaDetailPage extends PureComponent<AgendaDetailPageProp
 
           <div className="text-success">{forum as string}</div>
           <div>
-            🕒 {formatDate(+startTime!, 'YYYY-MM-DD')} ~{' '}
-            {formatDate(+endTime!, 'YYYY-MM-DD')}
+            <TimeRange {...{ startTime, endTime }} />
           </div>
         </div>
 

pages/community/pioneer.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import { InferGetServerSidePropsType } from 'next';
-import { compose, errorLogger, translator } from 'next-ssr-middleware';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Breadcrumb, Container } from 'react-bootstrap';
 
@@ -11,6 +11,7 @@ import { i18n } from '../../models/Base/Translation';
 import { PersonnelModel } from '../../models/Personnel';
 
 export const getServerSideProps = compose<{}, Pick<PersonnelModel, 'group'>>(
+  cache(),
   errorLogger,
   translator(i18n),
   async () => {

pages/user/[uuid].tsx

@@ -3,7 +3,7 @@ import { TimeDistance } from 'idea-react';
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
-import { cache, compose } from 'next-ssr-middleware';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { PureComponent } from 'react';
 import { Breadcrumb, Button, Col, Container, Row } from 'react-bootstrap';
 
@@ -15,7 +15,7 @@ import userStore, { UserModel } from '../../models/Base/User';
 export const getServerSideProps = compose<
   { uuid: string },
   { user: User; checkEvents: CheckEvent[] }
->(cache(), async ({ params: { uuid } = {} }) => {
+>(cache(), errorLogger, async ({ params: { uuid } = {} }) => {
   const user = await new UserModel().getOne(uuid!);
 
   const checkEvents = await new CheckEventModel().getList({ user: user.id });