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"
Forum: Comments and Notifications
Overview:
Resources:
onSnapshot
(below)Frontend:
Inbox.tsx
) that can be accessed from the top navbar (at least for now)App.tsx
Backend:
types.ts
notifications
collection. Remember that the post author field is a user/player id that you can use to access the appropriate notificaitons collectionnotifications
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!App.tsx
with variable visibility depending on when the notification is displayed. MUI should have preset snackbar components you can usenotistack
to accomplish this (at the bottom of the snackbar link above). As of 2/28 I pushed an update tomain
containing basenotistack
functionality (set up inApp.tsx
andClassroomCard.tsx
.)