add follow function and make small style changes

This commit is contained in:
luisa.bellitto 2025-06-29 15:15:48 +02:00 committed by Rudi Regentonne
parent 79e1f4ebe0
commit 9a9724d024
8 changed files with 57 additions and 19 deletions

View file

@ -202,6 +202,7 @@ export const updateBio = async (req: Request, res: Response) => {
// Endpoint to get user data // Endpoint to get user data
export const getProfile = async (req: Request, res: Response) => { export const getProfile = async (req: Request, res: Response) => {
const username: string = req.params.username as string; const username: string = req.params.username as string;
const requestingUser: JwtPayload | undefined = req.user;
if (!username) { if (!username) {
res.status(StatusCodes.BAD_REQUEST).json({ res.status(StatusCodes.BAD_REQUEST).json({
error: "no username", error: "no username",
@ -227,9 +228,22 @@ export const getProfile = async (req: Request, res: Response) => {
const publicUser: PublicUser | undefined = await getUser(user.id); const publicUser: PublicUser | undefined = await getUser(user.id);
let isFollowing : boolean = false;
if(requestingUser) {
const followingData = await prisma.follow.findFirst({
where: {
followedUserId: user.id,
followingUserId: requestingUser.id,
}
})
if(followingData) {
isFollowing = true;
}
}
res.status(StatusCodes.OK).json({ res.status(StatusCodes.OK).json({
message: "User found", message: "User found",
data: publicUser, data: {...publicUser, isFollowing},
}); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);

View file

@ -10,6 +10,7 @@ const profileRouter = express.Router();
import { upload } from "../middleware/uploadSingle"; import { upload } from "../middleware/uploadSingle";
import { updateBioSchema } from "../schemas/profileSchemas"; import { updateBioSchema } from "../schemas/profileSchemas";
import { validateData } from "../middleware/validationMiddleware"; import { validateData } from "../middleware/validationMiddleware";
import { optionalAuthenticateToken } from "../middleware/optionalAuthenticateToken";
/** /**
* @swagger * @swagger
* /api/profile/uploadProfilePicture: * /api/profile/uploadProfilePicture:
@ -124,5 +125,5 @@ profileRouter.put(
* 401: * 401:
* description: Ungültige Anmeldedaten * description: Ungültige Anmeldedaten
*/ */
profileRouter.get("/:username", getProfile); profileRouter.get("/:username", optionalAuthenticateToken, getProfile);
export default profileRouter; export default profileRouter;

View file

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

View file

@ -87,11 +87,9 @@ export default function AvatarDialog({
<Avatar <Avatar
className="profile-avatar" className="profile-avatar"
alt="Username" 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} src={imageUrl ? imageUrl : undefined}
> >
U {username && username[0].toUpperCase() || ""}
</Avatar> </Avatar>
</Button> </Button>
<Username username={username} /> <Username username={username} />

View file

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

View file

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

View file

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

View file

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