call backend service for system notices (#2179)

* call backend service for system notices

* remove debugger

.env

@@ -132,11 +132,6 @@ REACT_APP_ATTIC_QUERY_OFFSET_MINUTES = 10
 REACT_APP_MATOMO_URL=''
 REACT_APP_MATOMO_SITE_ID=''
 
-# Optional URL to a JSON file containing system notices to be displayed to
-# users, such as notice of upcoming maintenance. See:
-# https://github.com/maproulette/maproulette3/wiki/Server-Admin:-System-Notices
-# for details
-REACT_APP_SYSTEM_NOTICES_URL=''
 REACT_APP_FUNDRAISING_NOTICES_URL=''
 # Custom keyword categories configuration
 # Additional categories of one or more keywords can be added into the Work On

src/components/SystemNotices/SystemNotices.js

@@ -16,9 +16,9 @@ const SystemNotices = function(props) {
     >
       <span className="mr-flex mr-items-center">
         <SvgSymbol
-          sym="info-icon"
+          sym={notice.icon || "info-icon"}
           viewBox="0 0 40 40"
-          className="mr-fill-red-light mr-w-10 mr-w-10 mr-cursor-pointer mr-mx-4"
+          className={`mr-fill-${notice.color || "red-light"} mr-w-10 mr-w-10 mr-cursor-pointer mr-mx-4`}
         />
 
         <MarkdownContent markdown={notice.message} className="mr-markdown--base" />

src/services/Server/APIRoutes.js

@@ -188,6 +188,7 @@ const apiRoutes = (factory) => {
       notifications: factory.get("/user/:userId/notifications"),
       markNotificationsRead: factory.put("/user/:userId/notifications"),
       deleteNotifications: factory.put("/user/:userId/notifications/delete"),
+      announcements: factory.get("/user/announcements")
     },
     teams: {
       find: factory.get("/teams/find"),

src/services/SystemNotices/SystemNotices.js

@@ -1,9 +1,8 @@
-import _isEmpty from 'lodash/isEmpty'
 import _isArray from 'lodash/isArray'
 import parse from 'date-fns/parse'
 import isFuture from 'date-fns/is_future'
-
-const NOTICES_URL = process.env.REACT_APP_SYSTEM_NOTICES_URL
+import Endpoint from '../Server/Endpoint'
+import { defaultRoutes as api } from "../Server/Server";
 
 /**
  * Fetches system notices from the configured URL. Reponse is expected to be a
@@ -32,26 +31,21 @@ const NOTICES_URL = process.env.REACT_APP_SYSTEM_NOTICES_URL
  *    }
  * ```
  */
-export const fetchActiveSystemNotices = async function() {
-  if (_isEmpty(NOTICES_URL)) {
-    return []
-  }
-
-  const response = await fetch(NOTICES_URL)
-  if (response.ok) {
-    const systemNotices = await response.json()
-    if (!systemNotices || !_isArray(systemNotices.notices)) {
-      return []
-    }
-
-    return systemNotices.notices.map(notice => {
-      // add Date instance for expiration timestamp
-      notice.expirationDate = parse(notice.expirationTimestamp)
-      return notice
-    }).filter(notice => isFuture(notice.expirationDate))
-  }
-  else {
-    // Allow server admin to delete file when not in use
-    return []
-  }
+export const fetchActiveSystemNotices = () => {
+  return new Endpoint(api.user.announcements)
+    .execute()
+    .then(response => {
+      const systemNotices = response?.message?.notices
+      if (_isArray(systemNotices)) {    
+        return systemNotices.map(notice => {
+          // add Date instance for expiration timestamp
+          notice.expirationDate = parse(notice.expirationTimestamp)
+          return notice
+        }).filter(notice => isFuture(notice.expirationDate))
+      }
+      else {
+        // Allow server admin to delete file when not in use
+        return []
+      }
+    })
 }