Forum: Comments and Notifications

[IsoPhoenix]

Forum: Comments and Notifications

Overview:

• Ability to leave top-level comments on forum posts and for authors of a post to be notified when someone leaves a comment on their post
• Notifications page to display notifications from ALL joined classrooms

Resources:

• React Router documentation in wiki
• MUI Snackbar component (below)
• Firebase onSnapshot (below)

Frontend:

• In the page for a specific post, add the ability to leave a text comment. Also list all comments on that post by recency, and include for each comment:
  • Author
  • Post time
  • Text content
• An "inbox" or "notifications" page (Inbox.tsx) that can be accessed from the top navbar (at least for now)
  • You'll want to add to the routing in App.tsx
  • List a user's notifications in order of creation time, and have the ability to filter by specific classrooms
  • Notification includes:
    • The content of the comment left on the post
    • The relevant classroom name and post title
• Notifications popups (snackbars) for when a user gets a new notification
  • Clicking the notification should navigate you to the post in question

Backend:

• Check the database diagram for updated data structures
• You should enforce these structures by adding new types for comments/notifications/etc in types.ts
• Adding/viewing comments:
  • Listen to the comments collection for a given post
  • On adding a comment, update the comments collection AND add a new document to the author's notifications collection. Remember that the post author field is a user/player id that you can use to access the appropriate notificaitons collection
• Viewing notifications in inbox:
  • Listen to the user's notifications collection.
  • IMPORTANT: We want ALL the relevant info for the notification to be inside the notification document, like the author name, classroom name, post name, author avatar, etc. That means those fields have to be queried from other database locations and added to the notification document when a comment is added (see above). The current database diagram for notifications is thus incomplete, and you should expect to add new fields to it based on what info you want to store. Let me know what additional fields you decide on!
    • We expect the number of times the notifications page is opened to be greater than the number of comments left, so the above solution will result in less DB calls than storing minimal information inside the notification doc and then querying it all whenever the user opens their inbox.
• Notification popups in snackbars:
  • You'll probably add some overlay component in App.tsx with variable visibility depending on when the notification is displayed. MUI should have preset snackbar components you can use
  • Use notistack to accomplish this (at the bottom of the snackbar link above). As of 2/28 I pushed an update to main containing base notistack functionality (set up in App.tsx and ClassroomCard.tsx.)
  • Content should probably be like, "New comment from AUTHOR on POST NAME"
  • For listeners, you should check documentation for Viewing Changes Between Snapshots

[IsoPhoenix]

Comments have been implemented, but not notifications.