From f260c8cefa6a40c767a14fc40b14739f72282383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Thu, 4 Apr 2024 13:30:47 +0200
Subject: [PATCH] [#605] empty state for search GAs

---
 .../EmptyStateGovernanceActionsCategory.tsx   | 40 +++++++++++++++++++
 .../src/components/molecules/index.ts         |  1 +
 .../src/components/molecules/types.ts         |  5 +++
 .../DashboardGovernanceActionsCategory.tsx    | 34 +++++-----------
 .../src/pages/GovernanceActionsCategory.tsx   | 37 +++++------------
 5 files changed, 64 insertions(+), 53 deletions(-)
 create mode 100644 govtool/frontend/src/components/molecules/EmptyStateGovernanceActionsCategory.tsx

diff --git a/govtool/frontend/src/components/molecules/EmptyStateGovernanceActionsCategory.tsx b/govtool/frontend/src/components/molecules/EmptyStateGovernanceActionsCategory.tsx
new file mode 100644
index 000000000..5ed979ac8
--- /dev/null
+++ b/govtool/frontend/src/components/molecules/EmptyStateGovernanceActionsCategory.tsx
@@ -0,0 +1,40 @@
+import { Typography } from "@atoms";
+import { useTranslation } from "@hooks";
+import { getProposalTypeLabel } from "@utils";
+
+import { EmptyStateGovernanceActionsCategoryProps } from "./types";
+
+export const EmptyStateGovernanceActionsCategory = ({
+  category,
+  isSearch,
+}: EmptyStateGovernanceActionsCategoryProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Typography
+      sx={{
+        fontWeight: 300,
+        py: 4,
+      }}
+    >
+      {isSearch ? (
+        t("govActions.noResultsForTheSearch")
+      ) : (
+        <>
+          {t("govActions.withCategoryNotExist.partOne")}
+          &nbsp;
+          <Typography
+            sx={{
+              display: "inline",
+              fontWeight: 700,
+            }}
+          >
+            {getProposalTypeLabel(category ?? "")}
+          </Typography>
+          &nbsp;
+          {t("govActions.withCategoryNotExist.partTwo")}
+        </>
+      )}
+    </Typography>
+  );
+};
diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts
index 419010f63..dad2697b0 100644
--- a/govtool/frontend/src/components/molecules/index.ts
+++ b/govtool/frontend/src/components/molecules/index.ts
@@ -10,6 +10,7 @@ export * from "./DataActionsFilters";
 export * from "./DataActionsSorting";
 export * from "./DataMissingInfoBox";
 export * from "./DRepInfoCard";
+export * from "./EmptyStateGovernanceActionsCategory";
 export * from "./Field";
 export * from "./GovActionDetails";
 export * from "./GovernanceActionCard";
diff --git a/govtool/frontend/src/components/molecules/types.ts b/govtool/frontend/src/components/molecules/types.ts
index 88f349091..f67f05ba1 100644
--- a/govtool/frontend/src/components/molecules/types.ts
+++ b/govtool/frontend/src/components/molecules/types.ts
@@ -21,3 +21,8 @@ export type SoleVoterActionProps = {
   onClickArrow: () => void;
   sx?: SxProps;
 };
+
+export type EmptyStateGovernanceActionsCategoryProps = {
+  category?: string;
+  isSearch?: boolean;
+};
diff --git a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
index 77cdebdb2..5c8ab4318 100644
--- a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
+++ b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
@@ -5,7 +5,11 @@ import { Box, CircularProgress, Link } from "@mui/material";
 import { Background, Typography } from "@atoms";
 import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
 import { useCardano } from "@context";
-import { DataActionsBar, GovernanceActionCard } from "@molecules";
+import {
+  DataActionsBar,
+  EmptyStateGovernanceActionsCategory,
+  GovernanceActionCard,
+} from "@molecules";
 import {
   useDataActionsBar,
   useFetchNextPageDetector,
@@ -109,30 +113,10 @@ export const DashboardGovernanceActionsCategory = () => {
                 <CircularProgress />
               </Box>
             ) : !mappedData?.length ? (
-              <Typography
-                sx={{
-                  fontWeight: 300,
-                  py: 4,
-                }}
-              >
-                <Box display="flex" flexWrap="wrap" mt={4}>
-                  <Typography fontWeight={300}>
-                    {t("govActions.withCategoryNotExist.partOne")}
-                    &nbsp;
-                  </Typography>
-                  <Typography
-                    sx={{
-                      fontWeight: 700,
-                    }}
-                  >
-                    {` ${category} `}
-                  </Typography>
-                  <Typography fontWeight={300}>
-                    &nbsp;
-                    {t("govActions.withCategoryNotExist.partTwo")}
-                  </Typography>
-                </Box>
-              </Typography>
+              <EmptyStateGovernanceActionsCategory
+                category={category}
+                isSearch={!!debouncedSearchText.length}
+              />
             ) : (
               <Box
                 columnGap="20px"
diff --git a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
index 5d7501a72..19562ec85 100644
--- a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
+++ b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
@@ -5,7 +5,11 @@ import { Box, CircularProgress, Link } from "@mui/material";
 import { Background, Typography } from "@atoms";
 import { GOVERNANCE_ACTIONS_SORTING, ICONS, PATHS } from "@consts";
 import { useCardano } from "@context";
-import { DataActionsBar, GovernanceActionCard } from "@molecules";
+import {
+  DataActionsBar,
+  EmptyStateGovernanceActionsCategory,
+  GovernanceActionCard,
+} from "@molecules";
 import { Footer, TopNav } from "@organisms";
 import {
   useGetProposalsInfiniteQuery,
@@ -116,33 +120,10 @@ export const GovernanceActionsCategory = () => {
             </Typography>
             {!isProposalsLoading ? (
               !mappedData?.length ? (
-                <Typography fontWeight={300} sx={{ py: 4 }}>
-                  <Box mt={4} display="flex" flexWrap="wrap">
-                    <Typography fontWeight={300}>
-                      {t("govActions.withCategoryNotExist.partOne")}
-                      &nbsp;
-                    </Typography>
-                    <Typography fontWeight={700}>
-                      {category}
-                      &nbsp;
-                    </Typography>
-                    {debouncedSearchText && (
-                      <>
-                        <Typography fontWeight={300}>
-                          {t("govActions.withCategoryNotExist.optional")}
-                          &nbsp;
-                        </Typography>
-                        <Typography fontWeight={700}>
-                          {debouncedSearchText}
-                        </Typography>
-                      </>
-                    )}
-                    <Typography fontWeight={300}>
-                      &nbsp;
-                      {t("govActions.withCategoryNotExist.partTwo")}
-                    </Typography>
-                  </Box>
-                </Typography>
+                <EmptyStateGovernanceActionsCategory
+                  category={category}
+                  isSearch={!!debouncedSearchText.length}
+                />
               ) : (
                 <Box
                   columnGap="20px"