implement event signup functionality with mutation and API endpoint

Author: phillipnguyenn

client/src/hooks/events.ts

@@ -1,4 +1,9 @@
-import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from "@tanstack/react-query";
 
 import api from "../lib/api";
 
@@ -55,3 +60,23 @@ export const useEvent = (
     ...args,
   });
 };
+
+// flow: ask the backend to change, then refetch the data
+// queryclient can mark the cached data as stale, which refetches the data
+export const useSignupEvent = (eventId: number) => {
+  const queryClient = useQueryClient();
+
+  // post to the url
+  return useMutation({
+    mutationFn: async () => {
+      const response = await api.post(`/events/${eventId}/signup/`);
+      return response.data;
+    },
+
+    // if successful, mark as stale, trigger refetch
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["event", eventId] });
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+    },
+  });
+};

client/src/pages/events/[id].tsx

@@ -4,14 +4,15 @@ import { useRouter } from "next/router";
 
 import { Button } from "@/components/ui/button";
 import TagList from "@/components/ui/tag-list";
-import { useEvent } from "@/hooks/events";
+import { useEvent, useSignupEvent } from "@/hooks/events";
 
 import ActionLayout from "../layouts/actionlayout";
 
 export default function EventDetailsPage() {
   // useRouter allows access to URL parameters
   const router = useRouter();
   const id = Number(router.query.id);
+  const signup = useSignupEvent(id);
 
   const { data: event, isLoading } = useEvent(id);
   if (isLoading) {
@@ -35,7 +36,12 @@ export default function EventDetailsPage() {
       }
       primaryAction={
         <Link href={"/events/" + id + "/participants"} className="flex-1">
-          <Button className="w-full rounded-full">Join Event</Button>
+          <Button
+            className="w-full rounded-full"
+            onClick={() => signup.mutate()}
+          >
+            Join Event
+          </Button>
         </Link>
       }
     >

server/event/urls.py

@@ -5,5 +5,6 @@
 urlpatterns = [
     path("", views.EventList.as_view(), name="event-list"),
     path("<int:pk>/", views.EventDetail.as_view(), name="event-detail"),
+    path("<int:pk>/signup/", views.EventSignup.as_view(), name="event-signup")
     ]
 

server/event/views.py

@@ -1,5 +1,8 @@
-from django.shortcuts import render
+from django.http import Http404
+from django.shortcuts import get_object_or_404, render
 from rest_framework import generics, permissions
+from rest_framework.views import APIView
+from rest_framework.response import Response
 
 
 from .models import Event
@@ -14,4 +17,26 @@ class EventList(generics.ListCreateAPIView):
 
 class EventDetail(generics.RetrieveUpdateAPIView):
     queryset = Event.objects.all()
-    serializer_class = EventSerializer
+    serializer_class = EventSerializer
+
+class EventSignup(APIView):
+    permission_classes = [permissions.IsAuthenticated]
+
+    def post(self, request, pk):
+        try:
+            event = Event.objects.get(pk=pk)
+        except Event.DoesNotExist:
+            return Response(
+                {"detail": "Event not found"},
+                status=404
+            )
+
+        if event.participants.filter(id=request.user.id).exists():
+            return Response(
+                {"detail": "Already signed up"},
+                status=400
+            )
+
+        event.participants.add(request.user)
+        serializer = EventSerializer(event)
+        return Response(serializer.data, status=200)