From 91af2b4b97bbf6b2c00e83f0a716e73e568b9771 Mon Sep 17 00:00:00 2001 From: Diego Date: Wed, 5 Jun 2024 09:59:02 -0400 Subject: [PATCH] Solving commentaries on PR --- .../SitePolygonStatus/SitePolygonStatus.tsx | 2 +- .../{StatusLeyend.tsx => StatusLegend.tsx} | 17 ++++++---- .../elements/Accordion/Accordion.tsx | 2 +- .../GoalProgressCard/GoalProgressCard.tsx | 5 ++- .../ItemMonitoringCards.tsx | 21 ++++++------ .../Cards/UserRoleCard/UserRoleCard.tsx | 27 ++++++++-------- .../elements/Inputs/Dropdown/Dropdown.tsx | 21 +++--------- .../Inputs/Dropdown/constants/colorMap.ts | 7 ++++ .../Inputs/FileInput/FilePreviewCard.tsx | 32 +++++++------------ .../constants/subtitleMapOnFailed.ts | 4 +++ .../constants/subtitleMapOnUploaded.ts | 4 +++ .../constants/subtitleMapOnUploading.ts | 4 +++ 12 files changed, 74 insertions(+), 72 deletions(-) rename src/admin/components/ResourceTabs/PolygonReviewTab/components/{StatusLeyend.tsx => StatusLegend.tsx} (77%) create mode 100644 src/components/elements/Inputs/Dropdown/constants/colorMap.ts create mode 100644 src/components/elements/Inputs/FileInput/constants/subtitleMapOnFailed.ts create mode 100644 src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploaded.ts create mode 100644 src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploading.ts diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx index 69c60f858..63a2bf513 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx @@ -9,7 +9,7 @@ const polygonStatusLabels = [ ]; const SitePolygonStatus = ({ statusLabel }: { statusLabel: string }) => { - let status = statusLabel === "Unkown" ? "Planting in progress" : statusLabel; + const status = statusLabel === "Unknown" ? "Planting in progress" : statusLabel; const statusIndex = polygonStatusLabels.findIndex(({ label }) => label === status); const progress = statusIndex === -1 ? 0 : statusIndex * 25; return ; diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx similarity index 77% rename from src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx rename to src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx index 8d257677d..176787cee 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLeyend.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/StatusLegend.tsx @@ -1,27 +1,30 @@ +import { useT } from "@transifex/react"; + import Text from "@/components/elements/Text/Text"; -const StatusLeyend = () => { +const StatusLegend = () => { + const t = useT(); return (
- Status Legend + {t("Status Legend")}
-
Status Legend +
{t("Status Legend")} -
Submitted +
{t("Submitted")} -
Approved +
{t("Approved")} -
Needs More Info +
{t("Needs More Info")}
); }; -export default StatusLeyend; +export default StatusLegend; diff --git a/src/components/elements/Accordion/Accordion.tsx b/src/components/elements/Accordion/Accordion.tsx index 763d262f0..56eb23bb3 100644 --- a/src/components/elements/Accordion/Accordion.tsx +++ b/src/components/elements/Accordion/Accordion.tsx @@ -30,7 +30,7 @@ const Accordion = ({ diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx index 8ce23ecd8..786f72bdc 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx @@ -28,8 +28,7 @@ const GoalProgressCard: FC = ({ labelValue, ...rest }) => { - const value = _val || 0; - const valueText = value; + const value = _val ?? 0; // Calculates percentage and clamps between 0 and 100 const progressValue = !limit ? 0 : Math.min(Math.max((value / limit) * 100, 0), 100); @@ -43,7 +42,7 @@ const GoalProgressCard: FC = ({ {label} - {valueText}  + {value}  of {limit} diff --git a/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx b/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx index 94e8092c0..ae04b0601 100644 --- a/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx +++ b/src/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards.tsx @@ -27,7 +27,7 @@ export interface ItemMonitoringCardsProps className?: string; img?: IconNames; type?: "graph" | "map" | "graph-button"; - leyends?: LeyendItemMonitoringCardsProps[]; + legends?: LeyendItemMonitoringCardsProps[]; } const ItemMonitoringCards = ({ @@ -42,7 +42,7 @@ const ItemMonitoringCards = ({ type, img, item, - leyends, + legends, key, ...props }: ItemMonitoringCardsProps) => { @@ -109,16 +109,15 @@ const ItemMonitoringCards = ({ />
- +
- {leyends && - leyends.map((leyend: any, index: number) => ( - -
-   - {leyend.title} - - ))} + {legends?.map((legend: any, index: number) => ( + +
+   + {legend.title} + + ))}
diff --git a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx index e01d7ed8e..8ffd30709 100644 --- a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx +++ b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx @@ -42,18 +42,19 @@ const UserRoleCard: React.FC = ({ ) } ]; - const displayOption = options?.find(m => { - if (selectedOption === null) { - return false; - } else { - if (title === "I’m a Government Official") { - return m.country_slug === selectedOption; - } else { - return m.data.label === selectedOption; - } - } - }); - const diplayTitle = displayOption ? displayOption.data.label : ""; + + const displayOptions = + selectedOption == null + ? null + : options?.find(m => { + if (title === "I’m a Government Official") { + return m.country_slug === selectedOption; + } else { + return m.data.label === selectedOption; + } + }); + + const diplayTitle = displayOptions ? displayOptions.data.label : ""; return (
= ({ selectedOption={selectedOption} > - {titleOptions || t("Select Fund")} + {titleOptions ?? t("Select Fund")} {diplayTitle ? `: ${diplayTitle}` : ""} diff --git a/src/components/elements/Inputs/Dropdown/Dropdown.tsx b/src/components/elements/Inputs/Dropdown/Dropdown.tsx index 788af8df0..c7517acc1 100644 --- a/src/components/elements/Inputs/Dropdown/Dropdown.tsx +++ b/src/components/elements/Inputs/Dropdown/Dropdown.tsx @@ -19,6 +19,7 @@ import { formatOptionsList, statusColor } from "@/utils/options"; import Status from "../../Status/Status"; import Text from "../../Text/Text"; import Checkbox from "../Checkbox/Checkbox"; +import { COLOR_MAP } from "./constants/colorMap"; export interface DropdownProps { customName?: string; @@ -82,7 +83,7 @@ const Dropdown = (props: PropsWithChildren) => { updateControl.current++; } }, [props.value, props.options, props.hasOtherOptions]); - const onChange = async (value: OptionValue | OptionValue[], _otherValue?: string) => { + const onChange = (value: OptionValue | OptionValue[], _otherValue?: string) => { let otherStr = typeof _otherValue === "string" ? _otherValue : otherValue; if (Array.isArray(value)) { if (props.onChangeConfirm) { @@ -135,18 +136,6 @@ const Dropdown = (props: PropsWithChildren) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [otherIsSelected, otherValue, t]); - const getColorStatus = (option: string): string => { - const colorMap: { [key: string]: string } = { - approved: "bg-green", - submitted: "bg-blue", - draft: "bg-pinkCustom", - "Under Review": "bg-tertiary-600", - "Needs More Info": "bg-tertiary-600" - }; - - return colorMap[option] ?? ""; - }; - return (
@@ -179,9 +168,9 @@ const Dropdown = (props: PropsWithChildren) => {
(value)) ?? "" - )}`} + className={`min-h-[8px] min-w-[8px] rounded-full ${ + COLOR_MAP[statusColor(options, toArray(value)) ?? ""] + }`} /> diff --git a/src/components/elements/Inputs/Dropdown/constants/colorMap.ts b/src/components/elements/Inputs/Dropdown/constants/colorMap.ts new file mode 100644 index 000000000..88e8f2984 --- /dev/null +++ b/src/components/elements/Inputs/Dropdown/constants/colorMap.ts @@ -0,0 +1,7 @@ +export const COLOR_MAP: { [key: string]: string } = { + approved: "bg-green", + submitted: "bg-blue", + draft: "bg-pinkCustom", + "Under Review": "bg-tertiary-600", + "Needs More Info": "bg-tertiary-600" +}; diff --git a/src/components/elements/Inputs/FileInput/FilePreviewCard.tsx b/src/components/elements/Inputs/FileInput/FilePreviewCard.tsx index 8fd7567f7..8bb6bbe6d 100644 --- a/src/components/elements/Inputs/FileInput/FilePreviewCard.tsx +++ b/src/components/elements/Inputs/FileInput/FilePreviewCard.tsx @@ -12,6 +12,9 @@ import { useFileSize } from "@/hooks/useFileSize"; import { UploadedFile } from "@/types/common"; import Text from "../../Text/Text"; +import { SUBTITLE_MAP_ON_FAILED } from "./constants/subtitleMapOnFailed"; +import { SUBTITLE_MAP_ON_UPLOADED } from "./constants/subtitleMapOnUploaded"; +import { SUBTITLE_MAP_ON_UPLOADING } from "./constants/subtitleMapOnUploading"; import { FilePreviewCardVariant, VARIANT_FILE_PREVIEW_CARD_DEFAULT } from "./FileInputVariants"; export interface FilePreviewCardProps { @@ -38,6 +41,7 @@ const FilePreviewCard = ({ onPrivateChange?.(file, checked); }; + const t = useT(); return (
@@ -72,7 +76,7 @@ const FilePreviewCard = ({ onDelete?.(file)} - aria-label="Delete button" + aria-label={t("Delete button")} iconProps={{ name: variant.type === "image" || variant.type === "geoFile" ? IconNames.TRASH_PA : IconNames.TRASH_CIRCLE, @@ -95,7 +99,7 @@ const FilePreviewCard = ({ "text-red": !fileStatus })} > - {fileStatus ? "GeoTagged Verified" : "Not Verified"} + {fileStatus ? t("GeoTagged Verified") : t("Not Verified")}
@@ -118,14 +122,10 @@ interface UploadingProps { const Uploading = ({ title, file, variant }: UploadingProps) => { const t = useT(); const { format } = useFileSize(); - const subtitleMap = { - image: "Image is being uploaded.", - geoFile: "Data is being uploaded." - }; let subtitle; - if (variant.type !== undefined && subtitleMap[variant.type] !== undefined) { - subtitle = subtitleMap[variant.type]; + if (variant.type !== undefined && SUBTITLE_MAP_ON_UPLOADING[variant.type] !== undefined) { + subtitle = SUBTITLE_MAP_ON_UPLOADING[variant.type]; } else { subtitle = "Uploading document ..."; } @@ -149,14 +149,10 @@ interface UploadedProps extends UploadingProps { const Uploaded = ({ title, file, showPrivateCheckbox, onPrivateChange, variant }: UploadedProps) => { const t = useT(); const { format } = useFileSize(); - const subtitleMap = { - image: "Image uploaded successfully!", - geoFile: "Data uploaded successfully!" - }; let subtitle; - if (variant.type !== undefined && subtitleMap[variant.type] !== undefined) { - subtitle = subtitleMap[variant.type]; + if (variant.type !== undefined && SUBTITLE_MAP_ON_UPLOADED[variant.type] !== undefined) { + subtitle = SUBTITLE_MAP_ON_UPLOADED[variant.type]; } else { subtitle = "Document Uploaded"; } @@ -183,14 +179,10 @@ interface FailedContentProps { const Failed = ({ title, errorMessage: errorState, variant }: FailedContentProps) => { const t = useT(); - const subtitleMap = { - image: "Error uploading image.", - geoFile: "Error uploading data." - }; let errorMessage; - if (variant.type !== undefined && subtitleMap[variant.type] !== undefined) { - errorMessage = subtitleMap[variant.type]; + if (variant.type !== undefined && SUBTITLE_MAP_ON_FAILED[variant.type] !== undefined) { + errorMessage = SUBTITLE_MAP_ON_FAILED[variant.type]; } else { errorMessage = "Upload Failed"; } diff --git a/src/components/elements/Inputs/FileInput/constants/subtitleMapOnFailed.ts b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnFailed.ts new file mode 100644 index 000000000..fe4c92b20 --- /dev/null +++ b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnFailed.ts @@ -0,0 +1,4 @@ +export const SUBTITLE_MAP_ON_FAILED = { + image: "Error uploading image.", + geoFile: "Error uploading data." +}; diff --git a/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploaded.ts b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploaded.ts new file mode 100644 index 000000000..294c2be0e --- /dev/null +++ b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploaded.ts @@ -0,0 +1,4 @@ +export const SUBTITLE_MAP_ON_UPLOADED = { + image: "Image uploaded successfully!", + geoFile: "Data uploaded successfully!" +}; diff --git a/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploading.ts b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploading.ts new file mode 100644 index 000000000..58e172201 --- /dev/null +++ b/src/components/elements/Inputs/FileInput/constants/subtitleMapOnUploading.ts @@ -0,0 +1,4 @@ +export const SUBTITLE_MAP_ON_UPLOADING = { + image: "Image is being uploaded.", + geoFile: "Data is being uploaded." +};