From 00b4f38a4c6f3c1039873cc8e274e24f207d81a7 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 7 Aug 2020 18:27:04 +0800
Subject: Create home page for offline.

---
 Timeline/ClientApp/src/app/home/OfflineBoard.tsx | 62 ++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 Timeline/ClientApp/src/app/home/OfflineBoard.tsx

(limited to 'Timeline/ClientApp/src/app/home/OfflineBoard.tsx')

diff --git a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx
new file mode 100644
index 00000000..ca6d2a26
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Trans } from 'react-i18next';
+
+import { getAllCachedTimelineNames } from '../data/timeline';
+
+import UserTimelineLogo from '../common/UserTimelineLogo';
+import TimelineLogo from '../common/TimelineLogo';
+
+export interface OfflineBoardProps {
+  onReload: () => void;
+}
+
+const OfflineBoard: React.FC<OfflineBoardProps> = ({ onReload }) => {
+  const [timelines, setTimelines] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    let subscribe = true;
+    void getAllCachedTimelineNames().then((t) => {
+      if (subscribe) setTimelines(t);
+    });
+    return () => {
+      subscribe = false;
+    };
+  });
+
+  return (
+    <>
+      <Trans i18nKey="home.offlinePrompt">
+        0
+        <a
+          href="#"
+          onClick={(e) => {
+            onReload();
+            e.preventDefault();
+          }}
+        >
+          1
+        </a>
+        2
+      </Trans>
+      {timelines.map((timeline) => {
+        const isPersonal = timeline.startsWith('@');
+        const url = isPersonal
+          ? `/users/${timeline.slice(1)}`
+          : `/timelines/${timeline}`;
+        return (
+          <div key={timeline} className="timeline-board-item">
+            {isPersonal ? (
+              <UserTimelineLogo className="icon" />
+            ) : (
+              <TimelineLogo className="icon" />
+            )}
+            <Link to={url}>{timeline}</Link>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default OfflineBoard;
-- 
cgit v1.2.3