Cloud function created and deployed in firebase!

employeemanagement/functions/index.js

 const functions = require('firebase-functions');
+const loginAdmin = require('firebase-admin');
+loginAdmin.initializeApp(functions.config().firebase);
+
+exports.newSignup = functions.auth.user()
+    .onCreate(user => {
+        return loginAdmin.firestore().collection('users')
+        .doc(user.uid).get().then(doc => {
+
+            const user = doc.data();
+            const alert = {
+                title: 'New User Joined',
+                name: `${user.firstName} ${user.lastName}`,
+                timeStamp: loginAdmin.firestore.FieldValue.serverTimestamp()
+            }
+            return addNotifyAlert(alert);
+        })
+})
+
+const addNotifyAlert = (notifi => {
+    return loginAdmin.firestore().collection('notifyalerts')
+    .add(notifi)
+    .then(doc => console.log('notifyalerts added', doc));
+})
\ No newline at end of file

employeemanagement/functions/package.json

@@ -9,7 +9,7 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "10"
+    "node": "8"
   },
   "main": "index.js",
   "dependencies": {

employeemanagement/src/components/dashboard/Dashboard.js

@@ -11,7 +11,7 @@ import Notification from '../layout/Notification';
 
 class Dashboard extends Component {
     render() {
-        const { profile, auth, shiftList, schedule } = this.props;
+        const { profile, auth, shiftList, schedule, notifyalerts } = this.props;
         const list = shiftList && shiftList.length ? (
             shiftList.filter(l => {
                 return l.empId == auth.uid
@@ -26,15 +26,15 @@ class Dashboard extends Component {
 
         if( !auth.uid ) return <Redirect to='/signin' />
         return (
-            <div id="content">
+            <div id = "content">
                 <Navbar profile = { profile } />
-                <div className="row">
-                    <div className="col-9">
-                        <ManageShift uid={ auth.uid } todayList={ todayList } />
-                        <ShiftReport workList={ list } schedule={ schedule } />
+                <div className = "row">
+                    <div className = "col-9">
+                        <ManageShift uid = { auth.uid } todayList = { todayList } />
+                        <ShiftReport workList = { list } schedule = { schedule } />
                     </div>
-                    <div className="col-3">
-                        <Notification />
+                    <div className = "col-3">
+                        <Notification notify = {notifyalerts} />
                     </div>
                 </div>
             </div>
@@ -48,14 +48,16 @@ const mapStateToProps = (state) => {
         shiftList: state.firestore.ordered.Shifts,
         schedule: state.firestore.ordered.schedule,
         auth: state.firebase.auth,
-        profile: state.firebase.profile
+        profile: state.firebase.profile,
+        notifyalerts: state.firestore.ordered.notifyalerts
     }
 }
 
 export default compose(
     firestoreConnect([
-        {collection: 'Shifts'},
-        {collection: 'schedule'}
+        {collection: 'Shifts', orderBy: ['date', 'desc']},
+        {collection: 'schedule'},
+        {collection: 'notifyalerts', limit: 3, orderBy: ['timeStamp', 'desc']}
       ]),
     connect(mapStateToProps)
 )(Dashboard)

employeemanagement/src/components/layout/Notification.js

 import React from 'react';
+import moment from 'moment';
 
 const notify = (props) => {
+    const { notify } = props;
     return(
         <nav className="bg-primary pt-3 pb-3">
             <div className="container text-white">
                 <h4 className="text-center">Notifications</h4>
-                <ul className="text-decoration-none">
-                    <li>notification notification</li>
-                    <li>notification</li>
-                    <li>notification</li>
+                <ul className="list-unstyled">
+                    {notify && notify.map(notification => {
+                        return(
+                            <li key = { notification.id }>
+                                <span className="text-dark">{ notification.name } </span>
+                                <span>{ notification.title } </span>
+                                <div>{ moment(notification.timeStamp.toDate()).fromNow() }</div>
+                            </li>
+                        )
+                    })}
                 </ul>
             </div>
         </nav>