From d05c2aaba46c278c88fea8a74abe0dc5a38a77c4 Mon Sep 17 00:00:00 2001 From: tobi Date: Thu, 28 Nov 2024 13:16:14 +0100 Subject: [PATCH] start messing about with frontend --- .../subscriptions/common.tsx | 40 +++ .../subscriptions/detail.tsx | 119 +++++++++ .../subscriptions/index.tsx | 235 ++++++++++++++++++ .../domain-permissions/subscriptions/new.tsx | 90 +++++++ .../settings/views/moderation/router.tsx | 3 + 5 files changed, 487 insertions(+) create mode 100644 web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx create mode 100644 web/source/settings/views/moderation/domain-permissions/subscriptions/detail.tsx create mode 100644 web/source/settings/views/moderation/domain-permissions/subscriptions/index.tsx create mode 100644 web/source/settings/views/moderation/domain-permissions/subscriptions/new.tsx diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx new file mode 100644 index 000000000..2849451e7 --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx @@ -0,0 +1,40 @@ +/* + 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"; + +export function DomainPermissionExcludeHelpText() { + return ( + <> + + ); +} + +export function DomainPermissionExcludeDocsLink() { + return ( + + Learn more about domain permission subscriptions (opens in a new tab) + + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/detail.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/detail.tsx new file mode 100644 index 000000000..4e14ec3ad --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/detail.tsx @@ -0,0 +1,119 @@ +/* + 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 { useLocation, useParams } from "wouter"; +import Loading from "../../../../components/loading"; +import { useBaseUrl } from "../../../../lib/navigation/util"; +import BackButton from "../../../../components/back-button"; +import { Error as ErrorC } from "../../../../components/error"; +import UsernameLozenge from "../../../../components/username-lozenge"; +import { useDeleteDomainPermissionExcludeMutation, useGetDomainPermissionExcludeQuery } from "../../../../lib/query/admin/domain-permissions/excludes"; +import MutationButton from "../../../../components/form/mutation-button"; + +export default function DomainPermissionExcludeDetail() { + const baseUrl = useBaseUrl(); + const backLocation: string = history.state?.backLocation ?? `~${baseUrl}`; + + const params = useParams(); + let id = params.excludeId as string | undefined; + if (!id) { + throw "no perm ID"; + } + + const { + data: permExclude, + isLoading, + isFetching, + isError, + error, + } = useGetDomainPermissionExcludeQuery(id); + + if (isLoading || isFetching) { + return ; + } else if (isError) { + return ; + } else if (permExclude === undefined) { + return ; + } + + const created = permExclude.created_at ? new Date(permExclude.created_at).toDateString(): "unknown"; + const domain = permExclude.domain; + const privateComment = permExclude.private_comment ?? "[none]"; + + return ( +
+

Domain Permission Exclude Detail

+
+
+
Created
+
+
+
+
Created By
+
+ +
+
+
+
Domain
+
{domain}
+
+
+
Private comment
+
{privateComment}
+
+
+ +
+ ); +} + +function HandleExclude({ id, backLocation}: {id: string, backLocation: string}) { + const [_location, setLocation] = useLocation(); + const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation(); + + return ( + { + e.preventDefault(); + e.stopPropagation(); + deleteExclude(id).then(res => { + if ("data" in res) { + setLocation(backLocation); + } + }); + }} + disabled={false} + showError={true} + result={deleteResult} + /> + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/index.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/index.tsx new file mode 100644 index 000000000..915d6f5cc --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/index.tsx @@ -0,0 +1,235 @@ +/* + 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, { ReactNode, useEffect, useMemo } from "react"; + +import { useTextInput } from "../../../../lib/form"; +import { PageableList } from "../../../../components/pageable-list"; +import MutationButton from "../../../../components/form/mutation-button"; +import { useLocation, useSearch } from "wouter"; +import { useDeleteDomainPermissionExcludeMutation, useLazySearchDomainPermissionExcludesQuery } from "../../../../lib/query/admin/domain-permissions/excludes"; +import { DomainPerm } from "../../../../lib/types/domain-permission"; +import { Error as ErrorC } from "../../../../components/error"; +import { Select, TextInput } from "../../../../components/form/inputs"; +import { formDomainValidator } from "../../../../lib/util/formvalidators"; +import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common"; + +export default function DomainPermissionExcludesSearch() { + return ( +
+
+

Domain Permission Excludes

+

+ You can use the form below to search through domain permission excludes. +
+ +

+ +
+ +
+ ); +} + +function DomainPermissionExcludesSearchForm() { + const [ location, setLocation ] = useLocation(); + const search = useSearch(); + const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]); + const hasParams = urlQueryParams.size != 0; + const [ searchExcludes, searchRes ] = useLazySearchDomainPermissionExcludesQuery(); + + const form = { + domain: useTextInput("domain", { + defaultValue: urlQueryParams.get("domain") ?? "", + validator: formDomainValidator, + }), + limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" }) + }; + + // On mount, if urlQueryParams were provided, + // trigger the search. For example, if page + // was accessed at /search?origin=local&limit=20, + // then run a search with origin=local and + // limit=20 and immediately render the results. + // + // If no urlQueryParams set, trigger default + // search (first page, no filtering). + useEffect(() => { + if (hasParams) { + searchExcludes(Object.fromEntries(urlQueryParams)); + } else { + setLocation(location + "?limit=20"); + } + }, [ + urlQueryParams, + hasParams, + searchExcludes, + location, + setLocation, + ]); + + // Rather than triggering the search directly, + // the "submit" button changes the location + // based on form field params, and lets the + // useEffect hook above actually do the search. + function submitQuery(e) { + e.preventDefault(); + + // Parse query parameters. + const entries = Object.entries(form).map(([k, v]) => { + // Take only defined form fields. + if (v.value === undefined || v.value.length === 0 || v.value === "any") { + return null; + } + return [[k, v.value]]; + }).flatMap(kv => { + // Remove any nulls. + return kv || []; + }); + + const searchParams = new URLSearchParams(entries); + setLocation(location + "?" + searchParams.toString()); + } + + // Location to return to when user clicks "back" on the detail view. + const backLocation = location + (hasParams ? `?${urlQueryParams}` : ""); + + // Function to map an item to a list entry. + function itemToEntry(exclude: DomainPerm): ReactNode { + return ( + + ); + } + + return ( + <> +
+ + + + + No excludes found that match your query.} + prevNextLinks={searchRes.data?.links} + /> + + ); +} + +interface ExcludeEntryProps { + permExclude: DomainPerm; + linkTo: string; + backLocation: string; +} + +function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryProps) { + const [ _location, setLocation ] = useLocation(); + const [ deleteExclude, deleteResult ] = useDeleteDomainPermissionExcludeMutation(); + + const domain = permExclude.domain; + const privateComment = permExclude.private_comment ?? "[none]"; + const id = permExclude.id; + if (!id) { + return ; + } + + return ( + { + // When clicking on a exclude, direct + // to the detail view for that exclude. + setLocation(linkTo, { + // Store the back location in history so + // the detail view can use it to return to + // this page (including query parameters). + state: { backLocation: backLocation } + }); + }} + role="link" + tabIndex={0} + > +
+
+
Domain:
+
{domain}
+
+
+
Private comment:
+
{privateComment}
+
+
+
+ { + e.preventDefault(); + e.stopPropagation(); + deleteExclude(id); + }} + disabled={false} + showError={true} + result={deleteResult} + /> +
+ + ); +} diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/new.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/new.tsx new file mode 100644 index 000000000..ad33070f8 --- /dev/null +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/new.tsx @@ -0,0 +1,90 @@ +/* + 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 useFormSubmit from "../../../../lib/form/submit"; +import { useCreateDomainPermissionExcludeMutation } from "../../../../lib/query/admin/domain-permissions/excludes"; +import { useTextInput } from "../../../../lib/form"; +import { formDomainValidator } from "../../../../lib/util/formvalidators"; +import MutationButton from "../../../../components/form/mutation-button"; +import { TextArea, TextInput } from "../../../../components/form/inputs"; +import { useLocation } from "wouter"; +import { DomainPermissionExcludeDocsLink, DomainPermissionExcludeHelpText } from "./common"; + +export default function DomainPermissionExcludeNew() { + const [ _location, setLocation ] = useLocation(); + + const form = { + domain: useTextInput("domain", { + validator: formDomainValidator, + }), + private_comment: useTextInput("private_comment"), + }; + + const [formSubmit, result] = useFormSubmit( + form, + useCreateDomainPermissionExcludeMutation(), + { + changedOnly: false, + onFinish: (res) => { + if (res.data) { + // Creation successful, + // redirect to excludes overview. + setLocation(`/excludes/search`); + } + }, + }); + + return ( +
+
+

New Domain Permission Exclude

+

+ +
+ + + +