fix: use /eru-readiness-type/ api for eru type filtering

Author: samshara

app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx

@@ -23,11 +23,11 @@ function getReadinessColor(rank: number | undefined) {
     return styles.grayIcon;
 }
 
-type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness-type/'>;
 
-export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_types'][0] & {
-    eruOwner: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_owner_details'];
-    updatedAt: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['updated_at'];
+export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]> & {
+    eruOwner: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['eru_owner_details'];
+    updatedAt: NonNullable<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_readiness']>[0]['updated_at'];
 }>
 
 interface Props {

app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx

@@ -93,22 +93,31 @@ function EmergencyResponseUnitReadiness() {
         },
     });
 
+    const {
+        error: eruReadinessTypeError,
+        response: eruReadinessTypeResponse,
+        pending: eruReadinessTypePending,
+    } = useRequest({
+        url: '/api/v2/eru-readiness-type/',
+        preserveResponse: true,
+        query: {
+            type: filter.selectEruTypes,
+            eru_owner: filter.selectEruOwner,
+        },
+    });
+
     const {
         deployments_eru_type: deploymentEruType,
     } = useGlobalEnums();
 
     const [activeTab, setActiveTab] = useState<'eruType' | 'nationalSociety'>('eruType');
 
     const groupedByEruType = useMemo(() => {
-        const eruData = eruReadinessResponse?.results?.flatMap((readiness) => (
-            [...(readiness.eru_types.map((eruType) => (
-                {
-                    ...eruType,
-                    eruOwner: readiness.eru_owner_details,
-                    updatedAt: readiness.updated_at,
-                }
-            )))]
-        ));
+        const eruData = eruReadinessTypeResponse?.results?.map((d) => ({
+            ...d,
+            eruOwner: d.eru_readiness?.[0]?.eru_owner_details,
+            updatedAt: d.eru_readiness?.[0]?.updated_at,
+        }));
         return (
             mapToList(
                 listToGroupList(
@@ -118,18 +127,16 @@ function EmergencyResponseUnitReadiness() {
                 (readinessList, eruType) => ({ key: eruType, readinessList }),
             )
         );
-    }, [eruReadinessResponse?.results]);
+    }, [eruReadinessTypeResponse?.results]);
 
     const eruRendererParams = useCallback((_: string, item: {
         key: string;
         readinessList: ReadinessList;
     }) => ({
-        typeDisplay: item.readinessList[0].type_display,
-        nationalSocieties: joinStrings(unique(
-            item.readinessList.map((v) => (
-                v.eruOwner.national_society_country_details.society_name
-            )).filter(isDefined),
-        )),
+        typeDisplay: item.readinessList?.[0]?.type_display,
+        nationalSocieties: joinStrings(unique(item.readinessList.map((v) => (
+            v.eruOwner.national_society_country_details.society_name
+        ))).filter(isDefined)),
         fundingReadiness: minSafe(item.readinessList.map((v) => v.funding_readiness)),
         equipmentReadiness: minSafe(item.readinessList.map((v) => v.equipment_readiness)),
         peopleReadiness: minSafe(item.readinessList.map((v) => v.people_readiness)),
@@ -150,7 +157,7 @@ function EmergencyResponseUnitReadiness() {
             <Container
                 heading={resolveToString(
                     strings.eruReadinessCount,
-                    { count: eruReadinessResponse?.count },
+                    { count: eruReadinessResponse?.count ?? '-' },
                 )}
                 withHeaderBorder
                 actions={(
@@ -198,8 +205,8 @@ function EmergencyResponseUnitReadiness() {
                     <Grid
                         numPreferredColumns={3}
                         data={groupedByEruType}
-                        pending={eruReadinessPending}
-                        errored={isDefined(eruReadinessError)}
+                        pending={eruReadinessTypePending}
+                        errored={isDefined(eruReadinessTypeError)}
                         filtered={filtered}
                         keySelector={stringKeySelector}
                         renderer={EmergencyResponseUnitCard}