Skip to content

Commit

Permalink
added Style to profile pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@MTeofan
MTeofan committed Oct 21, 2024
1 parent 9497ad7 commit d0f3fcc
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 45 deletions.
118 changes: 99 additions & 19 deletions logic/frontend/web/src/app/profile/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
"use client";
import { useEffect, useState } from "react";
import { Box, Typography, CircularProgress } from "@mui/material";
import {useEffect, useState} from "react";
import {Box, Typography, CircularProgress, Avatar, Grid, Button, Card, CardContent} from "@mui/material";
import axios from "axios";
import { ProfileModel } from "@/model/model";
import { useUser } from "@/provider/UserProvider";
import {useUser} from "@/provider/UserProvider";
import {ProfileModel, PostModel} from "@/model/model";

export default function Page({ params }: { params: { slug: string } }) {
const [profile, setProfile] = useState<ProfileModel | null>(null);
const [posts, setPosts] = useState<Array<PostModel>>([]);
const [loading, setLoading] = useState(true);
const { user } = useUser();
const {user} = useUser();

useEffect(() => {
async function fetchProfile() {
Expand All @@ -34,6 +35,13 @@ export default function Page({ params }: { params: { slug: string } }) {
}
});

const postIds = profileResponse.data.posts;
const postResponses = await Promise.all(postIds.map((postId: number) =>
axios.get(`https://www.boast.social/api/posts/${postId}`)
));

setPosts(postResponses.map(res => res.data));

setProfile(profileResponse.data);
} catch (error) {
console.error("Error fetching profile:", error);
Expand All @@ -53,21 +61,93 @@ export default function Page({ params }: { params: { slug: string } }) {
return <Typography color="error">Error loading profile</Typography>;
}

const followToggle = () => {
console.log(profile.relationStatus === 'NO_RELATION' ? 'Following user' : 'Unfollowing user');
};

return (
<Box p={3} bgcolor="#1A1C40" color="white">
<Typography variant="h4">Profile Page</Typography>
<Typography variant="h6">Username: {profile.username}</Typography>
<Typography variant="body1">User ID: {profile.userId}</Typography>
<Typography variant="body1">Created On: {new Date(profile.createdOn).toLocaleString()}</Typography>
<Typography variant="body1">Follower: {profile.follower}</Typography>
<Typography variant="body1">Following: {profile.following}</Typography>
<Typography variant="body1">Relation Status: {profile.relationStatus}</Typography>
<Typography variant="h6">Posts:</Typography>
<ul>
{profile.posts.map(postId => (
<li key={postId}>{postId}</li>
))}
</ul>
<Box
p={3}
bgcolor="#1A1C40"
color="white"
sx={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{mb: 4, width: '100%'}}>
<Grid item xs={12} sm={3} display="flex" justifyContent="center">
<Avatar
sx={{
width: 100,
height: 100,
bgcolor: "#4ECA31",
fontSize: "3rem",
}}
>
{profile.username[0]}
</Avatar>
</Grid>
<Grid item xs={12} sm={9}>
<Typography variant="h5">{profile.username}</Typography>
<Typography variant="body2">{profile.follower} followers
· {profile.following} following</Typography>
<Typography variant="body2">{profile.name}</Typography>

<Button
variant="contained"
onClick={followToggle}
sx={{
mt: 2,
bgcolor: profile.relationStatus === 'NO_RELATION' ? "#4ECA31" : "#C20B4E",
":hover": {bgcolor: profile.relationStatus === 'NO_RELATION' ? "#4ECA31" : "#C20B4E"},
}}
>
{profile.relationStatus === 'NO_RELATION' ? "Follow" : "Unfollow"}
</Button>
</Grid>
</Grid>

<Box sx={{width: "100%", maxWidth: "800px"}}>
<Typography variant="h6" sx={{mb: 2}}>
Posts
</Typography>

<Grid container spacing={2}>
{posts.length === 0 ? (
<Typography variant="body2" sx={{color: "#C20B4E", textAlign: 'center', width: '100%'}}>
No posts yet.
</Typography>
) : (
posts.map((post, index) => (
<Grid item xs={12} key={index}>
<Card sx={{bgcolor: "#2E2F55"}}>
<CardContent>
<Typography variant="h6">{post.title}</Typography>
<Typography variant="body2">{post.definition}</Typography>
<Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
<Typography variant="caption" sx={{color: "#C0C0C0"}}>
{new Date(post.createdOn).toLocaleDateString()}
</Typography>
<Button
variant="outlined"
sx={{
borderColor: post.status === "ACTIVE" ? "#4ECA31" : "#C20B4E",
color: post.status === "ACTIVE" ? "#4ECA31" : "#C20B4E",
}}
>
{post.status === "ACTIVE" ? "Active" : "Inactive"}
</Button>
</Box>
</CardContent>
</Card>
</Grid>
))
)}
</Grid>
</Box>
</Box>
);
}
139 changes: 113 additions & 26 deletions logic/frontend/web/src/app/profile/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
// src/app/profile/page.tsx
"use client";
import { useEffect, useState } from "react";
import { Box, Typography, CircularProgress } from "@mui/material";
import {useEffect, useState} from "react";
import {Box, Typography, CircularProgress, Avatar, Grid, Button, Card, CardContent} from "@mui/material";
import axios from "axios";
import { ProfileModel } from "@/model/model";
import {useUser} from "@/provider/UserProvider";
import {ProfileModel, PostModel} from "@/model/model";

export default function Page() {
const [profile, setProfile] = useState<ProfileModel | null>(null);
const [posts, setPosts] = useState<Array<PostModel>>([]);
const [loading, setLoading] = useState(true);
const {user} = useUser()
const {user} = useUser();

useEffect(() => {
async function fetchProfile() {
try {
const response = await axios.get(`https://www.boast.social/api/users/profile/${user?.userId}`, {
headers: {
'reqUserId': user?.userId.toString(),
'accept': '*/*'
}
reqUserId: user?.userId.toString(),
accept: "*/*",
},
});
setProfile(response.data);

const postIds = response.data.posts;
const postResponses = await Promise.all(postIds.map((postId: number) =>
axios.get(`https://www.boast.social/api/posts/${postId}`)
));

setPosts(postResponses.map(res => res.data));
} catch (error) {
console.error("Error fetching profile:", error);
console.error("Error fetching profile or posts:", error);
} finally {
setLoading(false);
}
Expand All @@ -32,28 +39,108 @@ export default function Page() {
}, [user?.userId]);

if (loading) {
return <CircularProgress />;
return (
<Box display="flex" justifyContent="center" alignItems="center" height="100vh">
<CircularProgress sx={{color: "#3635FF"}}/>
</Box>
);
}

if (!profile) {
return <Typography color="error">Error loading profile</Typography>;
return (
<Typography color="error" align="center" variant="h6">
Error loading profile
</Typography>
);
}

const followToggle = () => {
console.log(profile.relationStatus === 'NO_RELATION' ? 'Following user' : 'Unfollowing user');
};

return (
<Box p={3} bgcolor="#1A1C40" color="white" sx={{}}>
<Typography variant="h4">Profile Page</Typography>
<Typography variant="h6">Username: {profile.username}</Typography>
<Typography variant="body1">User ID: {profile.userId}</Typography>
<Typography variant="body1">Created On: {new Date(profile.createdOn).toLocaleString()}</Typography>
<Typography variant="body1">Follower: {profile.follower}</Typography>
<Typography variant="body1">Following: {profile.following}</Typography>
<Typography variant="body1">Relation Status: {profile.relationStatus}</Typography>
<Typography variant="h6">Posts:</Typography>
<ul>
{profile.posts.map(postId => (
<li key={postId}>{postId}</li>
))}
</ul>
<Box
p={3}
bgcolor="#1A1C40"
color="white"
sx={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Grid container spacing={2} justifyContent="center" alignItems="center" sx={{mb: 4, width: '100%'}}>
<Grid item xs={12} sm={3} display="flex" justifyContent="center">
<Avatar
sx={{
width: 100,
height: 100,
bgcolor: "#4ECA31",
fontSize: "3rem",
}}
>
{profile.username[0]}
</Avatar>
</Grid>
<Grid item xs={12} sm={9}>
<Typography variant="h5">{profile.username}</Typography>
<Typography variant="body2">{profile.follower} followers
· {profile.following} following</Typography>
<Typography variant="body2">{profile.name}</Typography>

<Button
variant="contained"
onClick={followToggle}
sx={{
mt: 2,
bgcolor: profile.relationStatus === 'NO_RELATION' ? "#4ECA31" : "#C20B4E",
":hover": {bgcolor: profile.relationStatus === 'NO_RELATION' ? "#4ECA31" : "#C20B4E"},
}}
>
{profile.relationStatus === 'NO_RELATION' ? "Follow" : "Unfollow"}
</Button>
</Grid>
</Grid>

<Box sx={{width: "100%", maxWidth: "800px"}}>
<Typography variant="h6" sx={{mb: 2}}>
Posts
</Typography>

<Grid container spacing={2}>
{posts.length === 0 ? (
<Typography variant="body2" sx={{color: "#C20B4E", textAlign: 'center', width: '100%'}}>
No posts yet.
</Typography>
) : (
posts.map((post, index) => (
<Grid item xs={12} key={index}>
<Card sx={{bgcolor: "#2E2F55"}}>
<CardContent>
<Typography variant="h6">{post.title}</Typography>
<Typography variant="body2">{post.definition}</Typography>
<Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
<Typography variant="caption" sx={{color: "#C0C0C0"}}>
{new Date(post.createdOn).toLocaleString()}
</Typography>
<Button
variant="outlined"
sx={{
borderColor: post.status === "ACTIVE" ? "#4ECA31" : "#C20B4E",
color: post.status === "ACTIVE" ? "#4ECA31" : "#C20B4E",
}}
>
{post.status === "ACTIVE" ? "Active" : "Inactive"}
</Button>
</Box>
</CardContent>
</Card>
</Grid>
))
)}
</Grid>
</Box>
</Box>
);
}
}

0 comments on commit d0f3fcc

Please sign in to comment.