Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-18 23:45:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Improve i18n for reports

Browse Source
This commit is contained in:
Myzel394 2023-03-05 11:14:20 +01:00
parent 26dece616b
commit 727ae4ffbf
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
10 changed files with 100 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/en-US/common.json
View File

@ -51,6 +51,9 @@
"updated": "Alias has been updated successfully!",
"changedToEnabled": "Alias has been enabled",
"changedToDisabled": "Alias has been disabled"
},
"report": {
"deleted": "Report has been deleted!"
}
},
"general": {

68
public/locales/en-US/reports.json Normal file
View File

@ -0,0 +1,68 @@
{
"title": "Reports",
"detailsTitle": "Report Details",
"emptyState": {
"title": "Welcome to your Reports!",
"description": "Here you will find your email reports. Currently, you don't have any reports. Wait until you receive an email."
},
"pageActions": {
"sort": {
"label": "Sorting",
"values": {
"List": "List reports by their date",
"GroupByAlias": "Group reports by their alias"
}
}
},
"emailMeta": {
"flow": "{{from}} -> {{to}}",
"emptySubject": "<No Subject>"
},
"actions": {
"delete": {
"label": "Delete Report",
"description": "Are you sure you want to delete this report?",
"continueActionLabel": "Delete Report"
}
},
"sections": {
"information": {
"title": "Email Information",
"form": {
"from": {
"label": "From"
},
"to": {
"label": "To"
},
"subject": {
"label": "Subject"
}
}
},
"trackers": {
"title": "Trackers",
"results": {
"imageTrackers": {
"text_zero": "No image trackers found",
"text_one": "Removed 1 image tracker",
"text_other": "Removed {{count}} image trackers"
},
"proxiedImages": {
"text_zero": "No images found",
"text_one": "Forwarding 1 image",
"text_other": "Forwarding {{count}} images",
"status": {
"isStored": "Stored on Server",
"isProxying": "Being forwarded"
}
},
"expandedUrls": {
"text_zero": "No shortened URLs found",
"text_one": "Expanded 1 URL",
"text_other": "Expanded {{count}} URLs"
}
}
}
}
}

81
public/locales/en-US/translation.json
View File

@ -25,76 +25,6 @@
"OverviewRoute": {
"title": "Overview",
"description": "Not much to see here, yet."
},
"ReportsRoute": {
"title": "Reports",
"emptyState": {
"title": "Welcome to your Reports!",
"description": "Here you will find your email reports. Currently, you don't have any reports. Wait until you receive an email."
},
"pageActions": {
"sort": {
"List": "List reports by their date",
"GroupByAlias": "Group reports by their alias"
}
}
},
"ReportDetailRoute": {
"title": "Report Details",
"actions": {
"delete": {
"label": "Delete Report",
"description": "Are you sure you want to delete this report?",
"continueAction": "Delete Report"
}
},
"sections": {
"information": {
"title": "Email Information",
"form": {
"from": {
"label": "From"
},
"to": {
"label": "To"
},
"subject": {
"label": "Subject"
}
}
},
"trackers": {
"title": "Trackers",
"results": {
"imageTrackers": {
"text_zero": "No image trackers found",
"text_one": "Removed 1 image tracker",
"text_other": "Removed {{count}} image trackers"
},
"proxiedImages": {
"text_zero": "No images found",
"text_one": "Forwarding 1 image",
"text_other": "Forwarding {{count}} images",
"status": {
"isStored": "Stored on Server",
"isProxying": "Being forwarded"
}
},
"expandedUrls": {
"text_zero": "No shortened URLs found",
"text_one": "Expanded 1 URL",
"text_other": "Expanded {{count}} URLs"
}
}
}
}
},
"AdminRoute": {
"serverStatus": {
"noRecentReports": "There seems to be some issues with your server. The server hasn't done its cleanup in the last few days. The last report was on {{date}}.",
"error": "There was an error during the last server cleanup job from {{relativeDescription}}. Please check the logs for more information.",
"success": "Everything okay with your server! The last cleanup job was {{relativeDescription}}."
}
}
},
@ -196,16 +126,5 @@
}
}
},
"report": {
"mutations": {
"success": {
"reportDeleted": "Report has been deleted!"
}
},
"emailMeta": {
"flow": "{{from}} -> {{to}}",
"emptySubject": "<No Subject>"
}
}
}
}

4
src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
View File

