From 2840645b94e594232f07f2cfb02342b6292c9151 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:25:50 +0100
Subject: [PATCH] added EmptyStateScreen.tsx to ReportsRoute.tsx

---
 public/locales/en/translation.json            |  4 ++
 .../ReportsRoute/EmptyStateScreen.tsx         | 28 +++++++++++
 src/routes/ReportsRoute.tsx                   | 47 +++++++++++--------
 3 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 src/route-widgets/ReportsRoute/EmptyStateScreen.tsx

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 54957ae..8c9334c 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -168,6 +168,10 @@
         },
         "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",
diff --git a/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx b/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
new file mode 100644
index 0000000..93c1e71
--- /dev/null
+++ b/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
@@ -0,0 +1,28 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+
+import {Grid, Typography} from "@mui/material"
+import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi"
+import Icon from "@mdi/react"
+
+export default function EmptyStateScreen(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Grid container spacing={4} direction="column" alignItems="center">
+			<Grid item>
+				<Typography variant="h6" component="h2">
+					{t("routes.ReportsRoute.emptyState.title")}
+				</Typography>
+			</Grid>
+			<Grid item>
+				<Icon path={mdiTextBoxMultiple} size={2.5} />,
+			</Grid>
+			<Grid item>
+				<Typography variant="body1">
+					{t("routes.ReportsRoute.emptyState.description")}
+				</Typography>
+			</Grid>
+		</Grid>
+	)
+}
diff --git a/src/routes/ReportsRoute.tsx b/src/routes/ReportsRoute.tsx
index c2ce26f..fb49633 100644
--- a/src/routes/ReportsRoute.tsx
+++ b/src/routes/ReportsRoute.tsx
@@ -14,6 +14,7 @@ import {getReports} from "~/apis"
 import {WithEncryptionRequired} from "~/hocs"
 import {DecryptReport} from "~/components"
 import {createEnumMapFromTranslation} from "~/utils"
+import EmptyStateScreen from "~/route-widgets/ReportsRoute/EmptyStateScreen"
 import QueryResult from "~/components/QueryResult"
 import ReportInformationItem from "~/route-widgets/ReportsRoute/ReportInformationItem"
 import SimplePage from "~/components/SimplePage"
@@ -43,26 +44,28 @@ function ReportsRoute(): ReactElement {
 		<SimplePage
 			title="Reports"
 			pageOptionsActions={
-				<TextField
-					value={sortingView}
-					onChange={event => setSortingView(event.target.value as SortingView)}
-					label="Sorting"
-					id="sorting"
-					InputProps={{
-						startAdornment: (
-							<InputAdornment position="start">
-								{SORTING_VIEW_ICON_MAP[sortingView]}
-							</InputAdornment>
-						),
-					}}
-					select
-				>
-					{Object.keys(SORTING_VIEW_NAME_MAP).map(name => (
-						<MenuItem key={name} value={name}>
-							{t(SORTING_VIEW_NAME_MAP[name as SortingView])}
-						</MenuItem>
-					))}
-				</TextField>
+				(query.data?.items?.length || 0) > 0 && (
+					<TextField
+						value={sortingView}
+						onChange={event => setSortingView(event.target.value as SortingView)}
+						label="Sorting"
+						id="sorting"
+						InputProps={{
+							startAdornment: (
+								<InputAdornment position="start">
+									{SORTING_VIEW_ICON_MAP[sortingView]}
+								</InputAdornment>
+							),
+						}}
+						select
+					>
+						{Object.keys(SORTING_VIEW_NAME_MAP).map(name => (
+							<MenuItem key={name} value={name}>
+								{t(SORTING_VIEW_NAME_MAP[name as SortingView])}
+							</MenuItem>
+						))}
+					</TextField>
+				)
 			}
 		>
 			<QueryResult<PaginationResult<Report>> query={query}>
@@ -72,6 +75,10 @@ function ReportsRoute(): ReactElement {
 							{reports => (
 								<>
 									{(() => {
+										if (result.items.length === 0) {
+											return <EmptyStateScreen />
+										}
+
 										switch (sortingView) {
 											case SortingView.List:
 												return sortArray(