Loading...
;
if (error) return
{pokemonInfo.name }
@@ -42,19 +130,19 @@ const PokemonProfile = () => {
/>
- {/* Height */}
-
Height:
-
- {pokemonInfo.height * 10}
- cm
-
-
- {/* Weight */}
-
Weight:
-
- {pokemonInfo.weight * 0.1}
- kg
-
+ {/* Height */}
+
Height:
+
+ {(pokemonInfo.height * 10).toFixed(2)}
+ cm
+
+
+ {/* Weight */}
+
Weight:
+
+ {(pokemonInfo.weight * 0.1).toFixed(2)}
+ kg
+
{/* Type */}
Type:
@@ -83,16 +171,23 @@ const PokemonProfile = () => {
{/* Like and Dislike Buttons */}
- {/* Like Button */}
-
-
- {/* Dislike Button */}
-
+ {/* Like Button */}
+
+
+ {/* Dislike Button */}
+
+
/* Add more fields as needed */
);
diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index 396a148..9cb8bc5 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -1,85 +1,223 @@
import React from "react";
-import testData from '../assets/profile_placeholder.json';
-import background from "../assets/profile_bg.png"
-import UserLikedPokemon from "../components/UserLikedPokemon"
-import { useState, useContext, useEffect } from "react";
+import testData from "../assets/profile_placeholder.json";
+import background from "../assets/profile_bg.png";
+import UserLikedPokemon from "../components/UserLikedPokemon";
+import { useState, useContext, useEffect, useRef } from "react";
+import defaultProfilePic from "../assets/no_profile_pic.jpg";
-import { useNavigate } from 'react-router-dom';
-import AuthContext from '../AuthContext';
+import { useNavigate } from "react-router-dom";
+import AuthContext from "../AuthContext";
const Profile = () => {
+ const [editingBio, setEditingBio] = useState(false);
+ const [bio, setBio] = useState("Loading...");
+ const [ownData, setOwnData] = useState({
+ id: 1,
+ name: "Loading...",
+ bio: "loading...",
+ profile_pic: null,
+ });
- const [editingBio, setEditingBio] = useState(false);
- const [bio, setBio] = useState(testData.bio)
+ const { isAuthenticated, user, loading } = useContext(AuthContext);
+ const navigate = useNavigate();
+ const fileInputRef = useRef();
- const { isAuthenticated , user, loading} = useContext(AuthContext);
- const navigate = useNavigate();
+ const handleSubmit = async (event) => {
+ event.preventDefault(); // Prevent the default form submission
- console.log("isAuthenticated:", isAuthenticated);
- useEffect(() => {
- if (!isAuthenticated && !loading) {
- navigate('/login'); // Redirect to login if not authenticated
+ const formData = new FormData();
+ const file = fileInputRef.current.files[0]; // Get the file from the input
+ if (file) {
+ formData.append("profile_pic", file); // Append the file to FormData
+ console.log("form data: ", formData);
+
+ try {
+ const response = await fetch("/api/profile/me/update/profile_pic", {
+ method: "POST",
+ body: formData,
+ });
+
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
}
- }, [isAuthenticated, navigate]);
- const updateBio = (event) => {
- setBio(event.target.value)
+ // Handle success, e.g., update the UI or show a message
+ alert("Profile picture uploaded successfully!");
+ } catch (error) {
+ console.error("Error uploading profile picture:", error);
+ alert("Error uploading profile picture");
+ }
}
+ };
- const handleBio = () => {
+ const fetchProfile = () => {
+ console.log("Fetching profile");
+ fetch("/api/profile/me")
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("data: ", data);
+ setOwnData(data);
+ })
+ .catch((error) => alert("Error fetching user list"));
+ };
- console.log("Handling bio")
-
- if (editingBio === false)
- return (
{bio}
)
- else
- {
- return (
-
- )
- }
+ console.log("isAuthenticated:", isAuthenticated);
+ useEffect(() => {
+ if (!isAuthenticated && !loading) {
+ navigate("/login"); // Redirect to login if not authenticated
+ } else {
+ fetchProfile();
}
+ }, [isAuthenticated, navigate, loading]);
- const handleBioEditing = (event) => {
- setEditingBio(true);
- }
+ // useEffect(() => {
+ // console.log("Fetching profile");
+ // fetchProfile();
+ // }, []);
+
+ console.log("own data: ", ownData);
+
+ const updateBio = (event) => {
+ setBio(event.target.value);
+ };
- const handleBioSaving = (event) => {
- setEditingBio(false);
- //we would send the new bio data to the server here
+ const handleBio = () => {
+ console.log("Handling bio");
+
+ if (editingBio === false)
+ return
{ownData.bio}
;
+ else {
+ return (
+
+ );
}
+ };
+
+ const RenderProfilePic = () => {
+ console.log("rendering profile pic");
+ return (
+
+ );
+ /* if (ownData.profile_pic === null) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ } */
+ };
+
+ const handleBioEditing = (event) => {
+ setEditingBio(true);
+ };
+
+ const handleBioSaving = (event) => {
+ setEditingBio(false);
+ const newBio = { bio: bio };
+ fetch("api/profile/me/update/bio", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(newBio),
+ })
+ .then(fetchProfile())
+ .catch((error) => alert("Error updating bio"));
+ };
+
+ const handleNewProfilePic = (event) => {
+ fetch;
+ };
+
+ return (
+
+
+
+
+
+
+
+ {ownData.name}
+
+
+
+
+ {handleBio()}
+
+
+
+
+
+
+
+
+
+
+
+ Pokemon that I like:
+
+
+
+
+ );
+};
- return (
-
-
-
-
-
-
-
- {testData.username}
-
-
-
{handleBio()}
-
-
-
-
-
-
-
-
-
-
Pokemon that I like:
-
-
-
- )
-}
-
-export default Profile;
\ No newline at end of file
+export default Profile;