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/TimelineBoard.tsx | 28 +++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

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

diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
index 2e017bf7..8f8f6387 100644
--- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import { Spinner } from 'reactstrap';
+import { Trans } from 'react-i18next';
 
 import { TimelineInfo } from '../data/timeline';
 
@@ -10,25 +11,44 @@ import UserTimelineLogo from '../common/UserTimelineLogo';
 
 export interface TimelineBoardProps {
   title?: string;
-  timelines?: TimelineInfo[];
+  timelines: TimelineInfo[] | 'offline' | 'loading';
+  onReload: () => void;
   className?: string;
 }
 
-const TimelineBoard: React.FC<TimelineBoardProps> = props => {
+const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
   const { title, timelines, className } = props;
 
   return (
     <div className={clsx('timeline-board', className)}>
       {title != null && <h3 className="text-center">{title}</h3>}
       {(() => {
-        if (timelines == null) {
+        if (timelines === 'loading') {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
               <Spinner color="primary" />
             </div>
           );
+        } else if (timelines === 'offline') {
+          return (
+            <div className="d-flex flex-grow-1 justify-content-center align-items-center">
+              <Trans i18nKey="loadFailReload" parent="div">
+                0
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    props.onReload();
+                    e.preventDefault();
+                  }}
+                >
+                  1
+                </a>
+                2
+              </Trans>
+            </div>
+          );
         } else {
-          return timelines.map(timeline => {
+          return timelines.map((timeline) => {
             const { name } = timeline;
             const isPersonal = name.startsWith('@');
             const url = isPersonal
-- 
cgit v1.2.3