mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +00:00
add follow function and make small style changes
This commit is contained in:
parent
79e1f4ebe0
commit
9a9724d024
8 changed files with 57 additions and 19 deletions
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -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} />}
|
||||||
|
|
|
@ -6,4 +6,5 @@ export type UserProfile = {
|
||||||
followers: number;
|
followers: number;
|
||||||
following: number;
|
following: number;
|
||||||
posts: number;
|
posts: number;
|
||||||
|
isFollowing: boolean;
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue