From e83da106a259f4a8ab11324eceef2c15a9a08bf0 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 18 Mar 2021 21:01:07 +0800
Subject: ...

---
 .../app/views/timeline-common/MarkdownPostEdit.tsx | 147 ++++++++++--------
 .../timeline-common/TimelinePostContentView.tsx    |   2 +-
 .../app/views/timeline-common/TimelinePostEdit.tsx | 167 ++++++++++-----------
 .../app/views/timeline-common/timeline-common.sass |   8 +
 4 files changed, 176 insertions(+), 148 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
index 079344e1..d43077b4 100644
--- a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -1,24 +1,31 @@
 import React from "react";
-import { Nav, Form } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
+import TabPages from "../common/TabPages";
 import TimelinePostBuilder from "@/services/TimelinePostBuilder";
 
 export interface MarkdownPostEditProps {
   timeline: string;
   onPosted: (post: HttpTimelinePostInfo) => void;
+  onPostError: () => void;
+  onClose: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
   timeline: timelineName,
   onPosted,
+  onClose,
+  onPostError,
+  className,
+  style,
 }) => {
   const { t } = useTranslation();
 
-  const [tab, setTab] = React.useState<"text" | "images" | "preview">("text");
-
   const [process, setProcess] = React.useState<boolean>(false);
 
   const [text, _setText] = React.useState<string>("");
@@ -48,68 +55,88 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
   }, []);
 
   const send = async (): Promise<void> => {
-    const dataList = await getBuilder().build();
-    const post = await getHttpTimelineClient().postPost(timelineName, {
-      dataList,
-    });
-    onPosted(post);
+    setProcess(true);
+    try {
+      const dataList = await getBuilder().build();
+      const post = await getHttpTimelineClient().postPost(timelineName, {
+        dataList,
+      });
+      onPosted(post);
+      onClose();
+    } catch (e) {
+      setProcess(false);
+      onPostError();
+    }
   };
 
   return (
-    <div>
-      <Nav variant="tabs" className="my-2">
-        <Nav.Item>
-          <Nav.Link
-            active={tab === "text"}
-            onClick={() => {
-              setTab("text");
-            }}
-          >
-            {t("edit")}
-          </Nav.Link>
-        </Nav.Item>
-        <Nav.Item>
-          <Nav.Link
-            active={tab === "images"}
-            onClick={() => {
-              setTab("images");
-            }}
-          >
-            {t("image")}
-          </Nav.Link>
-        </Nav.Item>
-        <Nav.Item>
-          <Nav.Link
-            active={tab === "preview"}
-            onClick={() => {
-              setTab("preview");
-            }}
-          >
-            {t("preview")}
-          </Nav.Link>
-        </Nav.Item>
-      </Nav>
-      <div>
-        {(() => {
-          if (tab === "text") {
-            return (
-              <Form.Control
-                as="textarea"
-                value={text}
-                disabled={process}
-                onChange={(event) => {
-                  getBuilder().setMarkdownText(event.currentTarget.value);
+    <TabPages
+      className={className}
+      style={style}
+      pageContainerClassName="py-2"
+      actions={
+        <>
+          <div className="flat-button text-danger mr-2" onClick={onClose}>
+            {t("operationDialog.cancel")}
+          </div>
+          <div className="flat-button text-primary" onClick={send}>
+            {t("timeline.send")}
+          </div>
+        </>
+      }
+      pages={[
+        {
+          id: "text",
+          tabText: "edit",
+          page: (
+            <Form.Control
+              as="textarea"
+              value={text}
+              disabled={process}
+              onChange={(event) => {
+                getBuilder().setMarkdownText(event.currentTarget.value);
+              }}
+            />
+          ),
+        },
+        {
+          id: "images",
+          tabText: "image",
+          page: (
+            <div className="timeline-markdown-post-edit-page">
+              {images.map((image) => (
+                <img
+                  key={image.url}
+                  src={image.url}
+                  className="timeline-markdown-post-edit-image"
+                />
+              ))}
+              <Form.File
+                label={t("chooseImage")}
+                accept="image/*"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  const { files } = event.currentTarget;
+                  if (files != null && files.length !== 0) {
+                    getBuilder().appendImage(files[0]);
+                  }
                 }}
+                disabled={process}
               />
-            );
-          } else if (tab === "images") {
-            return <div></div>;
-          } else {
-            return <div dangerouslySetInnerHTML={{ __html: previewHtml }} />;
-          }
-        })()}
-      </div>
-    </div>
+            </div>
+          ),
+        },
+        {
+          id: "preview",
+          tabText: "preview",
+          page: (
+            <div
+              className="markdown-container timeline-markdown-post-edit-page"
+              dangerouslySetInnerHTML={{ __html: previewHtml }}
+            />
+          ),
+        },
+      ]}
+    />
   );
 };
 
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
index d836d1db..58fae4c7 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
@@ -152,7 +152,7 @@ const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
     }
     return (
       <div
-        className={className}
+        className={clsx(className, "markdown-container")}
         style={style}
         dangerouslySetInnerHTML={{
           __html: markdownHtml,
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index 025b41c0..a474d2f6 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -18,6 +18,7 @@ import { base64 } from "@/http/common";
 import BlobImage from "../common/BlobImage";
 import LoadingButton from "../common/LoadingButton";
 import { PopupMenu } from "../common/Menu";
+import MarkdownPostEdit from "./MarkdownPostEdit";
 
 interface TimelinePostEditTextProps {
   text: string;
@@ -121,26 +122,21 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
 
   const [process, setProcess] = React.useState<boolean>(false);
 
-  const [kind, setKind] = React.useState<PostKind>("text");
+  const [kind, setKind] = React.useState<Exclude<PostKind, "markdown">>("text");
+  const [showMarkdown, setShowMarkdown] = React.useState<boolean>(false);
 
   const [text, setText] = React.useState<string>("");
-  const [markdown, setMarkdown] = React.useState<string>("");
   const [image, setImage] = React.useState<File | null>(null);
 
   const draftTextLocalStorageKey = `timeline.${timeline.name}.postDraft.text`;
-  const draftMarkdownLocalStorageKey = `timeline.${timeline.name}.postDraft.markdown`;
 
   React.useEffect(() => {
     setText(window.localStorage.getItem(draftTextLocalStorageKey) ?? "");
-    setMarkdown(
-      window.localStorage.getItem(draftMarkdownLocalStorageKey) ?? ""
-    );
-  }, [draftTextLocalStorageKey, draftMarkdownLocalStorageKey]);
+  }, [draftTextLocalStorageKey]);
 
   const canSend =
     (kind === "text" && text.length !== 0) ||
-    (kind === "image" && image != null) ||
-    (kind === "markdown" && markdown.length !== 0);
+    (kind === "image" && image != null);
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const containerRef = React.useRef<HTMLDivElement>(null!);
@@ -160,6 +156,13 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
     };
   });
 
