implemented notification component

Author: ayush221b

src/Components/dashboard/Dashboard.js

@@ -9,7 +9,7 @@ import {Redirect} from 'react-router-dom'
 class Dashboard extends Component {
 
     render(){
-        const {projects, auth} = this.props;
+        const {projects, auth, notifications} = this.props;
         if(!auth.uid) {
             return <Redirect to="/signin" />
         }
@@ -22,7 +22,7 @@ class Dashboard extends Component {
                             <ProjectList projects={projects}/>
                         </div>
                         <div className="col s12 m5 offset-m1">
-                            <Notifications/>
+                            <Notifications notifications={notifications}/>
                         </div>
                     </div>
                 </div>
@@ -35,13 +35,15 @@ const mapStateToProps = (state) => {
     console.log(state)
     return {
         projects: state.fireStore.ordered.projects,
-        auth: state.firebase.auth
+        auth: state.firebase.auth,
+        notifications: state.fireStore.ordered.notifications
     }
 }
 
 export default compose(
     connect(mapStateToProps),
     firestoreConnect([
-        {collection: 'projects'}
+        {collection: 'projects'},
+        {collection : 'notifications', limit:3, orderBy: ['time', 'desc']}
     ])
 )(Dashboard)

src/Components/dashboard/Notifications.js

@@ -1,7 +1,11 @@
 import React from 'react'
+import moment from 'moment'
 
 const Notifications = (props) =>{
 
+    const {notifications} = props;
+    console.log(notifications)
+
     return(
         <div className="section">
             <div className="card z-depth-0">
@@ -10,18 +14,19 @@ const Notifications = (props) =>{
                         Notifications
                     </span>
                     <ul className="notifications">
-                        <li>
-                            Notification
-                        </li>
-                        <li>
-                            Notification
-                        </li>
-                        <li>
-                            Notification
-                        </li>
-                        <li>
-                            Notification
-                        </li>
+                        {notifications && notifications.map(item=> {
+                            return(
+                                <li key={item.id}>
+                                    <span className="pink-text">{item.user} </span>
+                                    <span className="pink-text">
+                                        {item.content}
+                                    </span>
+                                    <div className="grey-text note-date">
+                                        {moment(item.time.toDate()).fromNow()}
+                                    </div>
+                                </li>
+                            )
+                        })}
                     </ul>
                 </div>
             </div>