From 20d5614b6048873d5993ffa493f1b254fe8c73c1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 2 Sep 2020 22:36:04 +0800
Subject: ...

---
 Timeline/ClientApp/package.json                    |   3 +
 Timeline/ClientApp/src/app/index.sass              |   3 -
 Timeline/ClientApp/src/app/views/common/AppBar.tsx | 115 +++++++--------------
 .../ClientApp/src/app/views/common/LoadingPage.tsx |   4 +-
 .../ClientApp/src/app/views/common/SearchInput.tsx |   8 +-
 5 files changed, 45 insertions(+), 88 deletions(-)

diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index 144560e5..81232c71 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -18,12 +18,14 @@
     "lodash": "^4.17.20",
     "pepjs": "^0.5.2",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.2",
     "react-inlinesvg": "^2.0.0",
     "react-responsive": "^8.1.0",
     "react-router": "^5.2.0",
+    "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
     "reactstrap": "^8.5.1",
     "regenerator-runtime": "^0.13.7",
@@ -71,6 +73,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-responsive": "^8.0.2",
     "@types/react-router": "^5.1.8",
+    "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "^5.1.5",
     "@types/reactstrap": "^8.5.1",
     "@types/webpack-env": "^1.15.2",
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index efac4df5..92f8efaf 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -33,9 +33,6 @@ small
   right: 0
   bottom: 0
 
-.app-bar
-  z-index: 1035
-
 .avatar
   width: 60px
 
diff --git a/Timeline/ClientApp/src/app/views/common/AppBar.tsx b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
index aefe0f27..464747c0 100644
--- a/Timeline/ClientApp/src/app/views/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/views/common/AppBar.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import { useHistory, matchPath } from "react-router";
-import { Link, NavLink } from "react-router-dom";
-import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap";
-import { useMediaQuery } from "react-responsive";
 import { useTranslation } from "react-i18next";
+import { LinkContainer } from "react-router-bootstrap";
+import { Navbar, Nav } from "react-bootstrap";
 
 import { useUser, useAvatar } from "@/services/user";
 
@@ -11,95 +9,54 @@ import TimelineLogo from "./TimelineLogo";
 import BlobImage from "./BlobImage";
 
 const AppBar: React.FC = (_) => {
-  const history = useHistory();
   const user = useUser();
   const avatar = useAvatar(user?.username);
 
   const { t } = useTranslation();
 
-  const isUpMd = useMediaQuery({
-    minWidth: getComputedStyle(document.documentElement).getPropertyValue(
-      "--breakpoint-md"
-    ),
-  });
-
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const toggleMenu = React.useCallback((): void => {
-    setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);
-  }, []);
-
   const isAdministrator = user && user.administrator;
 
-  const rightArea = (
-    <div className="ml-auto mr-2">
-      {user != null ? (
-        <NavLink to={`/users/${user.username}`}>
-          <BlobImage
-            className="avatar small rounded-circle bg-white"
-            blob={avatar}
-          />
-        </NavLink>
-      ) : (
-        <NavLink className="text-light" to="/login">
-          {t("nav.login")}
-        </NavLink>
-      )}
-    </div>
-  );
-
   return (
-    <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">
-      <Link to="/" className="navbar-brand d-flex align-items-center">
-        <TimelineLogo style={{ height: "1em" }} />
-        Timeline
-      </Link>
-
-      {isUpMd ? null : rightArea}
+    <Navbar bg="primary" variant="dark" expand="md">
+      <LinkContainer to="/">
+        <Navbar.Brand className="d-flex align-items-center">
+          <TimelineLogo style={{ height: "1em" }} />
+          Timeline
+        </Navbar.Brand>
+      </LinkContainer>
 
-      <NavbarToggler onClick={toggleMenu} />
-      <Collapse isOpen={isMenuOpen} navbar>
-        <Nav className="mr-auto" navbar>
-          <NavItem
-            className={
-              matchPath(history.location.pathname, "/settings")
-                ? "active"
-                : undefined
-            }
-          >
-            <NavLink className="nav-link" to="/settings">
-              {t("nav.settings")}
-            </NavLink>
-          </NavItem>
+      <Navbar.Toggle />
+      <Navbar.Collapse>
+        <Nav className="mr-auto">
+          <LinkContainer to="/settings">
+            <Nav.Link>{t("nav.settings")}</Nav.Link>
+          </LinkContainer>
 
-          <NavItem
-            className={
-              matchPath(history.location.pathname, "/about")
-                ? "active"
-                : undefined
-            }
-          >
-            <NavLink className="nav-link" to="/about">
-              {t("nav.about")}
-            </NavLink>
-          </NavItem>
+          <LinkContainer to="/about">
+            <Nav.Link>{t("nav.about")}</Nav.Link>
+          </LinkContainer>
 
           {isAdministrator && (
-            <NavItem
-              className={
-                matchPath(history.location.pathname, "/admin")
-                  ? "active"
-                  : undefined
-              }
-            >
-              <NavLink className="nav-link" to="/admin">
-                Administration
-              </NavLink>
-            </NavItem>
+            <LinkContainer to="/admin">
+              <Nav.Link>Administration</Nav.Link>
+            </LinkContainer>
+          )}
+        </Nav>
+        <Nav className="ml-auto mr-2">
+          {user != null ? (
+            <LinkContainer to={`/users/${user.username}`}>
+              <BlobImage
+                className="avatar small rounded-circle bg-white"
+                blob={avatar}
+              />
+            </LinkContainer>
+          ) : (
+            <LinkContainer to="/login">
+              <Nav.Link>{t("nav.login")}</Nav.Link>
+            </LinkContainer>
           )}
         </Nav>
-        {isUpMd ? rightArea : null}
-      </Collapse>
+      </Navbar.Collapse>
     </Navbar>
   );
 };
diff --git a/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
index a849126d..590fafa0 100644
--- a/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
+++ b/Timeline/ClientApp/src/app/views/common/LoadingPage.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Spinner } from "reactstrap";
+import { Spinner } from "react-bootstrap";
 
 const LoadingPage: React.FC = () => {
   return (
     <div className="position-fixed w-100 h-100 d-flex justify-content-center align-items-center">
-      <Spinner style={{ height: "2.5rem", width: "2.5rem" }} color="primary" />
+      <Spinner variant="primary" animation="border" />
     </div>
   );
 };
diff --git a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
index 5a0b0eaa..12e61a5c 100644
--- a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
+++ b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import clsx from "clsx";
-import { Spinner, Input, Button } from "reactstrap";
 import { useTranslation } from "react-i18next";
+import { Spinner, Form, Button } from "react-bootstrap";
 
 export interface SearchInputProps {
   value: string;
@@ -37,7 +37,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
 
   return (
     <div className={clsx("form-inline my-2", props.className)}>
-      <Input
+      <Form.Control
         className="mr-sm-2"
         value={props.value}
         onChange={onInputChange}
@@ -49,9 +49,9 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
       </div>
       <div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
         {props.loading ? (
-          <Spinner />
+          <Spinner variant="primary" animation="border" />
         ) : (
-          <Button outline color="primary" onClick={props.onButtonClick}>
+          <Button variant="outline-primary" onClick={props.onButtonClick}>
             {props.buttonText ?? t("search")}
           </Button>
         )}
-- 
cgit v1.2.3