Web: Build Front-End of Notifications for Gitcoin

[PixelantDesign]

User Story

Why Is this Needed

Summary: Currently we email community members on things they need to act upon but there isn't a central place on Gitcoin that users can go to to view all notifications and take action.

Description

This task is to build the front-end of the notification system.

Definition of Done

• [x] Review the attached mockups and Gitcoin's contribution guidelines and front-end guidelines.
• [x] Add a way for users to access the notification dropdown (authenticated).
• [x] Users should not see the notification bell if anauthenticated.
• [x] A notification count should be displayed at the top of dropdown
• [x] User should be able to view top notifications in the dropdown.
• [x] From the menu users should be able to and click view all to see it all on a page.
• [ ] Dropdown should not show items that have been read.
• [x] The dropdown should show a green dot to denote unread
• [x] See all view should show all notifications.
• [ ] This should work in responsive views.
• [x] notifications can be selected or unselected. there will be 'select all' or 'deselect all' buttons on the top, and there will also be 'mark selected as read', 'delete selected' and 'mark selected all as unread' buttons'
• [x] notifications will be sorted chronologically and paginated
• [x] notifications can be marked as read, marked as unread, or deleted
• [x] when a user clicks on the notification will be marked as read and takes user to the appropriate issue.
• [ ] PR is merged

Notifications will be generated each time a user needs to take action upon something (approve worker, disapprove worker, accept worker, receive tip, etc)

Here are the potential notifications we are hoping for:

For Funders

• You have workers to approve on this issue.
• Your bounty hunters haven't responded on this issue in a few days.
• Remove them if you haven't heard from them?
• There is a submission against your bounty.
• Your bounty hunter has stopped work
• Your bounty is expiring soonYour bounty has crowdfunding added to it.

For Hunters

• You haven't responded to this issue in x days.
• This issue has been remarketed and has your skill sets. Are you interested?
• You have been approved for a bounty
• You have been declined for a bounty
• You have been removed from a bounty due to no responseYou have received a tip.
• Your submission has been approved
• Your submission has been declined.
• Funding has increased on a bounty that you’re working on.

Additional Information

Please review with a core team member @PixelantDesign @willsputra @owocki

Technical Approach

This should just be a new app named 'inbox' with one model Notification that has the following fields

pk
created_on
to_user_id
from_user_id
CTA_URL
CTA_Text
message_html
is_read (bool)
we will likely also want an easy helper function that can be used to create new Notifications

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 0.6 ETH (136.33 USD @ $227.22/ETH) attached to it__ as part of the Gitcoin fund__.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $41,243.95 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[willsputra]

Sketch file here:
https://drive.google.com/open?id=1WaxEDtWnkX54F0T0SVSFgwx1czdFAgOd

[PixelantDesign]

Thanks @willsputra!

@Anish-Agnihotri to answer your question, this is a front-end ticket....please stub out dummy data as a placeholder to where we'd link up the BE dynamic template vars.
cc: @mbeacom

@usmanmuhd thanks for your interest! I have another ticket for you if you're interested!

[usmanmuhd]

@PixelantDesign Sure!

[gitcoinbot]

💰 A crowdfund contribution worth 125.00000 DAI (125.0 USD @ $1.0/DAI) has been attached to this funded issue from @vs77bb.💰

Want to chip in also? Add your own contribution here.

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[Anish-Agnihotri]

Seems like @gitcoinbot is really set on nagging me about this, haha.

I'll be pushing out a WIP PR this weekend. Been down with a fever for the past two days and am in bed, so programming has come down to snail speed. I'll get this knocked out though :).

[willsputra]

How's it going @Anish-Agnihotri ? 🙂

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@Anish-Agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[willsputra]

Hey @Anish-Agnihotri , are you still working on this?

[Anish-Agnihotri]

@willsputra Hey, apologies for going completely MIA on this issue. Certainly not good at all. It's 11/01. Give me till 11/03 and I'll get this knocked out and pushed on it's way.

Thanks again.

[Anish-Agnihotri]

Status update:

I've gotten the modal working and everything is up and live. Figuring out notification integration and how to persistently populate the status bar dropout with content.

[willsputra]

@Anish-Agnihotri thanks for the update! let us know if you have any questions :)

[owocki]

i'm very excited about this... @Anish-Agnihotri let us know what you need from us!

[Anish-Agnihotri]

For sure :). My apologies for continued delay due to Diwali today. I'm attempting to pull notifications now and seeing how it is done in the back-end for the New Bounty emails for some reference.

Looking to get a WIP PR, and this knocked out asap.

[owocki]

@Anish-Agnihotri how goez it

[gitcoinbot]

@anish-agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@anish-agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@anish-agnihotri Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[owocki]

@Anish-Agnihotri do you think youll be able to deliver this one?

[gitcoinbot]

💰 A crowdfund contribution worth 0.40000 ETH (42.43 USD @ $106.08/ETH) has been attached to this funded issue from @Anish-Agnihotri.💰

Want to chip in also? Add your own contribution here.

[Anish-Agnihotri]

Hey everyone,

Unfortunately fell out on this issue due to other work. Hope that someone can pick it up and knock it out :)!

Thank, my apologies.

Anish

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 2 months ago.
Please review their action plans below:

1) usmanmuhd has been approved to start work.

I will create the backend as discussed with @octavioamu

Learn more on the Gitcoin Issue Details page.

[willsputra]

@octavioamu @usmanmuhd notifications examples based on the list

For Hunters

For Funders

[PixelantDesign]

@usmanmuhd looking forward to seeing a pr!

[thelostone-mc]

Closing this out as we've got the base PR in

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 0.6 ETH (74.54 USD @ $124.24/ETH) has been submitted by__:

1. @usmanmuhd

@PixelantDesign please take a look at the submitted work:

• PR by @usmanmuhd

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $41,351.04 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

⚡️ A *Helpotron* Kudos has been sent to @usmanmuhd for this issue from @PixelantDesign. ⚡️ The sender had the following public comments: > Thanks for helping us out on notifications! Great work! Nice work @usmanmuhd! Your Kudos has automatically been sent in the ETH address we have on file.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 0.6 ETH (71.69 USD @ $119.48/ETH) (plus a crowdfund of 0.4 ETH worth 47.7918933 USD) attached to this issue has been approved & issued to @usmanmuhd.__

Thanks to @Anish-Agnihotri, @vs77bb for their crowdfunded contributions to this bounty.

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $40,685.08 more funded OSS Work available on the Gitcoin Issue Explorer