[add] Disaster model & list

.env

@@ -1,8 +1,10 @@
-NEXT_PUBLIC_SITE_NAME=open-disaster-rescue
+NEXT_PUBLIC_SITE_NAME=开放救灾系统
 NEXT_PUBLIC_SITE_SUMMARY=Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
 
 NEXT_PUBLIC_SENTRY_DSN =
 SENTRY_ORG =
 SENTRY_PROJECT = 
 
 LARK_API_HOST = https://open.larksuite.com/open-apis/
+NEXT_PUBLIC_BASE_ID = Gc4WbVtmWajgZzssqeAcZw25n7S
+NEXT_PUBLIC_DISASTER_TABLE_ID = tblxpQ9wlidYAJ4f

README.md

@@ -1,4 +1,4 @@
-# open-disaster-rescue
+# Open Disaster Rescue
 
 [Lark][0] project scaffold based on [TypeScript][2], [React][1], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
 

models/Disaster.ts

@@ -0,0 +1,28 @@
+import { BiDataQueryOptions, BiDataTable, TableCellValue } from 'mobx-lark';
+
+import { larkClient } from './Base';
+
+export type Disaster = Record<
+  | 'id'
+  | 'name'
+  | 'englishName'
+  | 'type'
+  | `${'start' | 'end'}edAt`
+  | 'originLocation'
+  | 'coordinate'
+  | 'impactScope',
+  TableCellValue
+>;
+
+export const BASE_ID = process.env.NEXT_PUBLIC_BASE_ID!,
+  DISASTER_TABLE_ID = process.env.NEXT_PUBLIC_DISASTER_TABLE_ID!;
+
+export class DisasterModel extends BiDataTable<Disaster>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  constructor(appId = BASE_ID, tableId = DISASTER_TABLE_ID) {
+    super(appId, tableId);
+  }
+}

pages/index.tsx

@@ -1,48 +1,56 @@
 import { observer } from 'mobx-react';
-import { compose, translator } from 'next-ssr-middleware';
-import { Card, Col, Container, Row } from 'react-bootstrap';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
+import { FC } from 'react';
+import { Badge, Card, Col, Container, Row } from 'react-bootstrap';
+import { formatDate } from 'web-utility';
 
 import { GitCard } from '../components/Git/Card';
 import { PageHead } from '../components/Layout/PageHead';
+import { Disaster, DisasterModel } from '../models/Disaster';
 import { i18n, t } from '../models/Translation';
 import styles from '../styles/Home.module.less';
-import { framework, mainNav } from './api/home';
+import { framework } from './api/home';
 
-export const getServerSideProps = compose(translator(i18n));
+interface HomePageProps {
+  disasters: Disaster[];
+}
 
-const HomePage = observer(() => (
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
+    const disasters = await new DisasterModel().getList({}, 1, 3);
+
+    return { props: { disasters } };
+  },
+);
+
+const HomePage: FC<HomePageProps> = observer(({ disasters }) => (
   <Container as="main" className={styles.main}>
     <PageHead />
 
     <h1 className={`m-0 text-center ${styles.title}`}>
-      {t('welcome_to')}
-      <a className="text-primary mx-2" href="https://nextjs.org">
-        Next.js!
-      </a>
+      {t('open_disaster_rescue')}
     </h1>
 
-    <p className={`text-center fs-4 ${styles.description}`}>
-      {t('get_started_by_editing')}
-      <code className={`mx-2 rounded-3 bg-light ${styles.code}`}>
-        pages/index.tsx
-      </code>
-    </p>
-
-    <Row className="g-4" xs={1} sm={2} md={4}>
-      {mainNav().map(({ link, title, summary }) => (
-        <Col key={link}>
-          <Card
-            className={`h-100 p-4 rounded-3 border ${styles.card}`}
-            tabIndex={-1}
-          >
+    <h2 className="my-4 text-center">{t('disaster_rescue_history')}</h2>
+    <Row className="g-4" xs={1} sm={2} md={3}>
+      {disasters.map(({ id, name, type, startedAt, endedAt }) => (
+        <Col key={id + ''}>
+          <Card className="h-100">
             <Card.Body>
               <Card.Title as="h2" className="fs-4 mb-3">
-                <a href={link} className="stretched-link">
-                  {title} &rarr;
+                <Badge className="me-2">{type + ''}</Badge>
+                <a href={`/disaster/${id}`} className="stretched-link">
+                  {name + ''}
                 </a>
               </Card.Title>
-              <Card.Text className="fs-5">{summary}</Card.Text>
             </Card.Body>
+            <Card.Footer className="text-center">
+              {formatDate(+startedAt!, 'YYYY-MM-DD')} ~{' '}
+              {formatDate(+endedAt!, 'YYYY-MM-DD')}
+            </Card.Footer>
           </Card>
         </Col>
       ))}

public/manifest.json

@@ -1,12 +1,12 @@
 {
-  "name": "open-disaster-rescue scaffold",
-  "short_name": "Next.ts demo",
+  "name": "开放救灾系统",
+  "short_name": "开放救灾",
   "start_url": ".",
   "description": "Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.",
   "scope": "/",
   "display": "standalone",
   "orientation": "any",
-  "lang": "en-US",
+  "lang": "zh-CN",
   "dir": "ltr",
   "theme_color": "rgba(0,0,0,0.5)",
   "background_color": "transparent",

translation/en-US.ts

@@ -1,6 +1,9 @@
 import { IDType } from 'mobx-restful';
 
 export default {
+  open_disaster_rescue: 'Open Disaster Rescue',
+  disaster_rescue_history: 'Disaster Rescue History',
+
   welcome_to: 'Welcome to',
   get_started_by_editing: 'Get started by editing',
   upstream_projects: 'Upstream projects',

translation/zh-CN.ts

@@ -1,6 +1,9 @@
 import { IDType } from 'mobx-restful';
 
 export default {
+  open_disaster_rescue: '开放救灾系统',
+  disaster_rescue_history: '救灾历史',
+
   welcome_to: '欢迎使用',
   get_started_by_editing: '开始你的项目吧，编辑',
   upstream_projects: '上游项目',

translation/zh-TW.ts

@@ -1,6 +1,9 @@
 import { IDType } from 'mobx-restful';
 
 export default {
+  open_disaster_rescue: '開放救災系統',
+  disaster_rescue_history: '救災歷史',
+
   welcome_to: '歡迎使用',
   get_started_by_editing: '開始你的專案吧，編輯',
   upstream_projects: '上游專案',