From aecf74951cecb4de9ca94dd93e48af6f62300a0f Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Thu, 25 Apr 2024 18:24:24 +0200 Subject: [chore] Settings refactor 2: the re-refactoring-ing (#2866) * [chore] Bit more refactoring of settings panel * fix up some remaining things * groovy baby yeah! * remove unused Suspense --- .../settings/views/admin/instance/settings.tsx | 186 +++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 web/source/settings/views/admin/instance/settings.tsx (limited to 'web/source/settings/views/admin/instance/settings.tsx') diff --git a/web/source/settings/views/admin/instance/settings.tsx b/web/source/settings/views/admin/instance/settings.tsx new file mode 100644 index 000000000..03a961589 --- /dev/null +++ b/web/source/settings/views/admin/instance/settings.tsx @@ -0,0 +1,186 @@ +/* + 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 { useTextInput, useFileInput } from "../../../lib/form"; +import { TextInput, TextArea, FileInput } from "../../../components/form/inputs"; +import MutationButton from "../../../components/form/mutation-button"; +import { useInstanceV1Query } from "../../../lib/query/gts-api"; +import { useUpdateInstanceMutation } from "../../../lib/query/admin"; +import { InstanceV1 } from "../../../lib/types/instance"; +import FormWithData from "../../../lib/form/form-with-data"; +import useFormSubmit from "../../../lib/form/submit"; + +export default function InstanceSettings() { + return ( + + ); +} + +interface InstanceSettingsFormProps{ + data: InstanceV1; +} + +function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) { + const titleLimit = 40; + const shortDescLimit = 500; + const descLimit = 5000; + const termsLimit = 5000; + + const form = { + title: useTextInput("title", { + source: instance, + validator: (val: string) => val.length <= titleLimit ? "" : `Instance title is ${val.length} characters; must be ${titleLimit} characters or less` + }), + thumbnail: useFileInput("thumbnail", { withPreview: true }), + thumbnailDesc: useTextInput("thumbnail_description", { source: instance }), + shortDesc: useTextInput("short_description", { + source: instance, + // Select "raw" text version of parsed field for editing. + valueSelector: (s: InstanceV1) => s.short_description_text, + validator: (val: string) => val.length <= shortDescLimit ? "" : `Instance short description is ${val.length} characters; must be ${shortDescLimit} characters or less` + }), + description: useTextInput("description", { + source: instance, + // Select "raw" text version of parsed field for editing. + valueSelector: (s: InstanceV1) => s.description_text, + validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less` + }), + terms: useTextInput("terms", { + source: instance, + // Select "raw" text version of parsed field for editing. + valueSelector: (s: InstanceV1) => s.terms_text, + validator: (val: string) => val.length <= termsLimit ? "" : `Instance terms and conditions is ${val.length} characters; must be ${termsLimit} characters or less` + }), + contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }), + contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email }) + }; + + const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation()); + + return ( +
+

Instance Settings

+ +
+

Appearance

+ + Learn more about these settings (opens in a new tab) + +
+ + + +
+ Instance avatar (1:1 images look best) +
+ {form.thumbnailDesc.value +
+ + +
+
+ +
+ +
+

Descriptors

+ + Learn more about these settings (opens in a new tab) + +
+ +