diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb
index a277e91..0dd8698 100644
--- a/app/controllers/api/v1/notifications_controller.rb
+++ b/app/controllers/api/v1/notifications_controller.rb
@@ -11,6 +11,7 @@ def mark_as_read
if params[:id]
notification = current_user.notifications.find(params[:id])
notification.mark_as_read!
+ render json: notification, status: 200
else
current_user.notifications.update_all(read_at: Time.now)
end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 131e8b3..fe25e5c 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -17,7 +17,7 @@ def navbar_props
},
userAttributes: {
currentUserEmail: current_user&.email,
- notificationCount: current_user&.unread_notifications_count
+ unreadNotificationCount: current_user&.unread_notifications_count
},
isLoggedIn: current_user.present?
}
diff --git a/app/decorators/notification_decorator.rb b/app/decorators/notification_decorator.rb
index 7fa4e49..d772138 100644
--- a/app/decorators/notification_decorator.rb
+++ b/app/decorators/notification_decorator.rb
@@ -1,6 +1,10 @@
class NotificationDecorator < ApplicationDecorator
delegate_all
+ def decorated_created_at
+ "#{h.time_ago_in_words(object.created_at)} ago"
+ end
+
def mark_as_read_link
unless object.read_at
"| #{h.link_to 'mark as read', '#'}"
diff --git a/app/javascript/components/NavBar.js b/app/javascript/components/NavBar.js
index eff1649..89e74cd 100644
--- a/app/javascript/components/NavBar.js
+++ b/app/javascript/components/NavBar.js
@@ -12,15 +12,43 @@ 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;
+
+ 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 }
+
+ newState.unreadNotificationCount = newUnreadCount
+ this.setState({ notifications: updatedNotifications, userAttributes: newState })
+ console.log(this.state);
+
+ // this is correct, i need to replace the notification in the notification part of state to refresh the dropdown
+ })
+ .catch((error) => {
+ console.log(error);
+ })
+ }
+ // make api call
+ }
+
render () {
const { isLoggedIn, userAttributes, routes, notifications } = this.state
const { rootPath } = routes
@@ -35,7 +63,12 @@ class NavBar extends Component {
{ isLoggedIn
- ?