Add consideration guildance for all per components

IFRCGo · Sep 13, 2024 · a34a362 · a34a362
1 parent 886317c
commit a34a362
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx b/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx
@@ -96,7 +96,7 @@ function primaryBlueColorShadeselector(_: unknown, i: number) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noOp = () => {};
+const noOp = () => { };
 
 // eslint-disable-next-line import/prefer-default-export
 function PrivateCountryPreparedness() {
@@ -453,6 +453,14 @@ function PrivateCountryPreparedness() {
         [countryId, perId],
     );
 
+    const topRatedComponentsByArea = assessmentStats?.topRatedComponents?.reduce(
+        (acc, component) => {
+            acc[component.area.area_num] = component;
+            return acc;
+        },
+        {},
+    );
+
     return (
         <Container
             className={styles.privateCountryPreparedness}
@@ -664,9 +672,7 @@ function PrivateCountryPreparedness() {
                             </Heading>
                             <div className={styles.separator} />
                             {Object.entries(areaColorShades).map(([areaNum, color]) => {
-                                const area = assessmentStats?.topRatedComponents.find(
-                                    (component) => component.area.area_num === Number(areaNum),
-                                );
+                                const area = topRatedComponentsByArea?.[Number(areaNum)];
 
                                 if (!area) {
                                     return null;
@@ -675,7 +681,7 @@ function PrivateCountryPreparedness() {
                                 return (
                                     <LegendItem
                                         key={areaNum}
-                                        label={`${strings.areaLegend} ${areaNum}
+                                        label={`${strings.areaLegend} ${areaNum} 
                                             ${getFormattedComponentName(area.area)}`}
                                         color={color}
                                     />

diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/index.tsx
@@ -283,11 +283,7 @@ function ComponentInput(props: Props) {
                     withoutPadding
                     title={strings.epiConsiderationTitle}
                     description={(
-                        <ul className={styles.description}>
-                            <li>
-                                <HtmlOutput value={value?.epi_considerations_guidance} />
-                            </li>
-                        </ul>
+                        <HtmlOutput value={component?.epi_considerations_guidance} />
                     )}
                 >
                     <TextArea
@@ -305,7 +301,9 @@ function ComponentInput(props: Props) {
                 <InputSection
                     withoutPadding
                     title={strings.urbanConsiderationTitle}
-                    description={value?.urban_considerations_guidance}
+                    description={(
+                        <HtmlOutput value={component?.urban_considerations_guidance} />
+                    )}
                 >
                     <TextArea
                         name="urban_considerations"
@@ -323,11 +321,9 @@ function ComponentInput(props: Props) {
                     withoutPadding
                     title={strings.environmentConsiderationTitle}
                     description={(
-                        <ul className={styles.description}>
-                            <li>
-                                {value?.climate_environmental_considerations_guidance}
-                            </li>
-                        </ul>
+                        <HtmlOutput
+                            value={component?.climate_environmental_considerations_guidance}
+                        />
                     )}
                 >
                     <TextArea

diff --git a/app/src/views/PerExport/index.tsx b/app/src/views/PerExport/index.tsx
@@ -379,6 +379,14 @@ export function Component() {
         || assessmentResponsePending
         || perFetching;
 
+    const topRatedComponentsByArea = assessmentStats?.topRatedComponents?.reduce(
+        (acc, component) => {
+            acc[component.area.area_num] = component;
+            return acc;
+        },
+        {},
+    );
+
     return (
         <div className={styles.perExport}>
             <Container childrenContainerClassName={styles.pageTitleSection}>
@@ -558,9 +566,7 @@ export function Component() {
                             {strings.typeOfOperation}
                         </Heading>
                         {Object.entries(areaColorShades).map(([areaNum, color]) => {
-                            const area = assessmentStats?.topRatedComponents.find(
-                                (component) => component.area.area_num === Number(areaNum),
-                            );
+                            const area = topRatedComponentsByArea?.[Number(areaNum)];
 
                             if (!area) {
                                 return null;
@@ -569,7 +575,7 @@ export function Component() {
                             return (
                                 <LegendItem
                                     key={areaNum}
-                                    label={`${strings.areaLegend} ${areaNum}
+                                    label={`${strings.areaLegend} ${areaNum} 
                                             ${getFormattedComponentName(area.area)}`}
                                     color={color}
                                 />