Merge pull request #83 from globalfund/feat/DE-1458

feat: Setup country summaries in strapi CMS

src/app/hooks/useCMSCollections.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { useUpdateEffect } from "react-use";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+
+interface Props {
+  loadData?: boolean;
+  returnData?: boolean;
+}
+
+export function useCMSCollections(props: Props) {
+  const cmsData = useStoreState((state) => state.cms.formattedCollections);
+  const setCMSData = useStoreActions(
+    (actions) => actions.cms.formattedCollections.setPagesData
+  );
+
+  // Collections state
+  const countrySummaryCMSData = useStoreState(
+    (state) => state.cms.collections.countrySummary.data
+  );
+
+  // Collections actions
+  const countrySummaryCMSAction = useStoreActions(
+    (actions) => actions.cms.collections.countrySummary.fetch
+  );
+
+  function formatCMSData() {
+    const currentLanguage = "en";
+    const items = [
+      {
+        key: "countrySummary",
+        data: countrySummaryCMSData ?? {},
+      },
+    ];
+
+    const formattedData: any = {
+      countrySummary: [],
+    };
+    items.forEach((item) => {
+      // @ts-ignore
+      formattedData[item.key] = item.data.data
+        ?.filter((d: any) => d.attributes.locale === currentLanguage)
+        .map((d: any) => ({
+          ...d.attributes,
+        }));
+    });
+    setCMSData(formattedData);
+  }
+
+  React.useEffect(() => {
+    if (props.loadData) {
+      countrySummaryCMSAction({
+        isCMSfetch: true,
+        filterString: `locale=all&pagination[page]=1&pagination[pageSize]=150`,
+      });
+    }
+  }, []);
+
+  useUpdateEffect(() => {
+    if (props.loadData) {
+      formatCMSData();
+    }
+  }, [countrySummaryCMSData]);
+
+  if (props.returnData) {
+    return cmsData;
+  }
+
+  return null;
+}

src/app/index.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import Router from "app/router";
 import Providers from "app/Providers";
 import { useCMSData } from "./hooks/useCMSData";
+import { useCMSCollections } from "./hooks/useCMSCollections";
 
 export default function App() {
   useCMSData({ loadData: true });
+  useCMSCollections({ loadData: true });
   return (
     <Providers>
       <Router />

src/app/state/api/action-reducers/cms/collections.ts

@@ -0,0 +1,6 @@
+import { APIModel } from "app/state/api";
+import { CMSApiCallModel } from "app/state/api/interfaces";
+
+export const countrySummary: CMSApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_CMS_API}/country-summaries`),
+};

src/app/state/api/action-reducers/cms/formatted.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-param-reassign */
+import { action } from "easy-peasy";
+import { CMSFormattedCollectionsModel } from "app/state/api/interfaces";
+
+export const formattedCollections: CMSFormattedCollectionsModel = {
+  countrySummary: {},
+  setPagesData: action((state, payload) => {
+    state.countrySummary = payload.countrySummary;
+  }),
+};

src/app/state/api/interfaces/cms.ts

@@ -120,3 +120,30 @@ export interface CMSApiPagesGrantOverview {
 export interface CMSApiPagesGrantTargetResults {
   data: {};
 }
+
+export interface CMSApiCountrySummary {
+  data: {
+    meta: {
+      pagination: {
+        page: number;
+        pageSize: number;
+        totalPages: number;
+        totalRecords: number;
+      };
+    };
+    data: {
+      id: string;
+      type: string;
+      attributes: {
+        locale: string;
+        title: string;
+        description: string;
+        content: string;
+        image: string;
+        url: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+    }[];
+  };
+}

src/app/state/api/interfaces/index.ts

@@ -24,6 +24,7 @@ import {
   CMSApiPagesGrantGrantImplementation,
   CMSApiPagesGrantOverview,
   CMSApiPagesGrantTargetResults,
+  CMSApiCountrySummary,
 } from "app/state/api/interfaces/cms";
 
 export interface RequestValues<T> {
@@ -77,7 +78,19 @@ export type ApiCallModel = ApiModel<
   ApiCallParams | ApiCallParams[] | string,
   ApiResponseModel
 >;
-
+export interface CMSFormattedCollectionsModel {
+  countrySummary: {
+    [key: string]: string;
+  };
+  setPagesData: Action<
+    CMSFormattedCollectionsModel,
+    {
+      countrySummary: {
+        [key: string]: string;
+      };
+    }
+  >;
+}
 // CMS API Call model for
 export type CMSApiCallModel = ApiModel<
   CMSApiCallParams,
@@ -103,6 +116,7 @@ export type CMSApiCallModel = ApiModel<
   | CMSApiPagesGrantGrantImplementation
   | CMSApiPagesGrantOverview
   | CMSApiPagesGrantTargetResults
+  | CMSApiCountrySummary
 >;
 
 export interface CMSApiCallParams {}
@@ -244,5 +258,9 @@ export interface StoreModel {
     pagesGrantGrantImplementation: CMSApiCallModel;
     pagesGrantOverview: CMSApiCallModel;
     pagesGrantTargetResults: CMSApiCallModel;
+    formattedCollections: CMSFormattedCollectionsModel;
+    collections: {
+      countrySummary: CMSApiCallModel;
+    };
   };
 }

src/app/state/store/index.ts

@@ -130,6 +130,8 @@ import general from "app/state/api/action-reducers/cms/general";
 import { FinancialInsightsHGISankey } from "app/state/api/action-reducers/financial-insights/hgi-sankey";
 import { FinancialInsightsHGITable } from "app/state/api/action-reducers/financial-insights/hgi-table";
 import { DatasetsLatestUpdate } from "app/state/api/action-reducers/latest-update";
+import { countrySummary } from "../api/action-reducers/cms/collections";
+import { formattedCollections } from "../api/action-reducers/cms/formatted";
 
 const storeContent: StoreModel = {
   // homepage
@@ -304,6 +306,10 @@ const storeContent: StoreModel = {
     pagesGrantGrantImplementation: persist(pagesGrantGrantImplementation),
     pagesGrantOverview: persist(pagesGrantOverview),
     pagesGrantTargetResults: persist(pagesGrantTargetResults),
+    collections: {
+      countrySummary: persist(countrySummary),
+    },
+    formattedCollections: persist(formattedCollections),
   },
 };