How to implement simple notifications in drf + react? - reactjs

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 ?

Answer 1

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

Answer 2

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.