From cdea1674674a5eafda17e019b1752513156e61c1 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sun, 13 Nov 2022 19:51:22 +0100
Subject: [PATCH] adding ExpandableListItem.tsx

---
 public/locales/de-DE/translation.json         |   5 +
 public/locales/en-US/translation.json         |   5 +
 src/components/ExpandableListItem.tsx         |  38 +++++
 src/components/LanguageButton.tsx             |   2 -
 src/components/index.ts                       |   2 +
 .../AliasesRoute/AliasesListItem.tsx          |  10 +-
 .../ExpandedUrlsListItem.tsx                  |  43 +++++
 .../ProxiedImagesListItem.tsx                 | 147 ++++++++----------
 .../SinglePixelImageTrackersListItem.tsx      |  70 +++------
 src/routes/AuthenticatedRoute.tsx             |   4 +-
 src/routes/ReportDetailRoute.tsx              |   7 +
 src/server-types.ts                           |   3 +-
 12 files changed, 189 insertions(+), 147 deletions(-)
 create mode 100644 src/components/ExpandableListItem.tsx
 create mode 100644 src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx

diff --git a/public/locales/de-DE/translation.json b/public/locales/de-DE/translation.json
index 219de9f..5b97c6a 100644
--- a/public/locales/de-DE/translation.json
+++ b/public/locales/de-DE/translation.json
@@ -231,6 +231,11 @@
                                 "isStored": "Auf Server gespeichert",
                                 "isProxying": "Wird weitergeleitet"
                             }
+                        },
+                        "expandedUrls": {
+                            "text_zero": "Keine gekürzten URLs gefunden",
+                            "text_one": "Eine URL entkürzt",
+                            "text_other": "{{count}} URLs entkürzt"
                         }
                     }
                 }
diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
index d6fcc4b..871fcf5 100644
--- a/public/locales/en-US/translation.json
+++ b/public/locales/en-US/translation.json
@@ -231,6 +231,11 @@
                                 "isStored": "Stored on Server",
                                 "isProxying": "Being forwarded"
                             }
+                        },
+                        "expandedUrls": {
+                            "text_zero": "No shortened URLs found",
+                            "text_one": "Expanded 1 URL",
+                            "text_other": "Expanded {{count}} URLs"
                         }
                     }
                 }
