From bdc69c18c1986544497b6974ffe5d8e073e4be6d Mon Sep 17 00:00:00 2001 From: crupest 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(null); + + useEffect(() => { + if (post) { + setUrl( + getHttpTimelineClient().generatePostDataUrl( + post.timelineOwnerV2, + post.timelineNameV2, + post.id, + ), + ); + } else { + setUrl(null); + } + }, [post]); + + return ( +
+ +
+ ); +} 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(null); + + useAutoUnsubscribePromise( + () => { + if (post) { + return getHttpTimelineClient().getPostDataAsString( + post.timelineOwnerV2, + post.timelineNameV2, + post.id, + ); + } + }, + setMarkdown, + [post], + ); + + const markdownHtml = useMemo(() => { + if (markdown == null) return null; + return marked.parse(markdown, { + mangle: false, + headerIds: false, + }); + }, [markdown]); + + return ( +
+ {markdownHtml == null ? ( + + ) : ( +
+ )} +
+ ); +} 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(null); + + useAutoUnsubscribePromise( + () => { + if (post) { + return getHttpTimelineClient().getPostDataAsString( + post.timelineOwnerV2, + post.timelineNameV2, + post.id, + ); + } + }, + setText, + [post], + ); + + return ( +
+ {text == null ? ( + + ) : ( +
{text}
+ )} +
+ ); +} 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> = { + "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
; + } + + const type = post.dataList[0].kind; + + if (type in viewMap) { + const View = viewMap[type]; + return ; + } + + return
Unknown post type.
; +} -- cgit v1.2.3 From 901fe3d7c032d284da5c9bce24c4aaee9054c7ac Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 20 Sep 2023 20:16:30 +0800 Subject: Fix lint errors. --- FrontEnd/src/components/Spinner.tsx | 2 +- .../components/hooks/useAutoUnsubscribePromise.ts | 24 ++++++++++++++++++++++ .../components/hooks/useAutoUnsubscribePromise.tsx | 23 --------------------- FrontEnd/src/components/hooks/useWindowLeave.ts | 2 +- .../src/pages/timeline/edit/MarkdownPostEdit.tsx | 17 +++++++-------- .../src/pages/timeline/view/MarkdownPostView.tsx | 3 +-- FrontEnd/src/services/alert.ts | 2 +- 7 files changed, 35 insertions(+), 38 deletions(-) create mode 100644 FrontEnd/src/components/hooks/useAutoUnsubscribePromise.ts delete mode 100644 FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx (limited to 'FrontEnd/src/pages/timeline/view') diff --git a/FrontEnd/src/components/Spinner.tsx b/FrontEnd/src/components/Spinner.tsx index 2752a519..50ccf0b2 100644 --- a/FrontEnd/src/components/Spinner.tsx +++ b/FrontEnd/src/components/Spinner.tsx @@ -23,7 +23,7 @@ function calculateSize(size: SpinnerProps["size"]) { } export interface SpinnerProps extends ComponentPropsWithoutRef<"span"> { - size?: "sm" | "md" | "lg" | number | string; + size?: number | string; className?: string; style?: CSSProperties; } diff --git a/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.ts b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.ts new file mode 100644 index 00000000..01c5a1db --- /dev/null +++ b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.ts @@ -0,0 +1,24 @@ +import { useEffect, DependencyList } from "react"; + +export default function useAutoUnsubscribePromise( + promiseGenerator: () => Promise | null | undefined, + resultHandler: (data: T) => void, + dependencies?: DependencyList | undefined, +) { + useEffect(() => { + let subscribe = true; + const promise = promiseGenerator(); + if (promise) { + void promise.then((data) => { + if (subscribe) { + resultHandler(data); + } + }); + + return () => { + subscribe = false; + }; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [promiseGenerator, resultHandler, ...(dependencies ?? [])]); +} diff --git a/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx deleted file mode 100644 index 78e21151..00000000 --- a/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useEffect, DependencyList } from "react"; - -export default function useAutoUnsubscribePromise( - promiseGenerator: () => Promise | null | undefined, - resultHandler: (data: T) => void, - dependencies?: DependencyList | undefined, -) { - useEffect(() => { - let subscribe = true; - const promise = promiseGenerator(); - if (promise) { - void promise.then((data) => { - if (subscribe) { - resultHandler(data); - } - }); - - return () => { - subscribe = false; - }; - } - }, dependencies); -} diff --git a/FrontEnd/src/components/hooks/useWindowLeave.ts b/FrontEnd/src/components/hooks/useWindowLeave.ts index 08777e30..ecd999d4 100644 --- a/FrontEnd/src/components/hooks/useWindowLeave.ts +++ b/FrontEnd/src/components/hooks/useWindowLeave.ts @@ -18,5 +18,5 @@ export default function useWindowLeave( window.onbeforeunload = null; }; } - }, [allow, message]); + }, [c, allow, message]); } diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx index 692221fd..36a5572b 100644 --- a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx +++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx @@ -19,24 +19,21 @@ class MarkedRenderer extends marked.Renderer { } // Custom image parser for indexed image link. - image(href: string | null, title: string | null, text: string): string { - if (href != null) { - const i = parseInt(href); - if (!isNaN(i) && i > 0 && i <= this.images.length) { - href = this.images[i - 1]; - } + image(href: string, title: string | null, text: string): string { + const i = parseInt(href); + if (!isNaN(i) && i > 0 && i <= this.images.length) { + href = this.images[i - 1]; } return super.image(href, title, text); } } -function generateMarkedOptions(imageUrls: string[]): marked.MarkedOptions { +function generateMarkedOptions(imageUrls: string[]) { return { - mangle: false, - headerIds: false, renderer: new MarkedRenderer(imageUrls), - }; + async: false, + } as const; } function renderHtml(text: string, imageUrls: string[]): string { diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx index caf6eef0..9bb9f980 100644 --- a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx +++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx @@ -40,8 +40,7 @@ export default function MarkdownPostView({ const markdownHtml = useMemo(() => { if (markdown == null) return null; return marked.parse(markdown, { - mangle: false, - headerIds: false, + async: false, }); }, [markdown]); diff --git a/FrontEnd/src/services/alert.ts b/FrontEnd/src/services/alert.ts index 241deab1..0fa37848 100644 --- a/FrontEnd/src/services/alert.ts +++ b/FrontEnd/src/services/alert.ts @@ -1,7 +1,7 @@ import pull from "lodash/pull"; import { I18nText } from "~src/common"; -import { ThemeColor } from "~src/views/common/common"; +import { ThemeColor } from "~src/components/common"; export interface AlertInfo { type?: ThemeColor; -- cgit v1.2.3