created "ME" endpoint to fetch details for the logged in user

Author: phillipnguyenn

client/src/hooks/me.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import api from "@/lib/api";
+
+export interface User {
+  id: number;
+  username: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  is_staff: boolean;
+}
+
+export const useMe = () =>
+  useQuery<User>({
+    queryKey: ["me"],
+    queryFn: () => api.get("/user/me/").then((r) => r.data),
+  });

client/src/pages/home.tsx

@@ -1,16 +1,34 @@
+import { useRouter } from "next/router";
+
+import { Button } from "@/components/ui/button";
 import EventCard from "@/components/ui/event-card";
 import { useEvents } from "@/hooks/events";
+import { useMe } from "@/hooks/me";
+import { clearTokens } from "@/lib/auth";
 
 import SearchDock from "../components/ui/search-dock";
 import DockLayout from "./layouts/docklayout";
 
 export default function Home() {
   const { data: events, isLoading } = useEvents();
+  const { data: me } = useMe();
+  const router = useRouter();
+
+  const logout = () => {
+    clearTokens();
+    router.push("/login");
+  };
 
   return (
     <>
       <DockLayout bottomOverlay={<SearchDock></SearchDock>}>
         <div className="mx-auto max-w-7xl space-y-3 px-4 py-6">
+          {me && (
+            <div>
+              <p>Hello {me.first_name}</p>
+              <Button onClick={logout}>Logout</Button>
+            </div>
+          )}
           {!isLoading &&
             events?.map((event) => (
               <EventCard key={event.id} event={event}></EventCard>

server/user/urls.py

@@ -7,5 +7,6 @@
     path("profile/", views.UserProfileList.as_view(), name="profile-list"),
     path("profile/<int:pk>/", views.UserProfileDetail.as_view(), name="user-profile-detail"),
     path("register/", views.RegisterView.as_view(), name="user-register"),
+    path("me/", views.MeView.as_view(), name="me"),
     ]
 

server/user/views.py

@@ -27,6 +27,14 @@ class UserProfileDetail(generics.RetrieveUpdateAPIView):
     queryset = Profile.objects.all()
     serializer_class = ProfileSerializer
 
+class MeView(APIView):
+    permission_classes = [permissions.IsAuthenticated]
+    serializer_class = UserSerializer
+    
+    def get(self, request):
+        serializer = self.serializer_class(request.user)
+        return Response(serializer.data)
+
 class RegisterView(APIView):
     authentication_classes = []
     permission_classes = [AllowAny]