add identifier

Author: thelostone-mc

src/components/Form/FormControllers/MetricsFormController/MetricsFormController.tsx

@@ -31,35 +31,35 @@ export const MetricsFormController: React.FC<MetricsFormControllerProps> = ({ na
       render={({ field: { value, onChange } }) => {
         const selectedMetrics = value || [];
 
-        const handleToggleMetric = (title: string) => {
-          const newValue = selectedMetrics.includes(title)
-            ? selectedMetrics.filter((t: string) => t !== title)
-            : [...selectedMetrics, title];
+        const handleToggleMetric = (identifier: string) => {
+          const newValue = selectedMetrics.includes(identifier)
+            ? selectedMetrics.filter((t: string) => t !== identifier)
+            : [...selectedMetrics, identifier];
           onChange(newValue);
         };
 
-        const isMetricSelected = (title: string) => selectedMetrics.includes(title);
+        const isMetricSelected = (identifier: string) => selectedMetrics.includes(identifier);
 
         return (
           <div className="space-y-6">
             {metrics.map((metric) => (
               <MetricCard
-                key={metric.title}
+                key={metric.identifier}
                 {...metric}
-                onClick={() => handleToggleMetric(metric.title)}
+                onClick={() => handleToggleMetric(metric.identifier)}
                 className="w-full"
                 customButton={
-                  isMetricSelected(metric.title) ? (
+                  isMetricSelected(metric.identifier) ? (
                     <Button
                       value={"Added to Round"}
-                      onClick={() => handleToggleMetric(metric.title)}
+                      onClick={() => handleToggleMetric(metric.identifier)}
                       className="flex items-center gap-2 rounded bg-moss-100 px-4 py-2 text-sm font-medium text-moss-700 hover:bg-moss-50"
                       icon={<Icon className="size-4" type={IconType.CHECK} />}
                     />
                   ) : (
                     <Button
                       value={"Add to Round"}
-                      onClick={() => handleToggleMetric(metric.title)}
+                      onClick={() => handleToggleMetric(metric.identifier)}
                       variant="light-purple"
                       icon={<Icon className="size-4" type={IconType.CHECK} />}
                     />

src/components/GenericProgressForm/mocks/RoundSetup.ts

@@ -105,18 +105,21 @@ const roundDescriptionAndRequirementsArgs = {
 };
 const metrics = [
   {
-    title: "Metric 1",
+    name: "Metric 1",
     description: "Description for Metric 1",
+    identifier: "metric-1",
     onReadMore: () => void 0,
   },
   {
-    title: "Metric 2",
+    name: "Metric 2",
     description: "Description for Metric 2",
+    identifier: "metric-2",
     onReadMore: () => void 0,
   },
   {
-    title: "Metric 3",
+    name: "Metric 3",
     description: "Description for Metric 3",
+    identifier: "metric-3",
     onReadMore: () => void 0,
   },
 ];

src/features/retrofunding/components/MetricCard/MetricCard.tsx

@@ -31,7 +31,8 @@ const metricCardVariants = tv({
 });
 
 export interface MetricCardProps {
-  title: string;
+  name: string;
+  identifier: string;
   description: string;
   variant?: "metric" | "ballot";
   isAdded?: boolean;
@@ -81,7 +82,7 @@ const MetricCardLoading: React.FC<{ hideButton: boolean }> = ({ hideButton }) =>
 };
 
 const MetricCardState: React.FC<MetricCardProps> = ({
-  title,
+  name,
   description,
   variant = "metric",
   isAdded = false,
@@ -143,7 +144,7 @@ const MetricCardState: React.FC<MetricCardProps> = ({
     <div className={cn(base(), background, className)}>
       <div className={content()}>
         <div className={cn(leftSection(), hideButton && "w-full")}>
-          <h3 className={headingClass()}>{title}</h3>
+          <h3 className={headingClass()}>{name}</h3>
           <div className={paragraphClass()}>{description}</div>
         </div>
         {!hideButton && <div className={buttonContainer()}>{renderButton()}</div>}