From 00b983aed2a15d4a485dd9df28b8d7ffb3476047 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Tue, 14 Feb 2023 20:18:04 +0100 Subject: [PATCH] refactor: Make DeleteButton.tsx generic --- public/locales/en-US/translation.json | 3 +- src/App.tsx | 1 + .../widgets/DeleteAPIButton.tsx} | 37 ++++++++++++------- src/components/widgets/index.ts | 2 + src/routes/AliasDetailRoute.tsx | 10 +++-- src/routes/ReportDetailRoute.tsx | 24 ++++++++++-- 6 files changed, 55 insertions(+), 22 deletions(-) rename src/{route-widgets/ReportDetailRoute/DeleteButton.tsx => components/widgets/DeleteAPIButton.tsx} (66%) diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json index 31836e9..38dd63a 100644 --- a/public/locales/en-US/translation.json +++ b/public/locales/en-US/translation.json @@ -16,7 +16,8 @@ "loading": "Loading...", "actionNotUndoable": "This action cannot be undone!", "copyError": "Copying to clipboard did not work. Please copy the text manually.", - "experimentalFeature": "This is an experimental feature." + "experimentalFeature": "This is an experimental feature.", + "deletedSuccessfully": "Deleted successfully!" }, "routes": { diff --git a/src/App.tsx b/src/App.tsx index 097515f..cf21964 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -82,6 +82,7 @@ const router = createBrowserRouter([ }, { path: "/aliases/:id", + loader: getServerSettings, element: , }, { diff --git a/src/route-widgets/ReportDetailRoute/DeleteButton.tsx b/src/components/widgets/DeleteAPIButton.tsx similarity index 66% rename from src/route-widgets/ReportDetailRoute/DeleteButton.tsx rename to src/components/widgets/DeleteAPIButton.tsx index 0cf44a2..9ea0038 100644 --- a/src/route-widgets/ReportDetailRoute/DeleteButton.tsx +++ b/src/components/widgets/DeleteAPIButton.tsx @@ -15,24 +15,35 @@ import { } from "@mui/material" import {useMutation} from "@tanstack/react-query" -import {deleteReport} from "~/apis" import {useErrorSuccessSnacks} from "~/hooks" -import {SimpleDetailResponse} from "~/server-types" -export interface DeleteButtonProps { - id: string +export interface DeleteAPIButtonProps { + onDelete: () => Promise + label: string + continueLabel?: string + + description?: string + successMessage?: string + navigateTo?: string } -export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement { +export default function DeleteAPIButton({ + onDelete, + successMessage, + label, + continueLabel, + description, + navigateTo = "/aliases", +}: DeleteAPIButtonProps): ReactElement { const {t} = useTranslation() const {showError, showSuccess} = useErrorSuccessSnacks() const navigate = useNavigate() - const {mutate} = useMutation(() => deleteReport(id), { + const {mutate} = useMutation(onDelete, { onError: showError, onSuccess: () => { - showSuccess(t("relations.report.mutations.success.reportDeleted")) - navigate("/reports") + showSuccess(successMessage || t("general.deletedSuccessfully")) + navigate(navigateTo) }, }) @@ -47,14 +58,12 @@ export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement startIcon={} onClick={() => setShowDeleteDialog(true)} > - {t("routes.ReportDetailRoute.actions.delete.label")} + {label} setShowDeleteDialog(false)}> - {t("routes.ReportDetailRoute.actions.delete.label")} + {label} - - {t("routes.ReportDetailRoute.actions.delete.description")} - + {description && {description}} {t("general.actionNotUndoable")} @@ -69,7 +78,7 @@ export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement color="error" onClick={() => mutate()} > - {t("routes.ReportDetailRoute.actions.delete.continueAction")} + {continueLabel} diff --git a/src/components/widgets/index.ts b/src/components/widgets/index.ts index d25c848..7ff371e 100644 --- a/src/components/widgets/index.ts +++ b/src/components/widgets/index.ts @@ -45,6 +45,8 @@ export {default as LoadingData} from "./LoadingData" export * from "./ExternalLinkIndication" export {default as ExternalLinkIndication} from "./ExternalLinkIndication" export {default as ExtensionSignalHandler} from "./ExtensionalSignalHandler" +export * from "./DeleteAPIButton" +export {default as DeleteButton} from "./DeleteAPIButton" export * from "./StringPoolField" export * as SimplePageBuilder from "./simple-page-builder" diff --git a/src/routes/AliasDetailRoute.tsx b/src/routes/AliasDetailRoute.tsx index 696fa07..11a50d3 100644 --- a/src/routes/AliasDetailRoute.tsx +++ b/src/routes/AliasDetailRoute.tsx @@ -1,5 +1,5 @@ import {ReactElement, useContext} from "react" -import {useParams} from "react-router-dom" +import {useLoaderData, useParams} from "react-router-dom" import {AxiosError} from "axios" import {useTranslation} from "react-i18next" @@ -7,7 +7,7 @@ import {useQuery} from "@tanstack/react-query" import {Grid} from "@mui/material" import {getAlias} from "~/apis" -import {Alias, DecryptedAlias} from "~/server-types" +import {Alias, DecryptedAlias, ServerSettings} from "~/server-types" import { AliasTypeIndicator, AuthContext, @@ -25,6 +25,7 @@ import decryptAliasNotes from "~/apis/helpers/decrypt-alias-notes" export default function AliasDetailRoute(): ReactElement { const {t} = useTranslation() + const serverSettings = useLoaderData() as ServerSettings const {id: aliasID} = useParams() const {_decryptUsingMasterPassword, encryptionStatus} = useContext(AuthContext) const queryKey = ["get_alias", aliasID, encryptionStatus] @@ -43,7 +44,10 @@ export default function AliasDetailRoute(): ReactElement { }) return ( - + } + > query={query}> {alias => ( diff --git a/src/routes/ReportDetailRoute.tsx b/src/routes/ReportDetailRoute.tsx index aec204d..7d4b36f 100644 --- a/src/routes/ReportDetailRoute.tsx +++ b/src/routes/ReportDetailRoute.tsx @@ -7,10 +7,15 @@ import {useQuery} from "@tanstack/react-query" import {List} from "@mui/material" import {DecryptedReportContent, Report} from "~/server-types" -import {getReport} from "~/apis" -import {DecryptReport, QueryResult, SimpleOverlayInformation, SimplePageBuilder} from "~/components" +import {deleteReport, getReport} from "~/apis" +import { + DecryptReport, + DeleteButton, + QueryResult, + SimpleOverlayInformation, + SimplePageBuilder, +} from "~/components" import {WithEncryptionRequired} from "~/hocs" -import DeleteButton from "~/route-widgets/ReportDetailRoute/DeleteButton" import ExpandedUrlsListItem from "~/route-widgets/ReportDetailRoute/ExpandedUrlsListItem" import ProxiedImagesListItem from "~/route-widgets/ReportDetailRoute/ProxiedImagesListItem" import SinglePixelImageTrackersListItem from "~/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem" @@ -26,7 +31,18 @@ function ReportDetailRoute(): ReactElement { return ( } + actions={ + query.data && ( + deleteReport(params.id!)} + label={t("routes.ReportDetailRoute.actions.delete.label")} + description={t("routes.ReportDetailRoute.actions.delete.description")} + continueLabel={t("routes.ReportDetailRoute.actions.delete.continueAction")} + navigateTo={"/reports"} + successMessage={t("relations.report.mutations.success.reportDeleted")} + /> + ) + } > query={query}> {encryptedReport => (