From a314b5350e269676e8c39eda4cc7842751b1a7fc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 1 Sep 2020 02:32:06 +0800
Subject: ...

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

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

diff --git a/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
new file mode 100644
index 00000000..8df5ed9d
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
@@ -0,0 +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 "@/services/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;
-- 
cgit v1.2.3


From 817d00d3d26bb30d64b9b103a92cc96cbec14443 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 2 Sep 2020 23:07:31 +0800
Subject: Migrate home page.

---
 Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx    | 2 +-
 Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx | 2 +-
 Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx    | 4 ++--
 Timeline/ClientApp/src/app/views/home/index.tsx            | 7 +++----
 4 files changed, 7 insertions(+), 8 deletions(-)

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

diff --git a/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx b/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx
index 6bff0375..dcd39cbe 100644
--- a/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx
+++ b/Timeline/ClientApp/src/app/views/home/BoardWithUser.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "reactstrap";
+import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { UserWithToken } from "@/services/user";
diff --git a/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx b/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx
index 2e5c3a42..ebfddb50 100644
--- a/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx
+++ b/Timeline/ClientApp/src/app/views/home/BoardWithoutUser.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Col } from "reactstrap";
+import { Row, Col } from "react-bootstrap";
 
 import { TimelineInfo } from "@/services/timeline";
 import { getHttpTimelineClient } from "@/http/timeline";
diff --git a/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
index 8df5ed9d..a3d176e1 100644
--- a/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/app/views/home/TimelineBoard.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
-import { Spinner } from "reactstrap";
 import { Trans } from "react-i18next";
+import { Spinner } from "react-bootstrap";
 
 import { TimelineInfo } from "@/services/timeline";
 import TimelineLogo from "../common/TimelineLogo";
@@ -25,7 +25,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
         if (timelines === "loading") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
-              <Spinner color="primary" />
+              <Spinner variant="primary" animation="border" />
             </div>
           );
         } else if (timelines === "offline") {
diff --git a/Timeline/ClientApp/src/app/views/home/index.tsx b/Timeline/ClientApp/src/app/views/home/index.tsx
index f62cebca..e2e3e6f9 100644
--- a/Timeline/ClientApp/src/app/views/home/index.tsx
+++ b/Timeline/ClientApp/src/app/views/home/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router";
-import { Row, Container, Button, Col } from "reactstrap";
 import { useTranslation } from "react-i18next";
+import { Row, Container, Button, Col } from "react-bootstrap";
 
 import { useUser } from "@/services/user";
 import AppBar from "../common/AppBar";
@@ -35,7 +35,7 @@ const HomePage: React.FC = () => {
   return (
     <>
       <AppBar />
-      <Container fluid style={{ marginTop: "56px" }}>
+      <Container fluid>
         <Row>
           <Col>
             <SearchInput
@@ -48,8 +48,7 @@ const HomePage: React.FC = () => {
               additionalButton={
                 user != null && (
                   <Button
-                    color="success"
-                    outline
+                    variant="outline-success"
                     onClick={() => {
                       setDialog("create");
                     }}
-- 
cgit v1.2.3