From d5847e2d2b68a1eb41d43be170cd4ddff9003cff Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 17 Mar 2025 15:06:17 +0100
Subject: [feature] Application creation + management via API + settings panel
(#3906)
* [feature] Application creation + management via API + settings panel
* fix docs links
* add errnorows test
* use known application as shorter
* add comment about side effects
---
.../settings/views/user/applications/search.tsx | 190 +++++++++++++++++++++
1 file changed, 190 insertions(+)
create mode 100644 web/source/settings/views/user/applications/search.tsx
(limited to 'web/source/settings/views/user/applications/search.tsx')
diff --git a/web/source/settings/views/user/applications/search.tsx b/web/source/settings/views/user/applications/search.tsx
new file mode 100644
index 000000000..819d96391
--- /dev/null
+++ b/web/source/settings/views/user/applications/search.tsx
@@ -0,0 +1,190 @@
+/*
+ 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 { Select } from "../../../components/form/inputs";
+import { useLazySearchAppQuery } from "../../../lib/query/user/applications";
+import { App } from "../../../lib/types/application";
+import { useAppWebsite, useCreated, useRedirectURIs } from "./common";
+
+export default function ApplicationsSearchForm() {
+ const [ location, setLocation ] = useLocation();
+ const search = useSearch();
+ const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]);
+ const [ searchApps, searchRes ] = useLazySearchAppQuery();
+
+ // Populate search form using values from
+ // urlQueryParams, to allow paging.
+ const form = {
+ limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" })
+ };
+
+ // On mount, trigger search.
+ useEffect(() => {
+ searchApps(Object.fromEntries(urlQueryParams), true);
+ }, [urlQueryParams, searchApps]);
+
+ // 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) {
+ return null;
+ } else if (typeof v.value === "string" && v.value.length === 0) {
+ return null;
+ }
+
+ return [[k, v.value.toString()]];
+ }).flatMap(kv => {
+ // Remove any nulls.
+ return kv !== null ? kv : [];
+ });
+
+ const searchParams = new URLSearchParams(entries);
+ setLocation(location + "?" + searchParams.toString());
+ }
+
+ // Location to return to when user clicks
+ // "back" on the application detail view.
+ const backLocation = location + (urlQueryParams.size > 0 ? `?${urlQueryParams}` : "");
+
+ // Function to map an item to a list entry.
+ function itemToEntry(application: App): ReactNode {
+ return (
+
+ );
+ }
+
+ return (
+ <>
+
+ No applications found.}
+ prevNextLinks={searchRes.data?.links}
+ />
+
+ );
+}
+
+interface ApplicationListEntryProps {
+ app: App;
+ linkTo: string;
+ backLocation: string;
+}
+
+function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntryProps) {
+ const [ _location, setLocation ] = useLocation();
+ const appWebsite = useAppWebsite(app);
+ const created = useCreated(app);
+ const redirectURIs = useRedirectURIs(app);
+
+ return (
+ {
+ // When clicking on an app, direct
+ // to the detail view for that app.
+ 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}
+ >
+