From bdc69c18c1986544497b6974ffe5d8e073e4be6d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 14 Sep 2023 18:58:44 +0800
Subject: ...

---
 FrontEnd/src/pages/timeline/view/ImagePostView.css |  0
 FrontEnd/src/pages/timeline/view/ImagePostView.tsx | 38 ++++++++++++++
 .../src/pages/timeline/view/MarkdownPostView.css   |  4 ++
 .../src/pages/timeline/view/MarkdownPostView.tsx   | 60 ++++++++++++++++++++++
 .../src/pages/timeline/view/PlainTextPostView.css  |  0
 .../src/pages/timeline/view/PlainTextPostView.tsx  | 50 ++++++++++++++++++
 .../timeline/view/TimelinePostContentView.tsx      | 37 +++++++++++++
 7 files changed, 189 insertions(+)
 create mode 100644 FrontEnd/src/pages/timeline/view/ImagePostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/ImagePostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/MarkdownPostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/PlainTextPostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx

(limited to 'FrontEnd/src/pages/timeline/view')

diff --git a/FrontEnd/src/pages/timeline/view/ImagePostView.css b/FrontEnd/src/pages/timeline/view/ImagePostView.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/pages/timeline/view/ImagePostView.tsx b/FrontEnd/src/pages/timeline/view/ImagePostView.tsx
new file mode 100644
index 00000000..85179475
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/ImagePostView.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import "./ImagePostView.css";
+
+interface ImagePostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function ImagePostView({ post, className }: ImagePostViewProps) {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (post) {
+      setUrl(
+        getHttpTimelineClient().generatePostDataUrl(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        ),
+      );
+    } else {
+      setUrl(null);
+    }
+  }, [post]);
+
+  return (
+    <div className={classNames("timeline-view-image-container", className)}>
+      <img src={url ?? undefined} className="timeline-view-image" />
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.css b/FrontEnd/src/pages/timeline/view/MarkdownPostView.css
new file mode 100644
index 00000000..48a893eb
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.css
@@ -0,0 +1,4 @@
+.timeline-view-markdown img {
+  max-width: 100%;
+  max-height: 200px;
+}
diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
new file mode 100644
index 00000000..caf6eef0
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
@@ -0,0 +1,60 @@
+import { useMemo, useState } from "react";
+import { marked } from "marked";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import { useAutoUnsubscribePromise } from "~src/components/hooks";
+import Skeleton from "~src/components/Skeleton";
+
+import "./MarkdownPostView.css";
+
+interface MarkdownPostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function MarkdownPostView({
+  post,
+  className,
+}: MarkdownPostViewProps) {
+  const [markdown, setMarkdown] = useState<string | null>(null);
+
+  useAutoUnsubscribePromise(
+    () => {
+      if (post) {
+        return getHttpTimelineClient().getPostDataAsString(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        );
+      }
+    },
+    setMarkdown,
+    [post],
+  );
+
+  const markdownHtml = useMemo<string | null>(() => {
+    if (markdown == null) return null;
+    return marked.parse(markdown, {
+      mangle: false,
+      headerIds: false,
+    });
+  }, [markdown]);
+
+  return (
+    <div className={classNames("timeline-view-markdown-container", className)}>
+      {markdownHtml == null ? (
+        <Skeleton />
+      ) : (
+        <div
+          className="timeline-view-markdown"
+          dangerouslySetInnerHTML={{ __html: markdownHtml }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/PlainTextPostView.css b/FrontEnd/src/pages/timeline/view/PlainTextPostView.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
new file mode 100644
index 00000000..b964187d
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import Skeleton from "~src/components/Skeleton";
+import { useAutoUnsubscribePromise } from "~src/components/hooks";
+
+import "./PlainTextPostView.css";
+
+interface PlainTextPostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function PlainTextPostView({
+  post,
+  className,
+}: PlainTextPostViewProps) {
+  const [text, setText] = useState<string | null>(null);
+
+  useAutoUnsubscribePromise(
+    () => {
+      if (post) {
+        return getHttpTimelineClient().getPostDataAsString(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        );
+      }
+    },
+    setText,
+    [post],
+  );
+
+  return (
+    <div
+      className={classNames("timeline-view-plain-text-container", className)}
+    >
+      {text == null ? (
+        <Skeleton />
+      ) : (
+        <div className="timeline-view-plain-text">{text}</div>
+      )}
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx b/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx
new file mode 100644
index 00000000..851a9a33
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx
@@ -0,0 +1,37 @@
+import ImagePostView from "./ImagePostView";
+import MarkdownPostView from "./MarkdownPostView";
+import PlainTextPostView from "./PlainTextPostView";
+
+import type { HttpTimelinePostInfo } from "~src/http/timeline";
+
+interface TimelinePostContentViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
+  "text/plain": PlainTextPostView,
+  "text/markdown": MarkdownPostView,
+  "image/png": ImagePostView,
+  "image/jpeg": ImagePostView,
+  "image/gif": ImagePostView,
+  "image/webp": ImagePostView,
+};
+
+export default function TimelinePostContentView({
+  post,
+  className,
+}: TimelinePostContentViewProps) {
+  if (post == null) {
+    return <div />;
+  }
+
+  const type = post.dataList[0].kind;
+
+  if (type in viewMap) {
+    const View = viewMap[type];
+    return <View post={post} className={className} />;
+  }
+
+  return <div>Unknown post type.</div>;
+}
-- 
cgit v1.2.3