Solving commentaries on PR

wri · Jun 5, 2024 · 91af2b4 · 91af2b4
1 parent 22212ae
commit 91af2b4
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 72 deletions.
diff --git a/...mponents/ResourceTabs/PolygonReviewTab/components/SitePolygonStatus/SitePolygonStatus.tsx b/...mponents/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 <StepProgressbar color="primary" value={progress} labels={polygonStatusLabels} labelVariant="text-10" />;

diff --git a/...ygonReviewTab/components/StatusLeyend.tsx → ...ygonReviewTab/components/StatusLegend.tsx b/...ygonReviewTab/components/StatusLeyend.tsx → ...ygonReviewTab/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 (
     <div className="flex flex-col px-2">
       <Text variant="text-16-bold" className="text-darkCustom">
-        Status Legend
+        {t("Status Legend")}
       </Text>
       <div>
         <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
-          <div className="aspect-square h-3 w-3 rounded-sm bg-pinkCustom" /> Status Legend
+          <div className="aspect-square h-3 w-3 rounded-sm bg-pinkCustom" /> {t("Status Legend")}
         </Text>
         <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
-          <div className="aspect-square h-3 w-3 rounded-sm bg-blue" /> Submitted
+          <div className="aspect-square h-3 w-3 rounded-sm bg-blue" /> {t("Submitted")}
         </Text>
         <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
-          <div className="aspect-square h-3 w-3 rounded-sm bg-green" /> Approved
+          <div className="aspect-square h-3 w-3 rounded-sm bg-green" /> {t("Approved")}
         </Text>
         <Text variant="text-14-semibold" className="flex items-center gap-2 py-2 text-darkCustom">
-          <div className="aspect-square h-3 w-3 rounded-sm bg-tertiary-600" /> Needs More Info
+          <div className="aspect-square h-3 w-3 rounded-sm bg-tertiary-600" /> {t("Needs More Info")}
         </Text>
       </div>
     </div>
   );
 };
 
-export default StatusLeyend;
+export default StatusLegend;
diff --git a/src/components/elements/Accordion/Accordion.tsx b/src/components/elements/Accordion/Accordion.tsx
@@ -30,7 +30,7 @@ const Accordion = ({
     <Disclosure
       as="div"
       defaultOpen={defaultOpen}
-      className={classNames(`${className}`, {
+      className={classNames(className, {
         "rounded-lg border-2 border-neutral-100 shadow": variant === "default" || variant === "secondary"
       })}
     >

diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx
@@ -28,8 +28,7 @@ const GoalProgressCard: FC<GoalProgressCardProps> = ({
   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<GoalProgressCardProps> = ({
             {label}
           </Text>
           <Text variant="text-24-bold" className="flex w-full items-baseline">
-            {valueText}&nbsp;
+            {value}&nbsp;
             <When condition={!!limit}>
               <Text variant="text-16-light">of {limit}</Text>
             </When>

diff --git 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 = ({
             />
           </div>
         </When>
-        <When condition={!!leyends}>
+        <When condition={!!legends}>
           <div className="mt-2 flex flex-wrap justify-center gap-x-2">
-            {leyends &&
-              leyends.map((leyend: any, index: number) => (
-                <Text as="span" key={index} variant="text-8" className="flex items-center whitespace-nowrap">
-                  <div className={`h-1 w-1 lg:h-2 lg:w-2 ${leyend.color} rounded-full`} />
-                  &nbsp;
-                  {leyend.title}
-                </Text>
-              ))}
+            {legends?.map((legend: any, index: number) => (
+              <Text as="span" key={index} variant="text-8" className="flex items-center whitespace-nowrap">
+                <div className={`h-1 w-1 lg:h-2 lg:w-2 ${legend.color} rounded-full`} />
+                &nbsp;
+                {legend.title}
+              </Text>
+            ))}
           </div>
         </When>
       </div>

diff --git a/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx b/src/components/elements/Cards/UserRoleCard/UserRoleCard.tsx
@@ -42,18 +42,19 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
       )
     }
   ];
-  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 (
     <article
@@ -81,7 +82,7 @@ const UserRoleCard: React.FC<UserRoleCardProps> = ({
             selectedOption={selectedOption}
           >
             <Text variant="text-12-bold" className="text-primary">
-              {titleOptions || t("Select Fund")}
+              {titleOptions ?? t("Select Fund")}
               {diplayTitle ? `: ${diplayTitle}` : ""}
             </Text>
           </Menu>

diff --git 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<DropdownProps>) => {
       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<DropdownProps>) => {
     // 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 (
     <div className={tw("space-y-2", props.containerClassName)}>
       <Listbox value={selected} defaultValue={selected} onChange={onChange} multiple={props.multiSelect}>
@@ -179,9 +168,9 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
               <div className="flex items-center gap-2">
                 <When condition={options?.[0]?.meta != null}>
                   <div
-                    className={`min-h-[8px] min-w-[8px] rounded-full ${getColorStatus(
-                      statusColor(options, toArray<any>(value)) ?? ""
-                    )}`}
+                    className={`min-h-[8px] min-w-[8px] rounded-full ${
+                      COLOR_MAP[statusColor(options, toArray<any>(value)) ?? ""]
+                    }`}
                   />
                 </When>
                 <Text variant={props.inputVariant ?? "text-14-light"} className="w-full line-clamp-1">

diff --git a/src/components/elements/Inputs/Dropdown/constants/colorMap.ts 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
@@ -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 (
     <div className={tw(variant.fileWrapper, className)}>
@@ -72,7 +76,7 @@ const FilePreviewCard = ({
             <IconButton
               type="button"
               onClick={() => 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")}
                 </Text>
               </div>
             </When>
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,4 @@
+export const SUBTITLE_MAP_ON_UPLOADING = {
+  image: "Image is being uploaded.",
+  geoFile: "Data is being uploaded."
+};