add follow function and make small style changes

code/frontend/src/api/axios.ts

@@ -10,7 +10,6 @@ const api = axios.create({
 
 // get token from local storage
 const getAccessToken = () => localStorage.getItem("token");
-const getRefreshToken = () => localStorage.getItem("refreshToken");
 
 //redirects the page to the login and back
 export const redirectToLogin = (returnToPage = true) => {

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -87,11 +87,9 @@ export default function AvatarDialog({
           <Avatar
             className="profile-avatar"
             alt="Username"
-            // current code does not work yet
-            // TODO: If no image is selected, return the image already in the database or undefined
             src={imageUrl ? imageUrl : undefined}
           >
-            U
+            {username && username[0].toUpperCase() || ""}
           </Avatar>
         </Button>
         <Username username={username} />

code/frontend/src/components/changeAvatarDialog.css

@@ -19,8 +19,8 @@
 }
 
 .profile-avatar {
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   background-color: var(--Rotkehlchen-yellow-default);
 }
 
@@ -46,8 +46,8 @@
 
 @media screen and (min-width: 768px) {
   .profile-avatar {
-    width: 5rem;
-    height: 5rem;
+    width: 4.5rem;
+    height: 4.5rem;
     background-color: var(--Rotkehlchen-yellow-default);
   }
 

code/frontend/src/components/username.css

@@ -1,10 +1,21 @@
 .profile-username {
   color: var(--Rotkehlchen-orange-default);
-  max-width: 10rem;
+  width: 15rem;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
+  text-align: start;
 }
 .profile-popover {
   padding: 1rem;
 }
+
+@media screen and (min-width: 768px) {
+  .profile-username {
+    width: 10rem;
+  }
+  .profile-popover {
+    padding: 2rem;
+  }
+  
+}

code/frontend/src/pages/Profile.tsx

@@ -8,7 +8,7 @@ import { StyledEngineProvider, Divider } from "@mui/material";
 import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
 import Bio from "../components/Bio";
 import RotkehlchenButton from "../components/ButtonRotkehlchen";
-import api from "../api/axios";
+import api, { redirectToLogin } from "../api/axios";
 import { useAuth } from "../api/Auth";
 import { useNavigate, useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
@@ -27,11 +27,12 @@ function Profile() {
     followers: 0,
     following: 0,
     posts: 0,
+    isFollowing: false,
   });
 
   const userProfile = async () => {
     try {
-      const response = await api.get(`/profile/get/${username}`);
+      const response = await api.get(`/profile/${username}`);
       setUserData(response.data.data);
       return;
     } catch (error) {
@@ -54,12 +55,20 @@ function Profile() {
       return prevData;
     });
   };
-  function handleFollowUser() {
-    // TODO: implement follow user functionality
-    if (user) {
-      api.post(`follower/follow/${username}`)
+  const handleFollowUser = async () => {
+    try {
+      if (userData?.isFollowing === false) {
+        await api.post(`/follower/follow/${username}`);
+      } else if (userData?.isFollowing === true) {
+        await api.delete(`/follower/unfollow/${username}`);
+      } else {
+        redirectToLogin();
+      }
+      userProfile(); // Refresh user data after unfollowing
+    } catch (error) {
+      console.error("Error following/unfollowing user:", error);
     }
-  }
+  };
 
   return (
     <StyledEngineProvider injectFirst>
@@ -97,7 +106,12 @@ function Profile() {
             </div>
           </div>
           {!ownAccount && (
-            <RotkehlchenButton style="primary" label="Follow" type="button" onClick={handleFollowUser} />
+            <RotkehlchenButton
+              style={!userData?.isFollowing ? "primary" : "secondary"}
+              label={!userData?.isFollowing ? "Follow" : "Unfollow"}
+              type="button"
+              onClick={handleFollowUser}
+            />
           )}
         </div>
         {userData && <QuiltedImageList user={userData} />}

code/frontend/src/types/UserProfile.ts

@@ -6,4 +6,5 @@ export type UserProfile = {
     followers: number;
     following: number;
     posts: number;
+    isFollowing: boolean;
   }