CODEWITHSUNDEEP
reactjsdjangodjango-rest-framework
D_P
D_P

Reputation: 862

How to implement simple notifications in drf + react?

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 ?

Upvotes: 2

Views: 1388

Answers (2)

Ranu Vijay
Ranu Vijay

Reputation: 1257

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.

Upvotes: 0

Yevhen Bondar
Yevhen Bondar

Reputation: 4707

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);
},

Upvotes: 2

Related Questions