From d2b3d37724a999d4cc78c46157593267e29d184e Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Tue, 18 Jun 2024 18:18:00 +0200 Subject: [feature/frontend] Reports frontend v2 (#3022) * use apiutil + paging in admin processor+handlers * we're making it happen * fix little whoopsie * styling for report list * don't youuuu forget about meee don't don't don't don't * last bits * sanitize content before showing in report statuses * update report docs --- web/source/settings/components/status.tsx | 242 ++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 web/source/settings/components/status.tsx (limited to 'web/source/settings/components/status.tsx') diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx new file mode 100644 index 000000000..56b061d39 --- /dev/null +++ b/web/source/settings/components/status.tsx @@ -0,0 +1,242 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React from "react"; +import { useVerifyCredentialsQuery } from "../lib/query/oauth"; +import { MediaAttachment, Status as StatusType } from "../lib/types/status"; +import sanitize from "sanitize-html"; + +export function FakeStatus({ children }) { + const { data: account = { + avatar: "/assets/default_avatars/GoToSocial_icon1.png", + display_name: "", + username: "" + } } = useVerifyCredentialsQuery(); + + return ( +
+
+
+ + +
+
Display name
+
+ {account.display_name.trim().length > 0 ? account.display_name : account.username} +
+
Username
+
@{account.username}
+
+ +
+
+
+
+
+ {children} +
+
+
+
+ ); +} + +export function Status({ status }: { status: StatusType }) { + return ( +
+ + + + + Open this status (opens in new tab) + +
+ ); +} + +function StatusHeader({ status }: { status: StatusType }) { + const author = status.account; + + return ( +
+
+ +
+
+ ); +} + +function StatusBody({ status }: { status: StatusType }) { + let content: string; + if (status.content.length === 0) { + content = "[no content set]"; + } else { + // HTML has already been through + // the instance sanitizer by now, + // but do it again just in case. + content = sanitize(status.content); + } + + return ( +
+
+ + + { status.spoiler_text + ? status.spoiler_text + " " + : "[no content warning set] " + } + + + Toggle content visibility + + +
+
+ +
+ ); +} + +function StatusMedia({ status }: { status: StatusType }) { + if (status.media_attachments.length === 0) { + return null; + } + + const count = status.media_attachments.length; + const aria_label = count === 1 ? "1 attachment" : `${count} attachments`; + const oddOrEven = count % 2 === 0 ? "even" : "odd"; + const single = count === 1 ? " single" : ""; + + return ( +
+ { status.media_attachments.map((media) => { + return ( + + ); + })} +
+ ); +} + +function StatusMediaEntry({ media }: { media: MediaAttachment }) { + return ( +
+
+ + + + + + + {media.description} + + + {media.description} + +
+
+ ); +} + +function StatusFooter({ status }: { status: StatusType }) { + return ( + + ); +} -- cgit v1.2.3