feat(page): fetch notifications and pass them as props to Header comp…

…onent

.env.sample

@@ -32,7 +32,10 @@ NEXT_PUBLIC_PLANET_API_KEY=
 NEXT_PUBLIC_GFW_API_KEY=
 
 # Wordpress
-NEXT_PUBLIC_WORDPRESS_URL=
+NEXT_PUBLIC_WORDPRESS_URL=http://global-forest-watch-blog.lndo.site/wp-json
+
+# this is only needed locally, to consume wp-json
+NODE_TLS_REJECT_UNAUTHORIZED=0
 
 # New Relic (used in lieu of newrelic.js)
 NEW_RELIC_APP_NAME=

.gitignore

@@ -46,3 +46,5 @@ yarn-error.log*
 
 # new relic agent
 newrelic_agent.log
+
+.yalc

components/header/component.jsx

@@ -7,7 +7,7 @@ import NavLink from 'components/nav-link';
 
 import config from './config';
 
-const Header = ({ setModalContactUsOpen, fullScreen, slim }) => {
+const Header = ({ setModalContactUsOpen, fullScreen, slim, notifications }) => {
   const { push, pushQuery, asPath, query } = useRouter();
 
   return (
@@ -21,6 +21,7 @@ const Header = ({ setModalContactUsOpen, fullScreen, slim }) => {
             <a className={className}>{headerChildren}</a>
           </NavLink>
         ) : null}
+      notifications={notifications}
       openContactUsModal={() => setModalContactUsOpen(true)}
       setQueryToUrl={(search) => push(`/search/?query=${search}`)}
       fullScreen={fullScreen}
@@ -39,6 +40,7 @@ Header.propTypes = {
   fullScreen: PropTypes.bool,
   href: PropTypes.string,
   slim: PropTypes.bool,
+  notifications: PropTypes.array,
 };
 
 export default Header;

pages/index.js

@@ -1,14 +1,18 @@
 import PageLayout from 'wrappers/page';
 import SeoSearchBox from 'wrappers/seo/searchBox';
 
+import PropTypes from 'prop-types';
+
 import Home from 'layouts/home';
 
 import { getNewsArticles } from 'services/news';
+import { getPublishedNotifications } from 'services/notifications';
 
 const HomePage = (props) => (
   <PageLayout
     title="Forest Monitoring, Land Use & Deforestation Trends | Global Forest Watch"
     description="Global Forest Watch offers free, real-time data, technology and tools for monitoring the world’s forests, enabling better protection against illegal deforestation and unsustainable practices."
+    notifications={props.notifications}
   >
     <SeoSearchBox
       title="Forest Monitoring, Land Use & Deforestation Trends | Global Forest Watch"
@@ -20,12 +24,18 @@ const HomePage = (props) => (
 
 export const getStaticProps = async () => {
   const newsArticles = await getNewsArticles();
+  const notifications = await getPublishedNotifications();
 
   return {
     props: {
       news: newsArticles || [],
+      notifications: notifications || [],
     },
   };
 };
 
+HomePage.propTypes = {
+  notifications: PropTypes.array,
+};
+
 export default HomePage;

services/notifications.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+
+const mapResponseToNotification = ({
+  id,
+  date,
+  status,
+  title,
+  content,
+  acf,
+}) => {
+  return {
+    id,
+    dateCreated: date,
+    status,
+    title: title.rendered,
+    content: content.rendered,
+    icon: acf.notification_icon,
+    date: acf.notification_date,
+  };
+};
+
+export const getPublishedNotifications = async () => {
+  try {
+    const notificationsData = await axios.get(
+      `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/wp/v2/notice?per_page=100&page=1&orderby=date&order=desc`
+    );
+
+    return notificationsData?.data.map((item) =>
+      mapResponseToNotification(item)
+    );
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('error trying to fetch notifications', e);
+    return null;
+  }
+};

wrappers/page/component.jsx

@@ -25,6 +25,7 @@ const PageWrapper = ({
   error,
   errorTitle,
   errorDescription,
+  notifications,
 }) => {
   useTrackPage();
   useSetLanguage();
@@ -42,7 +43,7 @@ const PageWrapper = ({
         metaTags={metaTags}
       />
       <div className="l-page">
-        <Header />
+        <Header notifications={notifications} />
         <div className={cx('content-wrapper', { '-error': error })}>
           {isFallback && <Loader />}
           {!isFallback && error && (
@@ -74,6 +75,7 @@ PageWrapper.propTypes = {
   error: PropTypes.number,
   errorTitle: PropTypes.string,
   errorDescription: PropTypes.string,
+  notifications: PropTypes.array,
 };
 
 PageWrapper.defaultProps = {