diff options
Diffstat (limited to 'web/source/settings/components')
| -rw-r--r-- | web/source/settings/components/account-list.tsx | 82 | ||||
| -rw-r--r-- | web/source/settings/components/form/mutation-button.jsx | 48 | ||||
| -rw-r--r-- | web/source/settings/components/form/mutation-button.tsx | 72 |
3 files changed, 154 insertions, 48 deletions
diff --git a/web/source/settings/components/account-list.tsx b/web/source/settings/components/account-list.tsx new file mode 100644 index 000000000..4df05c046 --- /dev/null +++ b/web/source/settings/components/account-list.tsx @@ -0,0 +1,82 @@ +/* + 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 from "react"; +import { Link } from "wouter"; +import { Error } from "./error"; +import { AdminAccount } from "../lib/types/account"; +import { SerializedError } from "@reduxjs/toolkit"; +import { FetchBaseQueryError } from "@reduxjs/toolkit/query"; + +export interface AccountListProps { + isSuccess: boolean, + data: AdminAccount[] | undefined, + isLoading: boolean, + isError: boolean, + error: FetchBaseQueryError | SerializedError | undefined, + emptyMessage: string, +} + +export function AccountList({ + isLoading, + isSuccess, + data, + isError, + error, + emptyMessage, +}: AccountListProps) { + if (!(isSuccess || isError)) { + // Hasn't been called yet. + return null; + } + + if (isLoading) { + return <i + className="fa fa-fw fa-refresh fa-spin" + aria-hidden="true" + title="Loading..." + />; + } + + if (error) { + return <Error error={error} />; + } + + if (data == undefined || data.length == 0) { + return <b>{emptyMessage}</b>; + } + + return ( + <div className="list"> + {data.map(({ account: acc }) => ( + <Link + key={acc.acct} + className="account entry" + href={`/settings/admin/accounts/${acc.id}`} + > + {acc.display_name?.length > 0 + ? acc.display_name + : acc.username + } + <span id="username">(@{acc.acct})</span> + </Link> + ))} + </div> + ); +}
\ No newline at end of file diff --git a/web/source/settings/components/form/mutation-button.jsx b/web/source/settings/components/form/mutation-button.jsx deleted file mode 100644 index 0eaf33912..000000000 --- a/web/source/settings/components/form/mutation-button.jsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - 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/>. -*/ - -const React = require("react"); -const { Error } = require("../error"); - -module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", wrapperClassName = "", ...inputProps }) { - let iconClass = ""; - const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct - - if (targetsThisButton) { - if (result.isLoading) { - iconClass = "fa-spin fa-refresh"; - } else if (result.isSuccess) { - iconClass = "fa-check fadeout"; - } - } - - return (<div className={wrapperClassName}> - {(showError && targetsThisButton && result.error) && - <Error error={result.error} /> - } - <button type="submit" className={"with-icon " + className} disabled={result.isLoading || disabled} {...inputProps}> - <i className={`fa fa-fw ${iconClass}`} aria-hidden="true"></i> - {(targetsThisButton && result.isLoading) - ? "Processing..." - : label - } - </button> - </div> - ); -};
\ No newline at end of file diff --git a/web/source/settings/components/form/mutation-button.tsx b/web/source/settings/components/form/mutation-button.tsx new file mode 100644 index 000000000..1e6d8c968 --- /dev/null +++ b/web/source/settings/components/form/mutation-button.tsx @@ -0,0 +1,72 @@ +/* + 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 from "react"; +import { Error } from "../error"; + +export interface MutationButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> { + label: string, + result, + disabled: boolean, + showError?: boolean, + className?: string, + wrapperClassName?: string, +} + +export default function MutationButton({ + label, + result, + disabled, + showError = true, + className = "", + wrapperClassName = "", + ...inputProps +}: MutationButtonProps) { + let iconClass = ""; + // Can also both be undefined, which is correct. + const targetsThisButton = result.action == inputProps.name; + + if (targetsThisButton) { + if (result.isLoading) { + iconClass = " fa-spin fa-refresh"; + } else if (result.isSuccess) { + iconClass = " fa-check fadeout"; + } + } + + return ( + <div className={wrapperClassName}> + {(showError && targetsThisButton && result.error) && + <Error error={result.error} /> + } + <button + type="submit" + className={"with-icon " + className} + disabled={result.isLoading || disabled} + {...inputProps} + > + <i className={`fa fa-fw${iconClass}`} aria-hidden="true"></i> + {(targetsThisButton && result.isLoading) + ? "Processing..." + : label + } + </button> + </div> + ); +} |