From 91158cfe66630ece70c8dd05f7da150babb4818b Mon Sep 17 00:00:00 2001 From: Kshitij Kochhar Date: Wed, 25 Oct 2023 22:42:29 -0400 Subject: [PATCH 001/147] Changes as of 10/25 --- src/pages/users/[user].jsx | 787 +++++++++++++++++++------------------ 1 file changed, 396 insertions(+), 391 deletions(-) diff --git a/src/pages/users/[user].jsx b/src/pages/users/[user].jsx index 6308c37c..52732f33 100644 --- a/src/pages/users/[user].jsx +++ b/src/pages/users/[user].jsx @@ -1,5 +1,15 @@ +import firebase from 'firebase/app'; +// import { storage } from '../../config/firebaseConfig.js'; +import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'; +import { app } from '../../config/firebaseConfig.js'; + + +import 'firebase/storage'; + + import Head from 'next/head'; + import React from 'react'; import { Footer } from '@/components/Footer'; import { StandardNav } from '@/components/StandardNav'; @@ -11,54 +21,158 @@ import { RightSideFiller } from '@/components/dashboard/RightSideFiller'; import Skeleton from 'react-loading-skeleton'; import { Router } from 'react-router-dom'; import { useRouter } from 'next/router'; -import { data } from 'autoprefixer'; -import { faF } from '@fortawesome/free-solid-svg-icons'; - -export const data2 = [ - ["Task", "Hours per Day"], - ["Work", 11], - ["Eat", 2], - ["Commute", 2], - ["Watch TV", 2], - ["Sleep", 7], -]; - -// chart options no legend jsut graph - - +import { Transition, Fragment, Dialog } from '@headlessui/react'; export default function Users() { const router = useRouter(); const { user } = router.query; + let invalidUser = null; const [ownUser, setOwnUser] = useState(false); + const [username, setUsername] = useState(null); const [realName, setRealName] = useState(null); const [bio, setBio] = useState(null); const [followerCount, setFollowerCount] = useState(0); const [followingCount, setFollowingCount] = useState(0); + const [followedUser, setFollowedUser] = useState(null); + const [followerList, setFollowerList] = useState(null); + const [userData, setUserData] = useState(null); - const [friendedUser, setFriendedUser] = useState(null); const [pendingRequest, setPendingRequest] = useState(null); const [friendList, setFriendList] = useState(null); - const [followedUser, setFollowedUser] = useState(null); - const [followerList, setFollowerList] = useState(null); const [completedChallenges, setCompletedChallenges] = useState(null); + const [createDate, setCreateDate] = useState(null); const [rank, setRank] = useState(null); + const [openBio, setOpenBio] = useState(false); const [banner, bannerState] = useState(false); const [badges, setbadges] = useState([]); + + const [selectedImage, setSelectedImage] = useState(null); + const [isPopupOpen, setIsPopupOpen] = useState(false); + const [pfp, setPfp] = useState('`https://robohash.org/Kshitij.png?set=set1&size=150x150`'); + + + const handleImageChange = (event) => { + const file = event.target.files[0]; + setSelectedImage(file); + } + + + const handleSaveChanges = async () => { + if (!selectedImage) { + console.log("No image selected"); + setIsPopupOpen(false) + return; + } + + + // upload to firebase storage + try { + const storage = getStorage(); + const metadata = { + contentType: 'image/jpeg', + }; + + + const storageRef = ref(storage, `${userData.email}/pictures/pfp`); + const uploadTask = uploadBytesResumable(storageRef, selectedImage, metadata) + + + uploadTask.on('state_changed', + (snapshot) => { + // progress function + const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100); + console.log('Upload is ' + progress + '% done'); + switch (snapshot.state) { + case 'paused': + console.log('Upload is paused'); + break; + case 'running': + console.log('Upload is running'); + break; + } + }, + (error) => { + switch (error.code) { + case 'storage/unauthorized': + console.log('User does not have permission to access the object'); + break; + case 'storage/canceled': + console.log('User canceled the upload'); + break; + case 'storage/unknown': + console.log('Unknown error occurred, inspect error.serverResponse'); + break; + } + }, + async () => { + const imageUrl = await getDownloadURL(uploadTask.snapshot.ref) + + + console.log(imageUrl) + + + const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/updatePfp'; + const requestOptions = { + method: 'POST', headers: { + 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('idToken'), + }, + body: JSON.stringify({ imageUrl }), + }; + const response = await fetch(endPoint, requestOptions); + const result = await response.json(); + + + console.log(result) + + + if (response.ok) { + console.log("profile picture uploaded successfully"); + } else { + console.log("Failed to upload profile picture"); + } + window.location.reload(); + } + ); + setIsPopupOpen(false); + + + } catch (err) { + console.log(err); + console.log("An error occured while uploading profile picture"); + } + } + + + useEffect(() => { + if (!user) { + return; + } + const fetchPfp = async () => { + try { + + + } catch { + + + } + } + }) + + // Friend useEffect useEffect(() => { if (!user) { @@ -75,12 +189,16 @@ export default function Users() { const response = await fetch(endPoint, requestOptions); const result = await response.json(); + console.log(result) + const isFriend = result.friends.some((friend) => friend == localStorage.getItem('username')); + setFriendedUser(isFriend); + const endPoint2 = process.env.NEXT_PUBLIC_API_URL + '/friends/' + 'sentRequests'; const requestOptions2 = { method: 'GET', headers: { @@ -91,8 +209,10 @@ export default function Users() { const result2 = await response2.json(); const isPending = result2.some((friend) => friend.recipient.username == user); + setPendingRequest(isPending); + } catch (err) { invalidUser = true; } @@ -100,6 +220,7 @@ export default function Users() { fetchData(); }, [user]); + // Follower useEffect useEffect(() => { if (!user) { @@ -118,9 +239,11 @@ export default function Users() { const isFollower = result.followers.some(followers => followers.username == localStorage.getItem('username')); console.log(result) + setFollowerCount(result.followers.length); setFollowedUser(isFollower); + } catch (err) { invalidUser = true; } @@ -137,8 +260,10 @@ export default function Users() { const result = await response.json(); console.log(result) + setFollowerCount(result.following.length); + } catch (err) { invalidUser = true; } @@ -147,6 +272,7 @@ export default function Users() { fetchFollowing(); }, [user]); + // Challenge useEffect useEffect(() => { if (!user) { @@ -165,11 +291,13 @@ export default function Users() { console.log(result) setCompletedChallenges(result); + } catch (err) { console.log(err); } } + const fetchUserData = async () => { try { const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user; @@ -183,6 +311,7 @@ export default function Users() { setCreateDate(result.createdAt.substring(0, 10)) setRank(result.leaderboardNum) + } catch (err) { console.log(err); } @@ -191,6 +320,7 @@ export default function Users() { fetchUserData(); }, [user]) + useEffect(() => { if (!user) { return; @@ -208,13 +338,14 @@ export default function Users() { console.log(result) setCompletedChallenges(result); + } catch (err) { console.log(err); } } - }) + fetchData; + }, [user]) - // Get and store user data useEffect(() => { @@ -232,19 +363,24 @@ export default function Users() { const response = await fetch(endPoint, requestOptions); const result = await response.json(); + setUsername(result.username); if (result.username == localStorage.getItem('username')) { //setOwnUser(true); } + if (result.bio) { setBio(result.bio); } else { setBio(""); } + + setUserData(result); setRealName(result.firstName + ' ' + result.lastName); + } catch (err) { invalidUser = true; } @@ -252,19 +388,53 @@ export default function Users() { fetchData(); }, [user]); + + // get user's profile picture + useEffect(() => { + if (!user) { + return; + } + const fetchData = async () => { + try { + const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/pfp'; + const requestOptions = { + method: 'GET', headers: { + 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('idToken'), + }, + }; + const response = await fetch(endPoint, requestOptions); + const result = await response.json(); + + + setPfp(result) + + + + + } catch (err) { + console.log('failed to get profile picture') + } + }; + fetchData(); + }, [user]); + + function openTheBio() { setOpenBio(true); } + function closeBannerAndBio() { bannerState(false); setOpenBio(false); } + function openBanner() { bannerState(true); } + function saveBio() { setBio(document.getElementById('bio').value); closeBannerAndBio(); @@ -287,6 +457,7 @@ export default function Users() { }); } + const followUser = async () => { const endPoint = process.env.NEXT_PUBLIC_API_URL + `/followers/${user}/follow`; const requestOptions = { @@ -300,6 +471,7 @@ export default function Users() { setFollowedUser(true); } + const unfollowUser = async () => { const endPoint = process.env.NEXT_PUBLIC_API_URL + `/followers/${user}/unfollow`; const requestOptions = { @@ -313,6 +485,7 @@ export default function Users() { setFollowedUser(false); } + const friendUser = async () => { const endPoint = process.env.NEXT_PUBLIC_API_URL + `/friends/${username}/sendRequest`; const requestOptions = { @@ -326,6 +499,7 @@ export default function Users() { console.log(result); } + const unFriendUser = async () => { const endPoint = process.env.NEXT_PUBLIC_API_URL + `/friends/${username}/unadd`; const requestOptions = { @@ -339,6 +513,39 @@ export default function Users() { setFriendedUser(false); } + + + + const handlePopupOpen = () => { + setIsPopupOpen(true); + } + + + const handlePopupClose = () => { + setIsPopupOpen(false); + } + + + const handleClick = () => { + + + } + + + const handleDrop = () => { + + + } + + + const handleDragOver = () => { + + + } + + + + return ( <> @@ -354,389 +561,186 @@ export default function Users() {
-
-
-
-
-
-
-
- -
-
-

