diff options
| author | crupest <crupest@outlook.com> | 2020-08-25 00:05:01 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-08-25 00:05:01 +0800 |
| commit | 738a17688ca481db62755295f8b732200ca12511 (patch) | |
| tree | 034b470eff54a9f725cd9e472966cf554cd2ee26 /Timeline/ClientApp/src/app/home/TimelineBoard.tsx | |
| parent | b9b7334ac5d5cf83b6206af024ddd4c55a6e07da (diff) | |
| parent | fe687f82d9c5af2869b679222bec11b1a00b9ee9 (diff) | |
| download | timeline-738a17688ca481db62755295f8b732200ca12511.tar.gz timeline-738a17688ca481db62755295f8b732200ca12511.tar.bz2 timeline-738a17688ca481db62755295f8b732200ca12511.zip | |
Merge pull request #154 from crupest/toolchain
Upgrade toolchain of front end.
Diffstat (limited to 'Timeline/ClientApp/src/app/home/TimelineBoard.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/home/TimelineBoard.tsx | 147 |
1 files changed, 73 insertions, 74 deletions
diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx index 8f8f6387..21dcac3f 100644 --- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx +++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx @@ -1,74 +1,73 @@ -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';
-
-import TimelineLogo from '../common/TimelineLogo';
-import UserTimelineLogo from '../common/UserTimelineLogo';
-
-export interface TimelineBoardProps {
- title?: string;
- timelines: TimelineInfo[] | 'offline' | 'loading';
- onReload: () => void;
- className?: string;
-}
-
-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 === '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) => {
- const { name } = timeline;
- const isPersonal = name.startsWith('@');
- const url = isPersonal
- ? `/users/${timeline.owner.username}`
- : `/timelines/${name}`;
- return (
- <div key={name} className="timeline-board-item">
- {isPersonal ? (
- <UserTimelineLogo className="icon" />
- ) : (
- <TimelineLogo className="icon" />
- )}
- <Link to={url}>{name}</Link>
- </div>
- );
- });
- }
- })()}
- </div>
- );
-};
-
-export default TimelineBoard;
+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"; +import TimelineLogo from "../common/TimelineLogo"; +import UserTimelineLogo from "../common/UserTimelineLogo"; + +export interface TimelineBoardProps { + title?: string; + timelines: TimelineInfo[] | "offline" | "loading"; + onReload: () => void; + className?: string; +} + +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 === "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) => { + const { name } = timeline; + const isPersonal = name.startsWith("@"); + const url = isPersonal + ? `/users/${timeline.owner.username}` + : `/timelines/${name}`; + return ( + <div key={name} className="timeline-board-item"> + {isPersonal ? ( + <UserTimelineLogo className="icon" /> + ) : ( + <TimelineLogo className="icon" /> + )} + <Link to={url}>{name}</Link> + </div> + ); + }); + } + })()} + </div> + ); +}; + +export default TimelineBoard; |