Merge pull request #71 from globalfund/feat/DE-1148

feat: DE-1148 Connect Strapi content to app

README.md

@@ -30,8 +30,8 @@ In order to be able to successfully run or build the app you need to create an e
 REACT_APP_API=<data middleware api url>
 REACT_APP_MAPBOX_TOKEN=<mapbox account token>
 REACT_APP_GOOGLE_ANALYTICS_ID=<google analytics app id>
-REACT_APP_CMS_API=<cockpit cms api url>
-REACT_APP_CMS_TOKEN=<cockpit cms api token>
+REACT_APP_CMS_API=<strapi cms api url>
+REACT_APP_CMS_TOKEN=<strapi cms api token>
 ```
 
 `REACT_APP_API`: is the url where the data middleware API runs on. If running [Data API Middleware](https://github.com/globalfund/data-explorer-server/) locally then you can use `http://localhost:4200`.
@@ -40,9 +40,9 @@ REACT_APP_CMS_TOKEN=<cockpit cms api token>
 
 `REACT_APP_GOOGLE_ANALYTICS_ID`(optional): Google Analytics ID in order to be able to make use of Google Analytics services.
 
-`REACT_APP_CMS_API`: is the url where the [Cockpit CMS API](https://github.com/zimmerman-team/the-data-explorer-cms/) runs on.
+`REACT_APP_CMS_API`: is the url where the [Strapi CMS API](https://github.com/zimmerman-team/CMS/) runs on. The project/de branch.
 
-`REACT_APP_CMS_TOKEN`: is the API token retrieved from the Cockpit CMS interface.
+`REACT_APP_CMS_TOKEN`: is the API token retrieved from the Strapi CMS interface.
 
 ---
 

src/app/components/search/components/results/index.tsx

@@ -4,6 +4,7 @@ import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreState } from "app/state/store/hooks";
 import { getIcon } from "app/components/search/icons";
 import LinearProgress from "@mui/material/LinearProgress";
+import { getCMSDataField } from "app/utils/getCMSDataField";
 import { SearchResultModel } from "app/components/search/components/results/data";
 import {
   ResultA,
@@ -86,12 +87,16 @@ export function SearchResults(props: SearchResultsProps) {
         })}
         {props.results.length === 0 && !props.loading && hasLoaded && (
           <NoResults>
-            {get(cmsData, "componentsSearch.noResults", "No results found.")}
+            {getCMSDataField(
+              cmsData,
+              "componentsSearch.noResults",
+              "No results found."
+            )}
           </NoResults>
         )}
         {props.loading && (
           <NoResults>
-            {get(cmsData, "componentsSearch.loading", "Loading...")}
+            {getCMSDataField(cmsData, "componentsSearch.loading", "Loading...")}
           </NoResults>
         )}
       </Results>

src/app/components/search/layout.tsx

@@ -12,6 +12,7 @@ import { Dropdown } from "app/components/dropdown";
 import SearchIcon from "@mui/icons-material/Search";
 import { categories } from "app/components/search/data";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { getCMSDataField } from "app/utils/getCMSDataField";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import { SearchResults } from "app/components/search/components/results";
 import {
@@ -115,7 +116,7 @@ export function SearchLayout(props: SearchLayoutProps) {
           ref={inputRef}
           value={props.value}
           id="general-search"
-          placeholder={get(
+          placeholder={getCMSDataField(
             cmsData,
             "componentsSearch.placeholder",
             "e.g. Kenya"