From 90f90258afd12fc3d69c45fb35dce5cf44f571e6 Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Thu, 19 Dec 2024 11:06:54 +0545
Subject: [PATCH] Add api integration for keyfigures,charts

---
 app/src/views/OperationalLearning/index.tsx | 122 +++++---------------
 1 file changed, 27 insertions(+), 95 deletions(-)

diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
index f741143ca..806bf8b0c 100644
--- a/app/src/views/OperationalLearning/index.tsx
+++ b/app/src/views/OperationalLearning/index.tsx
@@ -24,6 +24,7 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
+    DateLike,
     getDatesSeparatedByMonths,
     getFormattedDateKey,
     hasSomeDefinedValue,
@@ -94,6 +95,7 @@ type QueryType = Pick<
     | 'per_component_validated__in'
     | 'search_extracts'
 >;
+type Learnings = GoApiResponse<'/api/v2/ops-learning/stats'>;
 
 const regionKeySelector = (region: RegionOption) => region.key;
 const countryKeySelector = (country: Country) => country.id;
@@ -103,86 +105,7 @@ const perComponentKeySelector = (option: PerComponent) => option.id;
 const disasterTypeKeySelector = (type: DisasterType) => type.id;
 const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
 
-const responseData = {
-    operations_included: 9,
-    learning_extracts: 6,
-    sectors_covered: 6,
-    sources_used: 8,
-    learning_by_region: [
-        {
-            region_name: 'Americas',
-            region_id: 1,
-            count: 2,
-        },
-        {
-            region_name: 'Asia Pacific',
-            region_id: 2,
-            count: 5,
-        },
-        {
-            region_name: 'Europe',
-            region_id: 3,
-            count: 2,
-        },
-    ],
-    learning_by_sector: [
-        {
-            id: 17,
-            count: 1,
-            title: 'health',
-        },
-        {
-            id: 18,
-            count: 1,
-            title: 'education',
-        },
-        {
-            id: 19,
-            count: 3,
-            title: 'Livelihoods and basic needs',
-        },
-        {
-            id: 20,
-            count: 4,
-            title: 'Migration',
-        },
-        {
-            id: 21,
-            count: 1,
-            title: 'WASH',
-        },
-        {
-            id: 22,
-            count: 1,
-            title: 'Shelter',
-        },
-    ],
-    sources_overtime: {
-        DREF: [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 3 },
-        ],
-        'Emergency Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'International Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'Forecast Based Action': [
-            { year: 2022, count: 1 },
-        ],
-    },
-};
-
-const timeSeriesDataKeys = Object.entries(
-    responseData.sources_overtime,
-).flatMap(([source, entries]) => entries.map((entry) => ({
-    date: `${entry.year}-01-01`,
-    value: entry.count,
-    source,
-})));
+const timeSeriesDataKeys = ['Learnings'];
 
 const oneYearAgo = new Date();
 oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
@@ -394,14 +317,26 @@ export function Component() {
         setQuery(undefined);
     }, [resetFilter]);
 
+    const {
+        response: learningStatsResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/stats/',
+        query: {
+            ...query,
+        },
+    });
     const timeSeriesValueSelector = useCallback(
         (_: string, date: Date) => {
-            const entry = timeSeriesDataKeys?.find(
-                (source) => getFormattedDateKey(source.date) === getFormattedDateKey(date),
-            );
-            return entry ? entry.value : undefined;
+            if (!Array.isArray(learningStatsResponse)) {
+                return 0;
+            }
+            return learningStatsResponse.find(
+                (source: { date: DateLike; }) => (
+                    getFormattedDateKey(source.date) === getFormattedDateKey(date)
+                ),
+            )?.count ?? 0;
         },
-        [],
+        [learningStatsResponse],
     );
 
     return (
@@ -566,40 +501,37 @@ export function Component() {
                     </>
                 )}
             />
-            <div
-                className={styles.keyFigureCardList}
-            >
+            <div className={styles.keyFigureCardList}>
                 <div className={styles.keyFigureCard}>
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.operations_included}
+                        value={learningStatsResponse?.operations_included}
                         label={strings.operationsIncluded}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sources_used}
+                        value={learningStatsResponse?.sources_used}
                         label={strings.sourcesUsed}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.learning_extracts}
+                        value={learningStatsResponse?.learning_extracts}
                         label={strings.learningExtract}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sectors_covered}
+                        value={learningStatsResponse?.sectors_covered}
                         label={strings.sectorsCovered}
                         labelClassName={styles.keyFigureDescription}
                     />
                 </div>
             </div>
-
             <div
                 className={styles.learningOverview}
             >
@@ -614,7 +546,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_sector}
+                            data={learningStatsResponse?.learning_by_sector}
                             keySelector={sectorsKeySelector}
                             valueSelector={sectorsValueSelector}
                             labelSelector={sectorsLabelSelector}
@@ -627,7 +559,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_region}
+                            data={learningStatsResponse?.learning_by_region}
                             keySelector={regionsKeySelector}
                             valueSelector={regionValueSelector}
                             labelSelector={regionLabelSelector}