How to implement simple notifications in drf + react?

Question

Normally in django with templates I implement basic notifications like this.

For example.

class Article(models.Model):
   name = models.CharField()
   owner = models.ForeignKey(User)
   
class Comment():
   article = models.ForeignKey(Article)
   txt = models.CharField()
   user = models.ForeginKey()
   datetime = models.DateTimeField(auto_now_add=True)
  
class ArticleNotification():
    article = models.ForeignKey(Article)
    msg = models.CharField()
    is_seen = models.BooleanField(default=False)
    datetime = models.DateTimeField(auto_now_add=True)

If someone commented on article the owner will see notifications.

   @transaction.atomic
   def post_comment(request, article_id):
      comment = Comment.objects.create(article_id=article_id, txt="Nice Article", user=request.user)
      ArticleNotification.objects.create(article_id=article_id, msg=f"User {request.user} commented on your post")

Now to show the notifications I normally make a context processor:

# context_processor:
def notifcations(request):
    notifs = Notfication.objects.filter(article__owner=request.user).order_by("-datetime")
    return {"notifs":notifs}

In this way I can normally implement basic notification system with refresh.

Now in (drf + react) what will be the preferred way for this type of task. Instead of context processor should I have to make an get api to list notifications And call this api on every request from react frontend ?

user_8153147 · Answer

Instead of context processor should I have to make an get api to list notifications

Yes. You can create DRF API view like this

serializers.py

class ArticleNotificationSerializer(ModelSerializer):
    class Meta:
        model = ArticleNotification
        fields = ["id", "article", "msg", "is_seen", "datetime"]

views.py

class ArticleNotificationListView(ListAPIView):
    serializer_class = ArticleNotificationSerializer
    queryset = ArticleNotification.objects.all()

urls.py

path('notification', ArticleNotificationListView.as_view()),

And call this api on every request from react frontend ?

Yes. Also you can check for Notifications for every 10 seconds with setInterval and componentDidMount hook in your react component.

componentDidMount: function() {
    this.countdown = setInterval(function() {
        axios.get(
           '/notifications/'
        ).then(r => 
            this.setState({ notifications: r.data }); // Changing state
        )
    }, 10000);
},

user_7032967 · Answer

For real-time notification, you need something like Django channels or you can set a get api from react which runs after every defined time (say 5 minutes) and would fetch the required notifications based on user.

In your case things in context processor would be in listapiview and later you can fetch all the list.

How to implement simple notifications in drf + react?

2 Answers