Fetch summaries and key insights from API

IFRCGo · Aug 8, 2024 · c0f456a · c0f456a
1 parent e7d45c3
commit c0f456a
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 31 deletions.
diff --git a/app/src/views/OperationalLearnings/ByComponent/index.tsx b/app/src/views/OperationalLearnings/ByComponent/index.tsx
@@ -1,24 +1,37 @@
 import { Container } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
 
-import i18n from './i18n.json';
+import { useRequest } from '#utils/restRequest';
 
 function ByComponent() {
-    const strings = useTranslation(i18n);
+    const {
+        response: summariesresponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/summary/',
+        preserveResponse: true,
+    });
 
     return (
         <Container
-            heading={strings.opsLearningsSummariesTitle}
-            headerDescription={strings.opsLearningsSummariesDescription}
-            actions={(
-                <div>
-                    66 source 13 operations
-                </div>
-            )}
-            footerContent={(
-                <div>see sources</div>
-            )}
-        />
+            headingLevel={2}
+            spacing="relaxed"
+        >
+            { summariesresponse?.components?.map((result) => (
+                <Container
+                    heading={result.title}
+                    headerDescription={result.content}
+                    actions={(
+                        <div>
+                            66 source 13 operations
+                        </div>
+                    )}
+                    footerActions={(
+                        <div>
+                            see sources
+                        </div>
+                    )}
+                />
+            ))}
+        </Container>
     );
 }
 

diff --git a/app/src/views/OperationalLearnings/BySector/index.tsx b/app/src/views/OperationalLearnings/BySector/index.tsx
@@ -1,25 +1,37 @@
 import { Container } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
 
-import i18n from './i18n.json';
+import { useRequest } from '#utils/restRequest';
 
 function BySector() {
-    const strings = useTranslation(i18n);
+    const {
+        response: summariesresponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/summary/',
+        preserveResponse: true,
+    });
+
     return (
         <Container
-            heading="health"
-            headerDescription={strings.opsLearningsSummariesDescription}
-            actions={(
-                <div>
-                    66 source 13 operations
-                </div>
-            )}
-            footerContent={(
-                <div>
-                    see sources
-                </div>
-            )}
-        />
+            headingLevel={2}
+            spacing="relaxed"
+        >
+            { summariesresponse?.sectors.map((result) => (
+                <Container
+                    heading={result.title}
+                    headerDescription={result.content}
+                    actions={(
+                        <div>
+                            66 source 13 operations
+                        </div>
+                    )}
+                    footerActions={(
+                        <div>
+                            see sources
+                        </div>
+                    )}
+                />
+            ))}
+        </Container>
     );
 }
 

diff --git a/app/src/views/OperationalLearnings/i18n.json b/app/src/views/OperationalLearnings/i18n.json
@@ -4,6 +4,7 @@
     "operationalLearningsHeading":"Operational Learnings",
     "operationalLearningsHeadingDescription":"Operational learnings in emergencies are the lessons learned from managing and dealing with crises, refining protocols for resource allocation, decision-making, communication strategies, and others.  The summaries are generated using AI and Large Language Models, based on data coming from Final DREF Reports, Emergency Appeal reports and others.",
     "byComponentTitle":"Component",
-    "bySectorTitle":"Sector"
+    "bySectorTitle":"Sector",
+    "opsLearningsSummariesHeading":"Summary of Learnings"
     }
 }
diff --git a/app/src/views/OperationalLearnings/index.tsx b/app/src/views/OperationalLearnings/index.tsx
@@ -1,4 +1,5 @@
 import {
+    Key,
     useCallback,
     useState,
 } from 'react';
@@ -18,6 +19,7 @@ import { EntriesAsList } from '@togglecorp/toggle-form';
 
 import Page from '#components/Page';
 import useFilterState from '#hooks/useFilterState';
+import { useRequest } from '#utils/restRequest';
 
 import ByComponent from './ByComponent';
 import BySector from './BySector';
@@ -59,6 +61,22 @@ export function Component() {
     }, [setFilterField]);
 
     const selectedFilterOptions = mapToList(selectedFilter, (label, key) => ({ key, label }));
+    const isSpecificFilterSelected = () => {
+        if (!selectedFilter) {
+            return false;
+        }
+        const {
+            country, disasterType, sector, component,
+        } = selectedFilter;
+        return !!country || !!disasterType || !!sector || !!component;
+    };
+    const {
+        pending: insightSpending,
+        response: insightsResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/summary/',
+        preserveResponse: true,
+    });
 
     return (
         <Page
@@ -79,6 +97,33 @@ export function Component() {
                     </div>
                 )))}
             />
+            {isSpecificFilterSelected() && (
+                <Container
+                    heading={strings.opsLearningsSummariesHeading}
+                    contentViewType="grid"
+                    numPreferredGridContentColumns={3}
+                    footerContent={(
+                        <>
+                            <div>Disclaimer</div>
+                            <div>Report an issue</div>
+                        </>
+                    )}
+                    footerActions={(
+                        <div> Show sources</div>
+                    )}
+                >
+                    {Array.isArray(insightsResponse?.id) && insightsResponse?.id.map(
+                        (id: Key | null | undefined) => (
+                            <Container
+                                key={id}
+                                pending={insightSpending}
+                                heading={insightsResponse.insights1_title}
+                                headerDescription={insightsResponse.insights1_content}
+                            />
+                        ),
+                    )}
+                </Container>
+            )}
             <Tabs
                 onChange={setActiveTab}
                 value={activeTab}