Migrate to react-bootstrap.

2 files changed, 61 insertions, 80 deletions

diff --git a/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
index 1dd2ee8b..ffa2218b 100644
--- a/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
+++ b/Timeline/ClientApp/src/app/views/user/ChangeAvatarDialog.tsx
@@ -1,14 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Modal,
-  ModalHeader,
-  Row,
-  Button,
-  ModalBody,
-  ModalFooter,
-} from "reactstrap";
 import { AxiosError } from "axios";
+import { Modal, Row, Button } from "react-bootstrap";
 
 import { UiLogicError } from "@/common";
 
@@ -56,7 +49,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
 
   const closeDialog = props.close;
 
-  const toggle = React.useCallback((): void => {
+  const close = React.useCallback((): void => {
     if (!(state === "uploading")) {
       closeDialog();
     }
@@ -163,23 +156,25 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
   };
 
   return (
-    <Modal isOpen={props.open} toggle={toggle}>
-      <ModalHeader> {t("userPage.dialogChangeAvatar.title")}</ModalHeader>
+    <Modal show={props.open} onHide={close}>
+      <Modal.Header>
+        <Modal.Title> {t("userPage.dialogChangeAvatar.title")}</Modal.Title>
+      </Modal.Header>
       {(() => {
         if (state === "select") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row>{t("userPage.dialogChangeAvatar.prompt.select")}</Row>
                 <Row>
                   <input type="file" accept="image/*" onChange={onSelectFile} />
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "crop") {
@@ -188,7 +183,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
           }
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row className="justify-content-center">
                   <ImageCropper
                     clip={clip}
@@ -198,12 +193,12 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                   />
                 </Row>
                 <Row>{t("userPage.dialogChangeAvatar.prompt.crop")}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onCropPrevious}>
+                <Button variant="secondary" onClick={onCropPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
                 <Button
@@ -215,87 +210,87 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
                 >
                   {t("operationDialog.nextStep")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "processcrop") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row>
                   {t("userPage.dialogChangeAvatar.prompt.processingCrop")}
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onPreviewPrevious}>
+                <Button variant="secondary" onClick={onPreviewPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "preview") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row>{t("userPage.dialogChangeAvatar.prompt.preview")}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="secondary" onClick={onPreviewPrevious}>
+                <Button variant="secondary" onClick={onPreviewPrevious}>
                   {t("operationDialog.previousStep")}
                 </Button>
-                <Button color="primary" onClick={upload}>
+                <Button variant="primary" onClick={upload}>
                   {t("userPage.dialogChangeAvatar.upload")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else if (state === "uploading") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row>{t("userPage.dialogChangeAvatar.prompt.uploading")}</Row>
-              </ModalBody>
-              <ModalFooter></ModalFooter>
+              </Modal.Body>
+              <Modal.Footer></Modal.Footer>
             </>
           );
         } else if (state === "success") {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 <Row className="p-4 text-success">
                   {t("operationDialog.success")}
                 </Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="success" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="success" onClick={close}>
                   {t("operationDialog.ok")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         } else {
           return (
             <>
-              <ModalBody className="container">
+              <Modal.Body className="container">
                 {createPreviewRow()}
                 <Row className="text-danger">{trueMessage}</Row>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="secondary" onClick={toggle}>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={close}>
                   {t("operationDialog.cancel")}
                 </Button>
-                <Button color="primary" onClick={upload}>
+                <Button variant="primary" onClick={upload}>
                   {t("operationDialog.retry")}
                 </Button>
-              </ModalFooter>
+              </Modal.Footer>
             </>
           );
         }
diff --git a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
index 1a111877..f1878b5c 100644
--- a/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/views/user/UserInfoCard.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 import clsx from "clsx";
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Button,
-} from "reactstrap";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
+import { Dropdown, Button } from "react-bootstrap";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 import { useAvatar } from "@/services/user";
@@ -42,24 +36,16 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
     return () => subscription.unsubscribe();
   });
 
-  const [manageDropdownOpen, setManageDropdownOpen] = React.useState<boolean>(
-    false
-  );
-  const toggleManageDropdown = React.useCallback(
-    (): void => setManageDropdownOpen((old) => !old),
-    []
-  );
-
   return (
     <div
       ref={containerRef}
-      className={clsx("rounded border bg-light p-2", props.className)}
+      className={clsx("rounded border bg-light p-2 clearfix", props.className)}
       onTransitionEnd={notifyHeight}
     >
       <BlobImage
         blob={avatar}
         onLoad={notifyHeight}
-        className="avatar large mr-2 mb-2 rounded-circle float-left"
+        className="avatar large mr-2 rounded-circle float-left"
       />
       <div>
         {props.timeline.owner.nickname}
@@ -73,27 +59,27 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       </small>
       <div className="text-right mt-2">
         {onManage != null ? (
-          <Dropdown isOpen={manageDropdownOpen} toggle={toggleManageDropdown}>
-            <DropdownToggle outline color="primary">
+          <Dropdown>
+            <Dropdown.Toggle variant="outline-primary">
               {t("timeline.manage")}
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={() => onManage("nickname")}>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={() => onManage("nickname")}>
                 {t("timeline.manageItem.nickname")}
-              </DropdownItem>
-              <DropdownItem onClick={() => onManage("avatar")}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => onManage("avatar")}>
                 {t("timeline.manageItem.avatar")}
-              </DropdownItem>
-              <DropdownItem onClick={() => onManage("property")}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={() => onManage("property")}>
                 {t("timeline.manageItem.property")}
-              </DropdownItem>
-              <DropdownItem onClick={props.onMember}>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={props.onMember}>
                 {t("timeline.manageItem.member")}
-              </DropdownItem>
-            </DropdownMenu>
+              </Dropdown.Item>
+            </Dropdown.Menu>
           </Dropdown>
         ) : (
-          <Button color="primary" outline onClick={props.onMember}>
+          <Button variant="outline-primary" onClick={props.onMember}>
             {t("timeline.memberButton")}
           </Button>
         )}