diff options
Diffstat (limited to 'FrontEnd/src/pages/timeline/view')
7 files changed, 188 insertions, 0 deletions
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 --- /dev/null +++ b/FrontEnd/src/pages/timeline/view/ImagePostView.css 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..9bb9f980 --- /dev/null +++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx @@ -0,0 +1,59 @@ +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, { + async: 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 --- /dev/null +++ b/FrontEnd/src/pages/timeline/view/PlainTextPostView.css 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>; +} |