- {username || ( - - )} -

-

- {' '} - United States - - - {' '} - Admin -

-
-
-
- -
- - -
-
- Leaderboard Rank:
{rank}
-
- -
- Join Date:
{createDate}
-
- -
- Demo Statistics:
23.4%
-
- -
-
-

- #{rank} -

-

Rank

-
-
-
-
-
-

- {username || ( - - )} -

-
-
-
- + {/* BANNER */}
-
- {/* Main content area */} -
- {/* BANNER */} - - {/* Add profile content here */} -
-
-
-
-
-
-
-
-
-

Biography

- -
- {((!openBio && ownUser) && - - ) || ((ownUser && openBio) && - - )} -
-
-
- {((openBio && ownUser) && -
- -
- ) || ( -

- {bio === null || bio === "" ? "No bio set." : bio} -

- )} -
-
-
- {/* Badge Content */} -

Badges

-
-
- -
- - -

- Beta User -

-

- {new Date("09/12/2022").toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

-
- -
- - -

- Mastermind -

-

- {new Date("09/12/2022").toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

-
- -
- - -

- Mastermind II -

-

- {new Date("09/12/2022").toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

-
- -
- - -

- Creator -

-

- {new Date("09/12/2022").toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

- - -
- - -
- - -

- Contributor -

-

- {new Date("09/12/2022").toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

-
- - - - - {/* {badges.map((data) => ( -
- - -

- {data.badge.badgeName} -

-

- {new Date(data.createdAt).toLocaleDateString('en-US', { - month: '2-digit', - day: '2-digit', - year: 'numeric', - })} -

-
- ))} */} -
-
-
-
- -

Pinned Challenges

-
- - - -
- -

- Test Challenge -

- - - + {/* ACTUAL CONTENT AREA */} +
+
+ + {/* LEFT SIDE CONTENT */} +
+
+ + {/* PFP AND USER DATA */} +
+ Profile +

{username}

+
+
+ {bio? +

+ {bio} +

+ : +

+ Hey guys! Sample bio here. +

+ } +
- -
-
+
+
+ Rank:
#3
+
+
+ +
+
+

+ Followers +

+

+ 56 +

+
+
+

+ Following +

+

+ 36 +

+
+
+ +
+

{bio}

+
+ +
+

+ Joined: {createDate} +

+
+ + +
+
+ + +
+ +
+ +
+
+
+ {/* BADGES */} +
+
+

Badges

+ +
+ {/* BADGE 1 */} +
+ +

+ Beta User +

+

+ {new Date("09/12/2022").toLocaleDateString('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + })} +

+
+ + {/* BADGE 2 */} +
+ +

+ Beta User +

+

+ {new Date("09/12/2022").toLocaleDateString('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + })} +

+
+
+ + + +
+ {/* CHALLENGES */} +
+ +

The challenges will be here

+

{ }

+
+
+
+ +
+ {/* CHALLENGES */} +
+ +

Additonal Content here

+

{ }

+
+
+ +
+ {/* CHALLENGES */} +
+ +

Additonal Content here

+

{ }

+
- -
+
+ + + + + +