diff --git a/src/app/hooks/useCMSCollections.tsx b/src/app/hooks/useCMSCollections.tsx new file mode 100644 index 000000000..03ccd8308 --- /dev/null +++ b/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; +} diff --git a/src/app/index.tsx b/src/app/index.tsx index 6fa70bc1e..bf2aad94c 100644 --- a/src/app/index.tsx +++ b/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 ( diff --git a/src/app/state/api/action-reducers/cms/collections.ts b/src/app/state/api/action-reducers/cms/collections.ts new file mode 100644 index 000000000..b5f16afcb --- /dev/null +++ b/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`), +}; diff --git a/src/app/state/api/action-reducers/cms/formatted.ts b/src/app/state/api/action-reducers/cms/formatted.ts new file mode 100644 index 000000000..20088e674 --- /dev/null +++ b/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; + }), +}; diff --git a/src/app/state/api/interfaces/cms.ts b/src/app/state/api/interfaces/cms.ts index 4de122567..22e49eb6e 100644 --- a/src/app/state/api/interfaces/cms.ts +++ b/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; + }; + }[]; + }; +} diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts index f39f1a590..c3b75596f 100644 --- a/src/app/state/api/interfaces/index.ts +++ b/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 { @@ -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; + }; }; } diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts index fb1f152d3..a0b4846b0 100644 --- a/src/app/state/store/index.ts +++ b/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), }, };