[43] Add mark all as read link

notmarkmiranda · Feb 21, 2019 · f461dda · f461dda
1 parent 1994b92
commit f461dda
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb
@@ -13,7 +13,8 @@ def mark_as_read
       notification.mark_as_read!
       render json: notification, status: 200
     else
-      current_user.notifications.update_all(read_at: Time.now)
+      current_user.notifications.where(read_at: nil).update_all(read_at: Time.now)
+      render json: current_user.last_five_notifications
     end
   end
 

diff --git a/app/javascript/components/NavBar.js b/app/javascript/components/NavBar.js
@@ -12,35 +12,44 @@ class NavBar extends Component {
   }
 
   componentDidMount() {
-    console.log(this.state);
     if (this.state.isLoggedIn) {
       axios.get(this.state.routes.lastFiveNotificationsPath)
         .then((response) => {
           this.setState({ notifications: response.data })
-          console.log(this.state);
         })
     } else {
     }
   }
 
   markSingleNotificationAsRead = (notificationId) => {
-    if (notificationId) {
-      const csrfToken = document.querySelector('[name="csrf-token"]').content;
-      axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;
+    const csrfToken = document.querySelector('[name="csrf-token"]').content;
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;
 
+    if (notificationId) {
       axios.patch(`/api/v1/notifications/${notificationId}/mark_as_read`)
         .then((response) => {
-          const newUnreadCount = this.state.userAttributes.unreadNotificationCount - 1
           const index = this.state.notifications.findIndex((notification) => notification.id === notificationId)
           const updatedNotifications = this.state.notifications
           updatedNotifications[index] = response.data
-          const newState = { ...this.state.userAttributes }
+          const newUserAttributes = { ...this.state.userAttributes }
+
+          const newUnreadCount = this.state.userAttributes.unreadNotificationCount - 1
+          newUserAttributes.unreadNotificationCount = newUnreadCount
+
+          this.setState({ notifications: updatedNotifications, userAttributes: newUserAttributes })
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+    } else {
+      axios.patch(`/api/v1/notifications/mark_as_read`)
+        .then((response) => {
+          const updatedNotifications = response.data
 
-          newState.unreadNotificationCount = newUnreadCount
-          this.setState({ notifications: updatedNotifications, userAttributes: newState })
-          console.log(this.state);
+          const newUserAttributes = { ...this.state.userAttributes }
+          newUserAttributes.unreadNotificationCount = 0
 
-          // this is correct, i need to replace the notification in the notification part of state to refresh the dropdown
+          this.setState({ notifications: updatedNotifications, userAttributes: newUserAttributes })
         })
         .catch((error) => {
           console.log(error);

diff --git a/app/javascript/components/Notification.js b/app/javascript/components/Notification.js
@@ -8,7 +8,7 @@ const Notification = ({ notificationText, notificationReadAt, notificationCreate
         { notificationCreatedAt }
         {
           !notificationReadAt &&
-            <span> | <a onClick={ () =>  markSingleNotificationAsRead(notificationId) } className="muted-text caption-text">mark as read</a></span>
+            <span> | <a href="#" onClick={ () =>  markSingleNotificationAsRead(notificationId) } className="muted-text caption-text">mark as read</a></span>
         }
       </div>
     </div>

diff --git a/app/javascript/components/UserNav.js b/app/javascript/components/UserNav.js
@@ -65,7 +65,8 @@ class UserNav extends Component {
             <div className="dropdown-divider"></div>
             <a href={ notificationsPath } className="dropdown-item">view all notifications</a>
             {
-              unreadNotificationCount > 0 && <a href='#' className="dropdown-item">mark all as read</a>
+              unreadNotificationCount > 0 &&
+                <a href='#' onClick={ () => markSingleNotificationAsRead() } className="dropdown-item">mark all as read</a>
             }
             </div>
           </li> { /* notifications dropdown */ }