124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
/*
|
|
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 <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import React, { useMemo } from "react";
|
|
import { useLocation, useParams } from "wouter";
|
|
import FormWithData from "../../../lib/form/form-with-data";
|
|
import BackButton from "../../../components/back-button";
|
|
import { useBaseUrl } from "../../../lib/navigation/util";
|
|
import { InteractionRequest } from "../../../lib/types/interaction";
|
|
import MutationButton from "../../../components/form/mutation-button";
|
|
import { Status } from "../../../components/status";
|
|
import { useGetAppQuery } from "../../../lib/query/user/applications";
|
|
import { App } from "../../../lib/types/application";
|
|
|
|
export default function AppDetail({ }) {
|
|
const params: { appId: string } = useParams();
|
|
const baseUrl = useBaseUrl();
|
|
const backLocation: String = history.state?.backLocation ?? `~${baseUrl}`;
|
|
|
|
return (
|
|
<div className="application-details">
|
|
<h1><BackButton to={backLocation}/> Application Details</h1>
|
|
<FormWithData
|
|
dataQuery={useGetAppQuery}
|
|
queryArg={params.appId}
|
|
DataForm={AppForm}
|
|
{...{ backLocation: backLocation }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AppForm({ data: app, backLocation }: { data: App, backLocation: string }) {
|
|
const [ _location, setLocation ] = useLocation();
|
|
|
|
const appWebsite = useMemo(() => {
|
|
if (!app.website) {
|
|
return "";
|
|
}
|
|
|
|
try {
|
|
// Try to parse nicely and return link.
|
|
const websiteURL = new URL(app.website);
|
|
const websiteURLStr = websiteURL.toString();
|
|
return (
|
|
<a
|
|
href={websiteURLStr}
|
|
target="_blank"
|
|
rel="nofollow noreferrer noopener"
|
|
>{websiteURLStr}</a>
|
|
);
|
|
} catch {
|
|
// Fall back to returning string.
|
|
return app.website;
|
|
}
|
|
}, [app.website]);
|
|
|
|
const created = useMemo(() => {
|
|
const createdAt = new Date(app.created_at);
|
|
return <time dateTime={app.created_at}>{createdAt.toDateString()}</time>;
|
|
}, [app.created_at]);
|
|
|
|
const redirectURIs = useMemo(() => {
|
|
const length = app.redirect_uris.length;
|
|
if (length === 1) {
|
|
return app.redirect_uris[0];
|
|
}
|
|
|
|
return app.redirect_uris.map((redirectURI, i) => {
|
|
return i === 0 ? <>{redirectURI}</> : <><br/>{redirectURI}</>;
|
|
});
|
|
|
|
}, [app.redirect_uris]);
|
|
|
|
return (
|
|
<>
|
|
<dl className="info-list">
|
|
<div className="info-list-entry">
|
|
<dt>Name:</dt>
|
|
<dd className="text-cutoff">{app.name}</dd>
|
|
</div>
|
|
|
|
{ appWebsite &&
|
|
<div className="info-list-entry">
|
|
<dt>Website:</dt>
|
|
<dd>{appWebsite}</dd>
|
|
</div>
|
|
}
|
|
|
|
<div className="info-list-entry">
|
|
<dt>Created:</dt>
|
|
<dd>{created}</dd>
|
|
</div>
|
|
|
|
<div className="info-list-entry">
|
|
<dt>Scopes:</dt>
|
|
<dd className="monospace">{app.scopes.join(" ")}</dd>
|
|
</div>
|
|
|
|
<div className="info-list-entry">
|
|
<dt>Redirect URI(s):</dt>
|
|
<dd className="monospace">{redirectURIs}</dd>
|
|
</div>
|
|
</dl>
|
|
</>
|
|
);
|
|
}
|