@ -12,13 +12,13 @@ export interface ExpandedUrlsListItemProps {
}
export default function ExpandedUrlsListItem({urls}: ExpandedUrlsListItemProps): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("reports")
return (
<ExpandableListItem
data={urls}
icon={<BsArrowsAngleExpand />}
title={t("routes.ReportDetailRoute.sections.trackers.results.expandedUrls.text", {
title={t("sections.trackers.results.expandedUrls.text", {
count: urls.length,
})}
>

8
src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
View File

@ -17,14 +17,14 @@ export interface ProxiedImagesListItemProps {
}
export default function ProxiedImagesListItem({images}: ProxiedImagesListItemProps): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("reports")
const serverSettings = useLoaderData() as ServerSettings
return (
<ExpandableListItem
data={images}
icon={<BsImage />}
title={t("routes.ReportDetailRoute.sections.trackers.results.proxiedImages.text", {
title={t("sections.trackers.results.proxiedImages.text", {
count: images.length,
})}
>
@ -62,11 +62,11 @@ export default function ProxiedImagesListItem({images}: ProxiedImagesListItemPro
)
) {
return t(
"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isStored",
"sections.trackers.results.proxiedImages.status.isStored",
)
} else {
return t(
"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isProxying",
"sections.trackers.results.proxiedImages.status.isProxying",
)
}
})()}

4
src/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem.tsx
View File

@ -14,7 +14,7 @@ export interface SinglePixelImageTrackersListItemProps {
export default function SinglePixelImageTrackersListItem({
images,
}: SinglePixelImageTrackersListItemProps): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("reports")
const imagesPerTracker = images.reduce((acc, value) => {
acc[value.trackerName] = [...(acc[value.trackerName] || []), value]
@ -26,7 +26,7 @@ export default function SinglePixelImageTrackersListItem({
<ExpandableListItem
data={images}
icon={<BsShieldShaded />}
title={t("routes.ReportDetailRoute.sections.trackers.results.imageTrackers.text", {
title={t("sections.trackers.results.imageTrackers.text", {
count: images.length,
})}
>

8
src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
View File

@ -5,23 +5,21 @@ import {MdTextSnippet} from "react-icons/md"
import {Container, Grid, Typography} from "@mui/material"
export default function EmptyStateScreen(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("reports")
return (
<Container maxWidth="xs">
<Grid container spacing={4} direction="column" alignItems="center" alignSelf="center">
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.ReportsRoute.emptyState.title")}
{t("emptyState.title")}
</Typography>
</Grid>
<Grid item>
<MdTextSnippet size={64} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.ReportsRoute.emptyState.description")}
</Typography>
<Typography variant="body1">{t("emptyState.description")}</Typography>
</Grid>
</Grid>
</Container>

8
src/route-widgets/ReportsRoute/ReportInformationItem.tsx
View File

@ -11,18 +11,16 @@ export interface ReportInformationItemProps {
}
export default function ReportInformationItem({report}: ReportInformationItemProps): ReactElement {
const {t} = useTranslation("reports")
const navigate = useNavigate()
const {t} = useTranslation()
return (
<ListItemButton onClick={() => navigate(`/reports/${report.id}`)}>
<ListItemText
primary={
report.messageDetails.content.subject || (
<i>{t("relations.report.emailMeta.emptySubject")}</i>
)
report.messageDetails.content.subject || <i>{t("emailMeta.emptySubject")}</i>
}
secondary={t("relations.report.emailMeta.flow", {
secondary={t("emailMeta.flow", {
from: report.messageDetails.meta.from,
to: report.messageDetails.meta.to,
})}

28
src/routes/ReportDetailRoute.tsx
View File

@ -21,7 +21,7 @@ import ProxiedImagesListItem from "~/route-widgets/ReportDetailRoute/ProxiedImag
import SinglePixelImageTrackersListItem from "~/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem"
function ReportDetailRoute(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation(["reports", "common"])
const params = useParams()
const query = useQuery<Report, AxiosError>(["get_report", params.id], () =>
@ -30,16 +30,16 @@ function ReportDetailRoute(): ReactElement {
return (
<SimplePageBuilder.Page
title="Report Details"
title={t("detailsTitle")}
actions={
query.data && (
<DeleteButton
onDelete={() => deleteReport(params.id!)}
label={t("routes.ReportDetailRoute.actions.delete.label")}
description={t("routes.ReportDetailRoute.actions.delete.description")}
continueLabel={t("routes.ReportDetailRoute.actions.delete.continueAction")}
label={t("actions.delete.label")}
description={t("delete.description")}
continueLabel={t("actions.delete.continueActionLabel")}
navigateTo={"/reports"}
successMessage={t("relations.report.mutations.success.reportDeleted")}
successMessage={t("messages.report.deleted", {ns: "common"})}
/>
)
}
@ -52,16 +52,14 @@ function ReportDetailRoute(): ReactElement {
{[
<SimplePageBuilder.Section
key="information"
label={t(
"routes.ReportDetailRoute.sections.information.title",
)}
label={t("sections.information.title")}
>
<SimplePageBuilder.InformationContainer>
{[
<SimpleOverlayInformation
key="from"
label={t(
"routes.ReportDetailRoute.sections.information.form.from.label",
"sections.information.form.from.label",
)}
>
{
@ -72,9 +70,7 @@ function ReportDetailRoute(): ReactElement {
<SimpleOverlayInformation
key="to"
label={t(
"routes.ReportDetailRoute.sections.information.form.to.label",
)}
label={t("sections.information.form.to.label")}
>
{
(report as DecryptedReportContent)
@ -85,7 +81,7 @@ function ReportDetailRoute(): ReactElement {
<SimpleOverlayInformation
key="subject"
label={t(
"routes.ReportDetailRoute.sections.information.form.subject.label",
"sections.information.form.subject.label",
)}
>
{
@ -99,9 +95,7 @@ function ReportDetailRoute(): ReactElement {
<SimplePageBuilder.Section
key="trackers"
label={t(
"routes.ReportDetailRoute.sections.trackers.title",
)}
label={t("sections.trackers.title")}
>
<List>
<SinglePixelImageTrackersListItem

8
src/routes/ReportsRoute.tsx
View File

@ -27,12 +27,12 @@ const SORTING_VIEW_ICON_MAP: Record<SortingView, ReactElement> = {
[SortingView.GroupByAlias]: <FaMask />,
}
const SORTING_VIEW_NAME_MAP: Record<SortingView, string> = createEnumMapFromTranslation(
"routes.ReportsRoute.pageActions.sort",
"pageActions.sort.values",
SortingView,
)
function ReportsRoute(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("reports")
const query = useQuery<PaginationResult<Report>, AxiosError>(["get_reports"], getReports)
@ -40,13 +40,13 @@ function ReportsRoute(): ReactElement {
return (
<SimplePage
title="Reports"
title={t("title")}
pageOptionsActions={
(query.data?.items?.length || 0) > 0 && (
<TextField
value={sortingView}
onChange={event => setSortingView(event.target.value as SortingView)}
label="Sorting"
label={t("pageActions.sort.label")}
id="sorting"
InputProps={{
startAdornment: (