aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/app/views/timeline-common
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/app/views/timeline-common')
-rw-r--r--FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx187
-rw-r--r--FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx2
-rw-r--r--FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx167
-rw-r--r--FrontEnd/src/app/views/timeline-common/timeline-common.sass8
4 files changed, 276 insertions, 88 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
new file mode 100644
index 00000000..f4351db0
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/MarkdownPostEdit.tsx
@@ -0,0 +1,187 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { Prompt } from "react-router";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import FlatButton from "../common/FlatButton";
+import TabPages from "../common/TabPages";
+import TimelinePostBuilder from "@/services/TimelinePostBuilder";
+import ConfirmDialog from "../common/ConfirmDialog";
+
+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 [canLeave, setCanLeave] = React.useState<boolean>(true);
+
+ const [process, setProcess] = React.useState<boolean>(false);
+
+ const [
+ showLeaveConfirmDialog,
+ setShowLeaveConfirmDialog,
+ ] = React.useState<boolean>(false);
+
+ const [text, _setText] = React.useState<string>("");
+ const [images, _setImages] = React.useState<{ file: File; url: string }[]>(
+ []
+ );
+ const [previewHtml, _setPreviewHtml] = React.useState<string>("");
+
+ const _builder = React.useRef<TimelinePostBuilder | null>(null);
+
+ const getBuilder = (): TimelinePostBuilder => {
+ if (_builder.current == null) {
+ const builder = new TimelinePostBuilder(() => {
+ setCanLeave(builder.isEmpty);
+ _setText(builder.text);
+ _setImages(builder.images);
+ _setPreviewHtml(builder.renderHtml());
+ });
+ _builder.current = builder;
+ }
+ return _builder.current;
+ };
+
+ React.useEffect(() => {
+ return () => {
+ getBuilder().dispose();
+ };
+ }, []);
+
+ React.useEffect(() => {
+ window.onbeforeunload = () => {
+ if (!canLeave) {
+ return t("timeline.confirmLeave");
+ }
+ };
+
+ return () => {
+ window.onbeforeunload = null;
+ };
+ }, [canLeave, t]);
+
+ const send = async (): Promise<void> => {
+ setProcess(true);
+ try {
+ const dataList = await getBuilder().build();
+ const post = await getHttpTimelineClient().postPost(timelineName, {
+ dataList,
+ });
+ onPosted(post);
+ onClose();
+ } catch (e) {
+ setProcess(false);
+ onPostError();
+ }
+ };
+
+ return (
+ <>
+ <Prompt when={!canLeave} message={t("timeline.confirmLeave")} />
+ <TabPages
+ className={className}
+ style={style}
+ pageContainerClassName="py-2"
+ actions={
+ <>
+ <FlatButton
+ className="mr-2"
+ variant="danger"
+ onClick={() => {
+ if (canLeave) {
+ onClose();
+ } else {
+ setShowLeaveConfirmDialog(true);
+ }
+ }}
+ >
+ {t("operationDialog.cancel")}
+ </FlatButton>
+ <FlatButton onClick={send} disabled={canLeave}>
+ {t("timeline.send")}
+ </FlatButton>
+ </>
+ }
+ 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}
+ />
+ </div>
+ ),
+ },
+ {
+ id: "preview",
+ tabText: "preview",
+ page: (
+ <div
+ className="markdown-container timeline-markdown-post-edit-page"
+ dangerouslySetInnerHTML={{ __html: previewHtml }}
+ />
+ ),
+ },
+ ]}
+ />
+ {showLeaveConfirmDialog && (
+ <ConfirmDialog
+ onClose={() => setShowLeaveConfirmDialog(false)}
+ onConfirm={onClose}
+ title="timeline.dropDraft"
+ body="timeline.confirmLeave"
+ />
+ )}
+ </>
+ );
+};
+
+export default MarkdownPostEdit;
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