Merge pull request #235 from RMoodsTeam/227-migrate-user-profile-page…

…-to-tanstack-query 227 migrate user profile page to tanstack query
RMoodsTeam · Dec 8, 2024 · 6ff1d45 · 6ff1d45
2 parents 1100994 + 75c046b
commit 6ff1d45
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 67 deletions.
diff --git a/frontend/src/components/navbar/RateLimitStatus.tsx b/frontend/src/components/navbar/RateLimitStatus.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import authFetch from '../../rmoods/client/authFetch.ts';
-import { Center, HoverCard, Progress, Stack, Text } from '@mantine/core';
+import { Center, HoverCard, Loader, Progress, Stack, Text } from '@mantine/core';
 import { IconBrandReddit } from '@tabler/icons-react';
 import React, { useEffect } from 'react';
 import dayjs from 'dayjs';
@@ -104,7 +104,7 @@ const RateLimitStatus = () => {
   });
 
   if (query.isLoading) {
-    return <div>Loading...</div>;
+    return <Loader color="blue" size={20} />;
   }
 
   if (query.isError) {

diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
@@ -2,10 +2,10 @@ import Cookies from 'js-cookie';
 import { useNavigate } from 'react-router-dom';
 import { Avatar, Menu } from '@mantine/core';
 import authFetch from '../../rmoods/client/authFetch.ts';
-import { useEffect, useState } from 'react';
 import { jwtDecode } from 'jwt-decode';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import { changeDefaultGoogleProfilePictureSize } from '../../utility/changeDefaultGoogleProfilePictureSize.ts';
+import { useQuery } from '@tanstack/react-query';
 
 /**
  * User interface representing the user data.
@@ -15,56 +15,54 @@ interface User {
   picture: string;
 }
 
+/**
+ * Fetches the user data from the server.
+ * @returns {Promise<User>} The user data.
+ */
+const fetchUserData = async (): Promise<User> => {
+  const token = Cookies.get('RMOODS_JWT');
+  if (!token) {
+    throw new Error('No JWT token found');
+  }
+
+  const data = jwtDecode<JwtClaims>(token);
+  const id = data.userInfo.id;
+  const response = await authFetch(`http://localhost:8001/api/user?id=${id}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch user data');
+  }
+
+  return response.json();
+};
+
+
 /**
  * UserMenu component that displays the user menu.
  * @returns {JSX.Element} The UserMenu component.
  */
 const UserMenu = () => {
   const navigate = useNavigate();
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const token = Cookies.get('RMOODS_JWT');
-    if (!token) {
-      navigate('/login');
-      return;
-    }
-
-    let isMounted = true;
-    try {
-      const data = jwtDecode<JwtClaims>(token);
-      const id = data.userInfo.id;
 
-      authFetch('http://localhost:8001/api/user?id=' + id).then((response) => {
-        response.json().then((data) => {
-          if (isMounted) {
-            setUser(data);
-            setLoading(false);
-          }
-        });
-      });
-    } catch (error) {
-      console.error('JWT token could not be decoded.', error);
-      if (isMounted) {
-        setLoading(false);
-      }
-    }
-    return () => {
-      isMounted = false;
-    };
-  }, [navigate]);
+  const { data, error } = useQuery<User, Error>({
+    queryKey: ['userData'],
+    queryFn: fetchUserData,
+    refetchInterval: 5000,
+  });
 
   const handleLogout = () => {
-    console.log('Logging out');
     Cookies.remove('RMOODS_JWT');
     navigate('/login');
   };
 
+  if (error) {
+    throw new Error('Failed to fetch user data');
+  }
+
   const size = 45;
-  const resizedPicture = user
-    ? changeDefaultGoogleProfilePictureSize(user.picture, size)
+  const resizedPicture = data?.picture
+    ? changeDefaultGoogleProfilePictureSize(data.picture, size)
     : '';
+
   return (
     <Menu id="user-dropdown">
       <Menu.Target>

diff --git a/frontend/src/routes/user/UserCard.tsx b/frontend/src/routes/user/UserCard.tsx
@@ -31,7 +31,7 @@ const UserCard: React.FC<UserCardProps> = ({ user }) => {
           {user.name}
         </Title>
         <Text size='sm' c='dimmed' style={{ fontSize: '18px' }}>
-          {user.givenName}
+          {user.given_name}
         </Text>
         <Divider my='sm' />
         <Text size='sm' c='dimmed' style={{ fontSize: '18px' }}>

diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
@@ -1,18 +1,18 @@
-import { Box, Text } from '@mantine/core';
+import { Box, Text, Loader } from '@mantine/core';
 import Cookies from 'js-cookie';
 import { jwtDecode } from 'jwt-decode';
-import { useEffect, useState } from 'react';
 import UserCard from './UserCard';
 import StatisticItem from './StatisticItem';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import authFetch from '../../rmoods/client/authFetch.ts';
+import { useQuery } from '@tanstack/react-query';
 
 /**
  * User interface representing the user data.
  */
 export interface User {
   name: string;
-  givenName: string;
+  given_name: string;
   email: string;
   picture: string;
 }
@@ -31,37 +31,54 @@ const statistics = {
   longestReportTime: '2 hours',
 };
 
+/**
+ * Fetches the user data from the server.
+ * @returns {Promise<User>} The user data.
+ */
+const fetchUserData = async (): Promise<User> => {
+  const token = Cookies.get('RMOODS_JWT');
+  if (!token) {
+    throw new Error('No JWT token found');
+  }
+
+  const data = jwtDecode<JwtClaims>(token);
+  const id = data.userInfo.id;
+  const response = await authFetch(`http://localhost:8001/api/user?id=${id}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch user data');
+  }
+
+  return response.json();
+};
+
 /**
  * UserPage component that displays the user's profile and statistics.
  * @returns {JSX.Element} The UserPage component.
  */
 const UserPage = () => {
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    const token = Cookies.get('RMOODS_JWT');
-    if (!token) {
-      console.error('No JWT token found');
-      throw new Error('No JWT token found');
-    }
+  const { data, error, isLoading } = useQuery<User, Error>({
+    queryKey: ['userData'],
+    queryFn: fetchUserData,
+    refetchInterval: 5000,
+  });
 
-    try {
-      const data = jwtDecode<JwtClaims>(token);
-      const id = data.userInfo.id;
-
-      authFetch('http://localhost:8001/api/user?id=' + id).then((response) => {
-        response.json().then((data) => {
-          setUser(data);
-        });
-      });
-    } catch (error) {
-      console.error('JWT token could not be decoded.', error);
-      throw new Error('JWT token could not be decoded.');
-    }
-  }, []);
+  if (isLoading) {
+    return (
+      <Box
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '50vh',
+        }}
+      >
+        <Loader color="blue" size={40} />
+      </Box>
+    );
+  }
 
-  if (!user) {
-    return <Text>Loading...</Text>;
+  if (error) {
+    return <Text>Error: {error.message}</Text>;
   }
 
   return (
@@ -73,7 +90,7 @@ const UserPage = () => {
       }}
     >
       <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
-        <UserCard user={user} />
+        {data && <UserCard user={data} />}
       </Box>
       <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
         <Box style={{ flex: '1 1 50%', padding: '10px' }}>