diff --git a/src/components/ExpandableListItem.tsx b/src/components/ExpandableListItem.tsx
new file mode 100644
index 0000000..c0afd83
--- /dev/null
+++ b/src/components/ExpandableListItem.tsx
@@ -0,0 +1,38 @@
+import {ReactElement, ReactNode, useState} from "react"
+
+import {Box, Collapse, ListItemButton, ListItemIcon, ListItemText, useTheme} from "@mui/material"
+
+export interface ExpandedUrlsListItemProps<T> {
+	data: T[]
+	icon: ReactElement
+	title: string
+	children: ReactNode
+}
+
+export default function ExpandedUrlsListItem<T>({
+	data,
+	children,
+	icon,
+	title,
+}: ExpandedUrlsListItemProps<T>): ReactElement {
+	const [isExpanded, setIsExpanded] = useState<boolean>(false)
+	const theme = useTheme()
+
+	return (
+		<>
+			<ListItemButton
+				onClick={() => {
+					if (data.length > 0) {
+						setIsExpanded(value => !value)
+					}
+				}}
+			>
+				<ListItemIcon>{icon}</ListItemIcon>
+				<ListItemText>{title}</ListItemText>
+			</ListItemButton>
+			<Collapse in={isExpanded}>
+				<Box bgcolor={theme.palette.background.default}>{children}</Box>
+			</Collapse>
+		</>
+	)
+}
diff --git a/src/components/LanguageButton.tsx b/src/components/LanguageButton.tsx
index d723f40..3c7a763 100644
--- a/src/components/LanguageButton.tsx
+++ b/src/components/LanguageButton.tsx
@@ -22,8 +22,6 @@ export default function LanguageButton(): ReactElement {
 	const {isLocked, showDialog} = useContext(LockNavigationContext)
 	const {i18n} = useTranslation()
 
-	console.log(i18n.resolvedLanguage, SORTED_ENTRIES)
-
 	return (
 		<Select
 			value={i18n.resolvedLanguage}
diff --git a/src/components/index.ts b/src/components/index.ts
index a999bd5..da2213f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -38,5 +38,7 @@ export * from "./NoSearchResults"
 export {default as NoSearchResults} from "./NoSearchResults"
 export * from "./LanguageButton"
 export {default as LanguageButton} from "./LanguageButton"
+export * from "./ExpandableListItem"
+export {default as ExpandableListItem} from "./ExpandableListItem"
 
 export * as SimplePageBuilder from "./simple-page-builder"
diff --git a/src/route-widgets/AliasesRoute/AliasesListItem.tsx b/src/route-widgets/AliasesRoute/AliasesListItem.tsx
index 995687c..5da899a 100644
--- a/src/route-widgets/AliasesRoute/AliasesListItem.tsx
+++ b/src/route-widgets/AliasesRoute/AliasesListItem.tsx
@@ -2,13 +2,7 @@ import {ReactElement} from "react"
 import {MdContentCopy} from "react-icons/md"
 import {Link as RouterLink} from "react-router-dom"
 
-import {
-	ListItemButton,
-	ListItemIcon,
-	ListItemSecondaryAction,
-	ListItemText,
-	useTheme,
-} from "@mui/material"
+import {ListItemButton, ListItemIcon, ListItemSecondaryAction, ListItemText} from "@mui/material"
 
 import {AliasTypeIndicator} from "~/components"
 import {AliasList} from "~/server-types"
@@ -21,8 +15,6 @@ export interface AliasesListItemProps {
 const getAddress = (alias: AliasList): string => `${alias.local}@${alias.domain}`
 
 export default function AliasesListItem({alias, onCopy}: AliasesListItemProps): ReactElement {
-	const theme = useTheme()
-
 	const isInCopyAddressMode = onCopy !== undefined
 	const address = getAddress(alias)
 
diff --git a/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx b/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
new file mode 100644
index 0000000..988394c
--- /dev/null
+++ b/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
@@ -0,0 +1,43 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+import {BsArrowsAngleExpand} from "react-icons/bs"
+
+import {List, ListItemButton, ListItemText} from "@mui/material"
+
+import {DecryptedReportContent} from "~/server-types"
+import {ExpandableListItem} from "~/components"
+
+export interface ExpandedUrlsListItemProps {
+	urls: DecryptedReportContent["messageDetails"]["content"]["expandedUrls"]
+}
+
+export default function ExpandedUrlsListItem({urls}: ExpandedUrlsListItemProps): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<ExpandableListItem
+			data={urls}
+			icon={<BsArrowsAngleExpand />}
+			title={t("routes.ReportDetailRoute.sections.trackers.results.expandedUrls.text", {
+				count: urls.length,
+			})}
+		>
+			<List>
+				{urls.map(urlData => (
+					<ListItemButton
+						key={urlData.originalUrl}
+						component="a"
+						href={urlData.expandedUrl}
+						target="_blank"
+						rel="noopener noreferrer nofollow"
+					>
+						<ListItemText
+							primary={urlData.expandedUrl}
+							secondary={urlData.originalUrl}
+						/>
+					</ListItemButton>
+				))}
+			</List>
+		</ExpandableListItem>
+	)
+}
diff --git a/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx b/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
index 4c8d43d..13e0df1 100644
--- a/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
+++ b/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
@@ -1,24 +1,16 @@
 import {BsImage} from "react-icons/bs"
-import {ReactElement, useState} from "react"
+import {ReactElement} from "react"
 import {MdLocationOn} from "react-icons/md"
 import {useLoaderData} from "react-router-dom"
 import {useTranslation} from "react-i18next"
 import addHours from "date-fns/addHours"
 import isBefore from "date-fns/isBefore"
 
-import {
-	Box,
-	Collapse,
-	Grid,
-	List,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	useTheme,
-} from "@mui/material"
+import {Grid, List, ListItemButton, ListItemText} from "@mui/material"
 
 import {DecryptedReportContent, ServerSettings} from "~/server-types"
 import {isDev} from "~/constants/development"
+import {ExpandableListItem} from "~/components"
 
 export interface ProxiedImagesListItemProps {
 	images: DecryptedReportContent["messageDetails"]["content"]["proxiedImages"]
@@ -27,82 +19,67 @@ export interface ProxiedImagesListItemProps {
 export default function ProxiedImagesListItem({images}: ProxiedImagesListItemProps): ReactElement {
 	const {t} = useTranslation()
 	const serverSettings = useLoaderData() as ServerSettings
-	const theme = useTheme()
 
-	const [showProxiedImages, setShowProxiedImages] = useState<boolean>(false)
+	console.log(images)
 
 	return (
-		<>
-			<ListItemButton
-				onClick={() => {
-					if (images.length > 0) {
-						setShowProxiedImages(value => !value)
-					}
-				}}
-			>
-				<ListItemIcon>
-					<BsImage />
-				</ListItemIcon>
-				<ListItemText>
-					{t("routes.ReportDetailRoute.sections.trackers.results.proxiedImages.text", {
-						count: images.length,
-					})}
-				</ListItemText>
-			</ListItemButton>
-			<Collapse in={showProxiedImages}>
-				<Box bgcolor={theme.palette.background.default}>
-					<List>
-						{images.map(image => (
-							<ListItemButton
-								href={isDev ? image.url : image.serverUrl}
-								target="_blank"
-								key={image.imageProxyId}
-							>
-								<ListItemText
-									primary={image.url}
-									secondary={
-										<>
-											<Grid
-												display="flex"
-												flexDirection="row"
-												alignItems="center"
-												container
-												component="span"
-												spacing={1}
-											>
-												<Grid item component="span">
-													<MdLocationOn />
-												</Grid>
-												<Grid item component="span">
-													{(() => {
-														if (
-															isBefore(
-																new Date(),
-																addHours(
-																	image.createdAt,
-																	serverSettings.imageProxyLifeTime,
-																),
-															)
-														) {
-															return t(
-																"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isStored",
-															)
-														} else {
-															return t(
-																"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isProxying",
-															)
-														}
-													})()}
-												</Grid>
-											</Grid>
-										</>
-									}
-								/>
-							</ListItemButton>
-						))}
-					</List>
-				</Box>
-			</Collapse>
-		</>
+		<ExpandableListItem
+			data={images}
+			icon={<BsImage />}
+			title={t("routes.ReportDetailRoute.sections.trackers.results.proxiedImages.text", {
+				count: images.length,
+			})}
+		>
+			<List>
+				{images.map(image => (
+					<ListItemButton
+						href={isDev ? image.url : image.serverUrl}
+						target="_blank"
+						key={image.imageProxyId}
+					>
+						<ListItemText
+							primary={image.url}
+							secondary={
+								<>
+									<Grid
+										display="flex"
+										flexDirection="row"
+										alignItems="center"
+										container
+										component="span"
+										spacing={1}
+									>
+										<Grid item component="span">
+											<MdLocationOn />
+										</Grid>
+										<Grid item component="span">
+											{(() => {
+												if (
+													isBefore(
+														new Date(),
+														addHours(
+															image.createdAt,
+															serverSettings.imageProxyLifeTime,
+														),
+													)
+												) {
+													return t(
+														"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isStored",
+													)
+												} else {
+													return t(
+														"routes.ReportDetailRoute.sections.trackers.results.proxiedImages.status.isProxying",
+													)
+												}
+											})()}
+										</Grid>
+									</Grid>
+								</>
+							}
+						/>
+					</ListItemButton>
+				))}
+			</List>
+		</ExpandableListItem>
 	)
 }
diff --git a/src/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem.tsx b/src/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem.tsx
index 6ab249e..b0491f7 100644
--- a/src/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem.tsx
+++ b/src/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem.tsx
@@ -1,20 +1,11 @@
-import {ReactElement, useState} from "react"
+import {ReactElement} from "react"
 
-import {
-	Box,
-	Collapse,
-	List,
-	ListItem,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	Typography,
-	useTheme,
-} from "@mui/material"
+import {List, ListItem, Typography} from "@mui/material"
 
 import {DecryptedReportContent} from "~/server-types"
 import {BsShieldShaded} from "react-icons/bs"
 import {useTranslation} from "react-i18next"
+import {ExpandableListItem} from "~/components"
 
 export interface SinglePixelImageTrackersListItemProps {
 	images: DecryptedReportContent["messageDetails"]["content"]["singlePixelImages"]
@@ -24,9 +15,6 @@ export default function SinglePixelImageTrackersListItem({
 	images,
 }: SinglePixelImageTrackersListItemProps): ReactElement {
 	const {t} = useTranslation()
-	const theme = useTheme()
-
-	const [showImageTrackers, setShowImageTrackers] = useState<boolean>(false)
 
 	const imagesPerTracker = images.reduce((acc, value) => {
 		acc[value.trackerName] = [...(acc[value.trackerName] || []), value]
@@ -35,39 +23,25 @@ export default function SinglePixelImageTrackersListItem({
 	}, {} as Record<string, Array<DecryptedReportContent["messageDetails"]["content"]["singlePixelImages"][0]>>)
 
 	return (
-		<>
-			<ListItemButton
-				onClick={() => {
-					if (images.length > 0) {
-						setShowImageTrackers(value => !value)
-					}
-				}}
-			>
-				<ListItemIcon>
-					<BsShieldShaded />
-				</ListItemIcon>
-				<ListItemText>
-					{t("routes.ReportDetailRoute.sections.trackers.results.imageTrackers.text", {
-						count: images.length,
-					})}
-				</ListItemText>
-			</ListItemButton>
-			<Collapse in={showImageTrackers}>
-				<Box bgcolor={theme.palette.background.default}>
-					<List>
-						{Object.entries(imagesPerTracker).map(([trackerName, images]) => (
-							<>
-								<Typography variant="caption" component="h3" ml={1}>
-									{trackerName}
-								</Typography>
-								{images.map(image => (
-									<ListItem key={image.source}>{image.source}</ListItem>
-								))}
-							</>
+		<ExpandableListItem
+			data={images}
+			icon={<BsShieldShaded />}
+			title={t("routes.ReportDetailRoute.sections.trackers.results.imageTrackers.text", {
+				count: images.length,
+			})}
+		>
+			<List>
+				{Object.entries(imagesPerTracker).map(([trackerName, images]) => (
+					<>
+						<Typography variant="caption" component="h3" ml={1}>
+							{trackerName}
+						</Typography>
+						{images.map(image => (
+							<ListItem key={image.source}>{image.source}</ListItem>
 						))}
-					</List>
-				</Box>
-			</Collapse>
-		</>
+					</>
+				))}
+			</List>
+		</ExpandableListItem>
 	)
 }
diff --git a/src/routes/AuthenticatedRoute.tsx b/src/routes/AuthenticatedRoute.tsx
index c92d7e7..56ab47c 100644
--- a/src/routes/AuthenticatedRoute.tsx
+++ b/src/routes/AuthenticatedRoute.tsx
@@ -46,7 +46,7 @@ export default function AuthenticatedRoute(): ReactElement {
 						justifyContent="space-between"
 						alignItems="center"
 					>
-						<Grid item xs={12} sm={3}>
+						<Grid item xs={12} md={3}>
 							<Box bgcolor={theme.palette.background.paper}>
 								<List component="nav">
 									{sections.map(key => (
@@ -57,7 +57,7 @@ export default function AuthenticatedRoute(): ReactElement {
 								</List>
 							</Box>
 						</Grid>
-						<Grid item xs={12} sm={9} height="100%">
+						<Grid item xs={12} md={9} height="100%">
 							<Grid
 								container
 								direction="column"
diff --git a/src/routes/ReportDetailRoute.tsx b/src/routes/ReportDetailRoute.tsx
index 35e887d..0c2e76a 100644
--- a/src/routes/ReportDetailRoute.tsx
+++ b/src/routes/ReportDetailRoute.tsx
@@ -11,6 +11,7 @@ import {getReport} from "~/apis"
 import {DecryptReport, 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 QueryResult from "~/components/QueryResult"
 import SinglePixelImageTrackersListItem from "~/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem"
@@ -100,6 +101,12 @@ function ReportDetailRoute(): ReactElement {
 														.messageDetails.content.proxiedImages
 												}
 											/>
+											<ExpandedUrlsListItem
+												urls={
+													(report as DecryptedReportContent)
+														.messageDetails.content.expandedUrls
+												}
+											/>
 										</List>
 									</SimplePageBuilder.Section>,
 								]}
diff --git a/src/server-types.ts b/src/server-types.ts
index 0f1663d..08ae590 100644
--- a/src/server-types.ts
+++ b/src/server-types.ts
@@ -147,7 +147,8 @@ export interface DecryptedReportContent {
 				trackerUrl: string
 			}>
 			expandedUrls: Array<{
-				url: string
+				originalUrl: string
+				expandedUrl: string
 				queryTrackers: []
 			}>
 		}