Merge pull request #128 from openeew/warning

Add warning, modify mock data

Author: krook

web/client/package-lock.json

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import EventsMap from '../../components/EventsMap'
 import { Dropdown } from 'carbon-components-react'
 import EarthquakeList from '../../components/EarthquakeList'
@@ -7,6 +7,7 @@ import { CheckmarkFilled16 } from '@carbon/icons-react'
 import Field from '../../components/Field'
 import { earthquakes, takeEventsMapSnapshot } from '../../context/app'
 import { formatCoordinates, formatDate, formatTime } from '../../utils'
+import AppContext from '../../context/app'
 
 const dayInSeconds = 86400
 
@@ -38,6 +39,16 @@ const Events = () => {
   const [selectedTimeFilter, setSelectedTimeFilter] = useState(
     items[defaultTimeFilterIndex]
   )
+  const { addToast } = useContext(AppContext)
+
+  useEffect(() => {
+    addToast({
+      kind: 'warning',
+      caption:
+        'The dashboard is a work in progress. In the near future, this page will show events detected by OpenEEW regional networks. Currently, this page uses mock data to demonstrate its features.',
+      title: 'Note: This data is not real, but will be soon!',
+    })
+  }, [])
 
   return (
     <div className="events-page">
@@ -72,10 +83,6 @@ const Events = () => {
               <h4>{earthquakes.length}</h4>
               <span>Earthquakes detected</span>
             </div>
-            <div>
-              <h4>2,400</h4>
-              <span>Subscribers alerted</span>
-            </div>
           </div>
           <div className="events-page-earthquake-list__container">
             <EarthquakeList

web/client/src/content/Events/index.js

@@ -8,39 +8,39 @@ export const earthquakes = [
   {
     pos: [-104.3533, 20.65],
     magnitude: 1,
-    locationText: '3km South of Blah Blah town',
+    locationText: 'Sample Event Lorem ipsum',
     country: 'Mexico',
     date: new Date().getTime(),
     alertDelay: 1,
   },
   {
     pos: [-99.3533, 20.65],
     magnitude: 2,
-    locationText: '15km South of Yadayada town',
+    locationText: 'Sample Event Lorem dolor',
     country: 'Mexico',
     date: new Date().getTime() - 86400 * 7 * 1000,
     alertDelay: 5,
   },
   {
     pos: [-102.3533, 25.65],
     magnitude: 3,
-    locationText: '3km South of Lorem Ipsum',
+    locationText: 'Sample Event Lorem',
     country: 'Mexico',
     date: new Date().getTime() - 86400 * 30 * 1000,
     alertDelay: 3,
   },
   {
     pos: [-96.01, 16.01],
     magnitude: 4,
-    locationText: '3km East of Mexico City',
+    locationText: 'Sample Lorem ipsum dolor',
     country: 'Mexico',
     date: new Date().getTime() - 86400 * 90 * 1000,
     alertDelay: 4,
   },
   {
     pos: [-108.01, 28.01],
     magnitude: 5,
-    locationText: '3km East of Some Random Town',
+    locationText: 'Lorem ipsum dolor',
     country: 'Mexico',
     date: new Date().getTime() - 86400 * 365 * 1000,
     alertDelay: 5,