Create home page for offline.

1 files changed, 24 insertions, 4 deletions

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