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

@@ -1,4 +1,5 @@
 import moment from "moment";
+import { title } from "process";
 
 import { FormField, FormStep } from "@/types";
 
@@ -107,16 +108,19 @@ const metrics = [
   {
     title: "Metric 1",
     description: "Description for Metric 1",
+    identifier: "metric-1",
     onReadMore: () => void 0,
   },
   {
     title: "Metric 2",
     description: "Description for Metric 2",
+    identifier: "metric-2",
     onReadMore: () => void 0,
   },
   {
     title: "Metric 3",
     description: "Description for Metric 3",
+    identifier: "metric-3",
     onReadMore: () => void 0,
   },
 ];

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

@@ -32,6 +32,7 @@ const metricCardVariants = tv({
 
 export interface MetricCardProps {
   title: string;
+  identifier: string;
   description: string;
   variant?: "metric" | "ballot";
   isAdded?: boolean;