+  const onPostError = (): void => {
+    pushAlert({
+      type: "danger",
+      message: "timeline.sendPostFailed",
+    });
+  };
+
   const onSend = async (): Promise<void> => {
     setProcess(true);
 
@@ -171,12 +174,6 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
           data: await base64(text),
         };
         break;
-      case "markdown":
-        requestData = {
-          contentType: "text/markdown",
-          data: await base64(markdown),
-        };
-        break;
       case "image":
         if (image == null) {
           throw new UiLogicError(
@@ -201,20 +198,14 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
           if (kind === "text") {
             setText("");
             window.localStorage.removeItem(draftTextLocalStorageKey);
-          } else if (kind === "markdown") {
-            setMarkdown("");
-            window.localStorage.removeItem(draftMarkdownLocalStorageKey);
           }
           setProcess(false);
           setKind("text");
           onPosted(data);
         },
         (_) => {
-          pushAlert({
-            type: "danger",
-            message: "timeline.sendPostFailed",
-          });
           setProcess(false);
+          onPostError();
         }
       );
   };
@@ -224,73 +215,75 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
       ref={containerRef}
       className={clsx("container-fluid bg-light", className)}
     >
-      <Row>
-        <Col className="px-1 py-1">
-          {(() => {
-            if (kind === "text") {
-              return (
-                <TimelinePostEditText
-                  className="w-100 h-100 timeline-post-edit"
-                  text={text}
-                  disabled={process}
-                  onChange={(t) => {
-                    setText(t);
-                    window.localStorage.setItem(draftTextLocalStorageKey, t);
-                  }}
-                />
-              );
-            } else if (kind === "image") {
-              return (
-                <TimelinePostEditImage onSelect={setImage} disabled={process} />
-              );
-            } else if (kind === "markdown") {
-              return (
-                <TimelinePostEditText
-                  className="w-100 h-100 timeline-post-edit"
-                  text={markdown}
-                  disabled={process}
-                  onChange={(t) => {
-                    setMarkdown(t);
-                    window.localStorage.setItem(
-                      draftMarkdownLocalStorageKey,
-                      t
-                    );
-                  }}
+      {showMarkdown ? (
+        <MarkdownPostEdit
+          className="w-100"
+          onClose={() => setShowMarkdown(false)}
+          timeline={timeline.name}
+          onPosted={onPosted}
+          onPostError={onPostError}
+        />
+      ) : (
+        <Row>
+          <Col className="px-1 py-1">
+            {(() => {
+              if (kind === "text") {
+                return (
+                  <TimelinePostEditText
+                    className="w-100 h-100 timeline-post-edit"
+                    text={text}
+                    disabled={process}
+                    onChange={(t) => {
+                      setText(t);
+                      window.localStorage.setItem(draftTextLocalStorageKey, t);
+                    }}
+                  />
+                );
+              } else if (kind === "image") {
+                return (
+                  <TimelinePostEditImage
+                    onSelect={setImage}
+                    disabled={process}
+                  />
+                );
+              }
+            })()}
+          </Col>
+          <Col xs="auto" className="align-self-end m-1">
+            <div className="d-block text-center mt-1 mb-2">
+              <PopupMenu
+                items={(["text", "image", "markdown"] as const).map((kind) => ({
+                  type: "button",
+                  text: `timeline.post.type.${kind}`,
+                  iconClassName: postKindIconClassNameMap[kind],
+                  onClick: () => {
+                    if (kind === "markdown") {
+                      setShowMarkdown(true);
+                    } else {
+                      setKind(kind);
+                    }
+                  },
+                }))}
+              >
+                <i
+                  className={clsx(
+                    postKindIconClassNameMap[kind],
+                    "icon-button large"
+                  )}
                 />
-              );
-            }
-          })()}
-        </Col>
-        <Col xs="auto" className="align-self-end m-1">
-          <div className="d-block text-center mt-1 mb-2">
-            <PopupMenu
-              items={(["text", "image", "markdown"] as const).map((kind) => ({
-                type: "button",
-                text: `timeline.post.type.${kind}`,
-                iconClassName: postKindIconClassNameMap[kind],
-                onClick: () => {
-                  setKind(kind);
-                },
-              }))}
+              </PopupMenu>
+            </div>
+            <LoadingButton
+              variant="primary"
+              onClick={onSend}
+              disabled={!canSend}
+              loading={process}
             >
-              <i
-                className={clsx(
-                  postKindIconClassNameMap[kind],
-                  "icon-button large"
-                )}
-              />
-            </PopupMenu>
-          </div>
-          <LoadingButton
-            variant="primary"
-            onClick={onSend}
-            disabled={!canSend}
-            loading={process}
-          >
-            {t("timeline.send")}
-          </LoadingButton>
-        </Col>
-      </Row>
+              {t("timeline.send")}
+            </LoadingButton>
+          </Col>
+        </Row>
+      )}
     </div>
   );
 };
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 43c4d0f7..04318674 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -170,3 +170,11 @@ $timeline-line-color-current: #36c2e6
   top: 56px
   right: 0
   margin: 0.5em
+
+.timeline-markdown-post-edit-page
+  overflow: scroll
+  max-height: 300px
+
+.timeline-markdown-post-edit-image
+  max-width: 100%
+  max-height: 200px
-- 
cgit v1.2.3