diff --git a/client/app/(protected)/(main)/(profile)/[username]/page.tsx b/client/app/(protected)/(main)/(profile)/[username]/page.tsx index 0d8bb20..76f5e6e 100644 --- a/client/app/(protected)/(main)/(profile)/[username]/page.tsx +++ b/client/app/(protected)/(main)/(profile)/[username]/page.tsx @@ -1,14 +1,14 @@ -'use client'; -import { useContext, useEffect, useState } from 'react'; -import { FollowButton } from '@/components/follow-button'; -import { SessionContext } from '@/app/(protected)/layout'; -import { FaUserCircle } from 'react-icons/fa'; -import { MainFeed } from '@/components/main-feed'; -import { useRouter } from 'next/navigation'; -import Image from 'next/image'; -import { Avatar } from '@/components/avatar'; -import { ProfileFeed } from '@/components/profile-feed'; -import { socket } from '@/socket'; +"use client"; +import { useContext, useEffect, useState } from "react"; +import { FollowButton } from "@/components/follow-button"; +import { SessionContext } from "@/app/(protected)/layout"; +import { FaUserCircle } from "react-icons/fa"; +import { MainFeed } from "@/components/main-feed"; +import { useRouter } from "next/navigation"; +import Image from "next/image"; +import { Avatar } from "@/components/avatar"; +import { ProfileFeed } from "@/components/profile-feed"; +import { socket } from "@/socket"; export default function UserProfile({ params, @@ -20,10 +20,10 @@ export default function UserProfile({ const { userSession, setUserSession } = useContext(SessionContext); // store the profile information in state // const [username, setUsername] = useState(params.username); - const [displayName, setDisplayName] = useState(''); - const [description, setDescription] = useState(''); - const [avatarUrl, setAvatarUrl] = useState(''); - const [profileId, setProfileId] = useState(''); + const [displayName, setDisplayName] = useState(""); + const [description, setDescription] = useState(""); + const [avatarUrl, setAvatarUrl] = useState(""); + const [profileId, setProfileId] = useState(""); // store status in state for conditional rendering const [uploading, setUploading] = useState(false); const [editing, setEditing] = useState(false); @@ -34,15 +34,15 @@ export default function UserProfile({ description: string; avatarUrl: string | null; }>({ - displayName: '', - description: '', - avatarUrl: '', + displayName: "", + description: "", + avatarUrl: "", }); // store the path and file in state when uploading a new avatar const [newAvatar, setNewAvatar] = useState<{ path: string; file: File | null; - }>({ path: '', file: null }); + }>({ path: "", file: null }); // store the number of followers and following in state const [followers, setFollowers] = useState(0); const [following, setFollowing] = useState(0); @@ -54,7 +54,7 @@ export default function UserProfile({ //! Might not need this // after updating info, get the new session which includes updated username in meta data and update the session context for use in sidebar const getCurrentSession = async () => { - const response = await fetch('http://localhost:8080/auth/session'); + const response = await fetch("http://localhost:8080/auth/session"); const json = await response.json(); const session = await json.data.session; console.log(session); @@ -67,10 +67,10 @@ export default function UserProfile({ `http://localhost:8080/users/info?user=${params.username}` ); const json = await response.json(); - console.log('fetchProfileInfo: ', json); + console.log("fetchProfileInfo: ", json); setDisplayName(json.data[0].display_name); setProfileId(json.data[0].id); - setDescription(json.data[0].description || ''); + setDescription(json.data[0].description || ""); setAvatarUrl(json.data[0].profile_avatar); setFollowers(json.followers); setFollowing(json.following); @@ -89,17 +89,17 @@ export default function UserProfile({ const handleSaveEdits = async (e: React.ChangeEvent) => { e.preventDefault(); const formData = new FormData(e.target); - formData.append('id', profileId); + formData.append("id", profileId); if (newAvatar.file) { - formData.append('file', newAvatar.file); - formData.append('path', newAvatar.path); + formData.append("file", newAvatar.file); + formData.append("path", newAvatar.path); } - const response = await fetch('http://localhost:8080/users/edit', { - method: 'POST', + const response = await fetch("http://localhost:8080/users/edit", { + method: "POST", body: formData, }); const url = await response.json(); - console.log('url', url); + console.log("url", url); if (url && url.publicUrl) { setAvatarUrl(url.publicUrl); } @@ -122,13 +122,13 @@ export default function UserProfile({ // setUploading(true); if (!event.target.files || event.target.files.length === 0) { - throw new Error('You must select an image to upload.'); + throw new Error("You must select an image to upload."); } const file = event.target.files[0]; const previewUrl = URL.createObjectURL(file); setAvatarUrl(previewUrl); - const fileExt = file.name.split('.').pop(); + const fileExt = file.name.split(".").pop(); const fileName = `avatar_${profileId}.${fileExt}?date=${Date.now()}`; const filePath = `${fileName}`; setNewAvatar({ path: filePath, file: file }); @@ -138,86 +138,86 @@ export default function UserProfile({ const response = await fetch( `http://localhost:8080/messages/room?userId=${profileId}`, { - method: 'POST', + method: "POST", } ); const result = await response.json(); const chatId = result.chatId; - const user1 = userSession?.user.user_metadata.display_name; - const user2 = displayName; - console.log(chatId); + const user = userSession?.user.user_metadata.display_name; + console.log("Start Chatroom: ", chatId); if (chatId) { - socket.emit('join_room', { chatId, user1, user2 }); + console.log("Emmitting join_room"); + socket.emit("join_room", { chatId, user }); } router.push(`/${params.username}/${chatId}`); }; return loading ? null : ( -
+