Merge pull request #623 from IntersectMBO/fix/605-ga-display-searchin…

…g-misleading-text-when-no-items-are-found fix/605-ga-display-searching-misleading-text-when-no-items-are-found
IntersectMBO · Apr 4, 2024 · 40c9eac · 40c9eac
2 parents 95dfcea + f260c8c
commit 40c9eac
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 53 deletions.
diff --git a/govtool/frontend/src/components/molecules/EmptyStateGovernanceActionsCategory.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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"