Skip to content

Commit

Permalink
Merge pull request #140 from MegaTheLEGEND/main
Browse files Browse the repository at this point in the history 
profile page upgrade
  • Loading branch information
@s-alad
s-alad authored Aug 22, 2024
2 parents 3686c1e + 80ecc62 commit 53ae366
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 42 deletions.
26 changes: 24 additions & 2 deletions client/pages/me/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default function Me() {
let [name, setName] = React.useState<string>("");
let [bio, setBio] = React.useState<string>("");
let [pfp, setPfp] = React.useState<string>("");
let [joinDate, setJoined] = React.useState<string>("");
let [location, setLocation] = React.useState<string>("");
let [streak, setStreak] = React.useState<string>("");
let [friends, setFriends] = React.useState<Friend[]>([]);
let [friendsLoading, setFriendsLoading] = React.useState<boolean>(true);

Expand All @@ -30,7 +33,7 @@ export default function Me() {
setUsername(JSON.parse(localStorage.getItem("myself")!).username);
setName(JSON.parse(localStorage.getItem("myself")!).fullname);
setBio(JSON.parse(localStorage.getItem("myself")!).biography);
setPfp(JSON.parse(localStorage.getItem("myself")!).profilePicture != undefined ? JSON.parse(localStorage.getItem("myself")!).profilePicture.url : "");
setPfp(JSON.parse(localStorage.getItem("myself")!).profilePicture != undefined ? JSON.parse(localStorage.getItem("myself")!).profilePicture.url : "");
}

let token = localStorage.getItem("token");
Expand All @@ -49,6 +52,10 @@ export default function Me() {
setName(response.data.fullname);
setBio(response.data.biography);
setPfp(response.data.profilePicture != undefined ? response.data.profilePicture.url : "");
setLocation(response.data.location ?? "");
setStreak(response.data.streakLength ?? "")
setJoined(new Date(response.data.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) + ', ' + new Date(response.data.createdAt).toLocaleTimeString());

}
).catch(
(error) => {
Expand Down Expand Up @@ -119,11 +126,26 @@ export default function Me() {
<div className={s.value}>{bio}</div>
</div> : null
}
{
location && location.length > 0 ?
<div className={s.detail}>
<div className={s.label}>location</div>
<div className={s.value}>{location}</div>
</div> : null
}
<div className={s.detail}>
<div className={s.label}>date joined</div>
<div className={s.value}>{joinDate}</div>
</div>
<div className={s.detail}>
<div className={s.label}>current streak</div>
<div className={s.value}>🔥 {streak} 🔥</div>
</div>
</div>
</div>
<div className={s.divider}></div>
<div className={s.friends}>
<div className={s.title}>Friends</div>
<div className={s.title}>Friends ({friends.length})</div>
{
friendsLoading ? <div className={l.loader}></div> :
friends.map((friend) => {
Expand Down
160 changes: 120 additions & 40 deletions client/pages/profile/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,79 @@ import { useEffect, useState } from 'react'

import s from './profile.module.scss'

interface Friend {
id: string;
username: string;
fullname: string;
profilePicture: {
url: string | null; // Allow null values
width: number;
height: number;
} | null; // Allow null values
}

export default function Profile() {
const router = useRouter()

let [username, setUsername] = useState<string>("");
let [name, setName] = useState<string>("");
let [bio, setBio] = useState<string>("");
let [pfp, setPfp] = useState<string>("");
let [status, setStatus] = useState<string>("");
const [username, setUsername] = useState<string>("");
const [name, setName] = useState<string>("");
const [bio, setBio] = useState<string>("");
const [pfp, setPfp] = useState<string>("");
const [joinDate, setJoined] = useState<string>("");
const [location, setLocation] = useState<string>("");
const [status, setStatus] = useState<string>("");
const [streak, setStreak] = useState<string>("");
const [friendedDate, setFriendedDate] = useState<string>("");
const [mutualFriends, setMutualFriends] = useState<Friend[]>([]);
const [mutualFriendsLoading, setMutualFriendsLoading] = useState<boolean>(true);

useEffect(() => {

if (!router.isReady) return;

console.log("router.query.id")
console.log(router.query.id)
const fetchProfileData = async () => {
try {
const rid = router.query.id;
const token = localStorage.getItem("token");
const body = JSON.stringify({ "token": token, "profile_id": rid });
const options = {
url: "/api/profile",
method: "POST",
headers: { 'Content-Type': 'application/json' },
data: body,
};

let rid = router.query.id;
const response = await axios.request(options);
const data = response.data;

console.log(data);

let token = localStorage.getItem("token");
let body = JSON.stringify({ "token": token, "profile_id": rid });
let options = {
url: "/api/profile",
method: "POST",
headers: { 'Content-Type': 'application/json' },
data: body,
}
setUsername(data.username);
setName(data.fullname);
setBio(data.biography ?? "");
setLocation(data.location ?? "");
setStreak(data.streakLength ?? "");
setPfp(data.profilePicture?.url ?? "");
setJoined(new Date(data.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) + ', ' + new Date(data.createdAt).toLocaleTimeString());
setStatus(data.relationship.status);
setFriendedDate(data.relationship.friendedAt ? new Date(data.relationship.friendedAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) + ', ' + new Date(data.relationship.friendedAt).toLocaleTimeString() : "");

axios.request(options).then(
(response) => {
console.log(response.data);
setUsername(response.data.username);
setName(response.data.fullname);
setBio(response.data.biography != undefined ? response.data.biography : "");
setPfp(response.data.profilePicture != undefined ? response.data.profilePicture.url : "");
setStatus(response.data.relationship.status);
}
).catch(
(error) => {
console.log(error);
// Populate mutual friends
setMutualFriends(data.relationship.commonFriends.sample);
setMutualFriendsLoading(false);

} catch (error) {
console.error(error);
}
)
}, [router.isReady])
};

fetchProfileData();
}, [router.isReady]);

const handleFriendClick = (friendId: string) => {
window.location.replace(`/profile/${friendId}`);
};

return (
<div className={s.me}>
<div className={s.card}>
Expand All @@ -59,19 +90,68 @@ export default function Profile() {
<div className={s.label}>name</div>
<div className={s.value}>{name}</div>
</div>
{
bio.length > 0 ?
<div className={s.detail}>
<div className={s.label}>biography</div>
<div className={s.value}>{bio}</div>
</div> : null
}
{bio.length > 0 && (
<div className={s.detail}>
<div className={s.label}>biography</div>
<div className={s.value}>{bio}</div>
</div>
)}
{location.length > 0 && (
<div className={s.detail}>
<div className={s.label}>location</div>
<div className={s.value}>{location}</div>
</div>
)}
<div className={s.detail}>
<div className={s.label}>date Joined</div>
<div className={s.value}>{joinDate}</div>
</div>
<div className={s.detail}>
<div className={s.label}>relation</div>
<div className={s.value}>{status == "accepted" ? "friends" : "stranger"}</div>
<div className={s.value}>{status === "accepted" ? "friends" : "stranger"}</div>
</div>


{friendedDate.length > 0 && (
<div className={s.detail}>
<div className={s.label}>date Friended</div>
<div className={s.value}>{friendedDate}</div>
</div>
)}
<div className={s.detail}>
<div className={s.label}>current streak</div>
<div className={s.value}>🔥 {streak} 🔥</div>
</div>
</div>

</div>
<div className={s.divider}></div>
<div className={s.friends}>
<div className={s.title}>Mutual Friends ({mutualFriends.length})</div>
{mutualFriendsLoading ? (
<div className={s.loader}></div>
) : (
mutualFriends.map((friend) => (
<div
key={friend.id}
className={s.friend}
onClick={() => handleFriendClick(friend.id)}
role="button"
tabIndex={0}
>
{friend.profilePicture && friend.profilePicture.url ? (
<img src={friend.profilePicture.url} className={s.pfp} />
) : (
<div className={s.pfp}>no profile picture</div>
)}
<div className={s.details}>
<div className={s.username}>@{friend.username}</div>
<div className={s.fullname}>{friend.fullname}</div>
</div>
</div>
))
)}
</div>
</div>
)
}
);
}
54 changes: 54 additions & 0 deletions client/pages/profile/profile.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,58 @@
}
}
}
.divider {
margin-top: 40px;

height: 1px;
background-color: white;
}
.friends {
a {
text-decoration: none;
color: inherit;
}
display: flex;
flex-direction: column;
margin-top: 20px;

.title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}

.friend {
border-radius: 8px;
box-shadow: 0px 0px 5px .1px rgba(84, 84, 84, 0.75);
display: flex;
margin-bottom: 12px;
.pfp {
width: 60px;
height: 60px;
border: 1px solid white;
border-radius: 8px;
@include c.center();
}
.details {
display: flex;
flex-direction: column;
padding-left: 18px;
justify-content: center;

.username {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.fullname {
font-size: 14px;
color: rgb(158, 158, 158);
}
}

}

}

}

0 comments on commit 53ae366

Please sign in to comment.