From af7ad89c7e365702a0cf61f1acda9fe916bea375 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Fri, 18 Oct 2024 10:16:07 +0300
Subject: [PATCH 01/13] Made the banner in the background of user profile
 taller

---
 frontend/pokedex_app/src/pages/profile.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index e547bb1..f71684d 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -42,10 +42,10 @@ const Profile = () => {
         <main>
             <section className="w-full overflow-hidden dark:bg-gray-900">
                 <div className="flex flex-col">
-                    <img src={background} alt="pokemon in the background" className="w-full xl:h-[20rem] lg:h-[18rem] md:h-[16rem] sm:h-[14rem] xs:h-[11rem]"/>
+                    <img src={background} alt="pokemon in the background" className="w-full xl:h-[36rem] lg:h-[32rem] md:h-[28rem] sm:h-[24rem] xs:h-[20rem]"/>
                     <div className="sm:w-[80%] xs:w-[90%] mx-auto flex">
                         <img src={testData.profile_pic} alt="User Profile"
-                                className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-blue-700 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]" />
+                                className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]" />
                         <h1
                             className="w-full text-left my-4 sm:mx-4 xs:pl-4 text-gray-800 dark:text-white lg:text-4xl md:text-3xl sm:text-3xl xs:text-xl font-mono">
                             {testData.username}</h1>

From 8cdf7c88708023b60c663efbbacaf5cb55288b43 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Fri, 18 Oct 2024 12:39:31 +0300
Subject: [PATCH 02/13] Removed not null requirement from email addresses for
 now

---
 backend/database/init.sql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/database/init.sql b/backend/database/init.sql
index bcb40a8..c04fda3 100644
--- a/backend/database/init.sql
+++ b/backend/database/init.sql
@@ -3,7 +3,7 @@
 CREATE TABLE users (
     id SERIAL PRIMARY KEY,
     username VARCHAR(100) UNIQUE NOT NULL,
-    email VARCHAR(100) UNIQUE NOT NULL,
+    email VARCHAR(100) UNIQUE,
     password VARCHAR(100) NOT NULL,  -- Encrypted password
     role VARCHAR(20) DEFAULT 'user',  -- 'guest', 'user', 'admin'
     created_at TIMESTAMP DEFAULT NOW(),

From 16c55cc3a43e1c258b39383be543ce36d193b6d7 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Fri, 18 Oct 2024 16:09:03 +0300
Subject: [PATCH 03/13] Started implementing a page listing users. Currently
 working on: pagination

---
 frontend/pokedex_app/src/App.jsx              |  2 +
 .../src/assets/community_placeholder.json     | 53 +++++++++++
 .../pokedex_app/src/components/Community.jsx  | 91 +++++++++++++++++++
 .../src/components/Navbar/Navbar.jsx          |  3 +
 .../src/components/RegistrationForm.jsx       |  4 +
 frontend/pokedex_app/src/pages/profile.jsx    |  2 +-
 6 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 frontend/pokedex_app/src/assets/community_placeholder.json
 create mode 100644 frontend/pokedex_app/src/components/Community.jsx

diff --git a/frontend/pokedex_app/src/App.jsx b/frontend/pokedex_app/src/App.jsx
index f5d94e9..e8a53f9 100644
--- a/frontend/pokedex_app/src/App.jsx
+++ b/frontend/pokedex_app/src/App.jsx
@@ -11,6 +11,7 @@ import Footer from './components/footer';
 import PrivacyPolicy from './pages/PrivacyPolicy';
 import TermsOfService from './pages/TermsOfService';
 import ErrorBoundary from './ErrorBoundary';
+import Community from "./components/Community";
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
             <Route path="/pokemon/:name" element={<PokemonProfile />} />
             <Route path="/privacy-policy" element={<PrivacyPolicy />} />
             <Route path="/terms" element={<TermsOfService />} />
+            <Route path="/Community" element={<Community/>}/>
           </Routes>
         </main>
         <Footer />
diff --git a/frontend/pokedex_app/src/assets/community_placeholder.json b/frontend/pokedex_app/src/assets/community_placeholder.json
new file mode 100644
index 0000000..02b18ea
--- /dev/null
+++ b/frontend/pokedex_app/src/assets/community_placeholder.json
@@ -0,0 +1,53 @@
+{
+	"users": [
+		{
+			"username":	"Jane Doe",
+	"bio": "Hi! My name is Jane! I was created only for testing purpoposes",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"ivysaur", "raticate", "flareon", "eevee", "cubone", "seel", "krabby", "kingler", "mankey", "rhydon", "staryu"
+	]
+		},
+		{
+
+			"username":	"Ash Ketchum",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"Brock",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"Jessie",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"James",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		}
+	]
+}
\ No newline at end of file
diff --git a/frontend/pokedex_app/src/components/Community.jsx b/frontend/pokedex_app/src/components/Community.jsx
new file mode 100644
index 0000000..361f520
--- /dev/null
+++ b/frontend/pokedex_app/src/components/Community.jsx
@@ -0,0 +1,91 @@
+import React from "react";
+import testProfiles from '../assets/community_placeholder.json';
+import { useState, useEffect } from "react";
+
+const Community = () => {
+
+/* 	fetch("/api/profiles")
+	.then((response) => console.log(response)) */
+	const [users, setUsers] = useState(testProfiles);
+	const [loading, setLoading] = useState(false);
+	const [usersPerPage, setUsersPerPage] = useState(40);
+
+	console.log(users.users.length)
+
+	let totalPages;
+
+	if (users.users.length <= 40)
+	{
+		totalPages = 1;
+	}
+	else
+	{
+		totalPages = Math.floor(users.users.length / 40)
+	}
+
+	const [currentPage, setCurrentPage] = useState(totalPages);
+
+	useEffect(() => {
+		const fetchUsers = async () => {
+			setLoading(true);
+			setUsers(testProfiles);
+			setLoading(false);
+		};
+		fetchUsers();
+	}, [])
+
+	const UsersOverview = (props) => {
+
+		if (props.loading === true)
+		{
+			return (<h2 className="text-7xl text-center font-pokemon">Loading...</h2>)
+		}
+		return (
+			<ul className="grid grid-cols-4">
+				{users.users.map((user => (
+					<li className="p-5 text-center text-3xl" key={user.username}>{user.username}<br/><br/> <img src={user.profile_pic}/> </li>
+				)))
+				}
+			</ul>
+		)
+	}
+
+	const Pagination = ({usersPerPage, length}) => {
+
+		const paginationNumbers = [];
+
+		for (let i = 1; i <= Math.ceil(length / postsPerPage); i++)
+		{
+			paginationNumbers.push(i);
+		}
+
+		return (
+			<div className='pagination'>
+
+      			{paginationNumbers.map((pageNumber) => (
+
+        			<button key={pageNumber}>{pageNumber}</button>
+
+      			))}
+
+    		</div>
+
+ 		 );
+
+
+	}
+
+	return (
+		<main>
+			<section>
+				<h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">Our community</h1>
+				
+				<div className="">
+					<UsersOverview loading={loading}/>
+				</div>
+			</section>
+		</main>
+	)
+}
+
+export default Community;
\ No newline at end of file
diff --git a/frontend/pokedex_app/src/components/Navbar/Navbar.jsx b/frontend/pokedex_app/src/components/Navbar/Navbar.jsx
index ac0b3c0..2b1c594 100644
--- a/frontend/pokedex_app/src/components/Navbar/Navbar.jsx
+++ b/frontend/pokedex_app/src/components/Navbar/Navbar.jsx
@@ -15,6 +15,9 @@ const Navbar = () => {
 					<NavLink to="/Login">
 						Login | Signup
 					</NavLink>
+					<NavLink to="/Community">
+						Community
+					</NavLink>
 				</div>
 			</nav>
 		</>
diff --git a/frontend/pokedex_app/src/components/RegistrationForm.jsx b/frontend/pokedex_app/src/components/RegistrationForm.jsx
index 2544ca8..928c072 100644
--- a/frontend/pokedex_app/src/components/RegistrationForm.jsx
+++ b/frontend/pokedex_app/src/components/RegistrationForm.jsx
@@ -9,6 +9,9 @@ const RegistrationForm = (props) => {
 	const [pwordVisibility, setPwordVisibility] = useState(false);
 
 
+	/* const createProfile = () => {
+		fetch("/api/profile/create")
+	} */
 
 	const handleUsername = (event) => {
 		setUsername(event.target.value)
@@ -32,6 +35,7 @@ const RegistrationForm = (props) => {
 			if (response.status === 201)
 			{
 				alert("Successfully registered!")
+				
 			}
 			else if (response.status === 400)
 			{
diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index f71684d..3abf899 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -23,7 +23,7 @@ const Profile = () => {
         {
             return (
                 <section className="text-lg">
-                    <textarea spellCheck="true" name="new_bio" onChange={updateBio} className="bg-gray-300 resize" cols={60} defaultValue={bio} maxLength={3000} rows={2} type="text"/>
+                    <textarea spellCheck="true" name="new_bio" onChange={updateBio} className="bg-gray-300 resize" cols={60} defaultValue={bio} maxLength={250} rows={2} type="text"/>
                 </section>
             )
         }

From 2f9dd60bd42c4fd9b0e6721b3036b688a4cdf3e7 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Mon, 21 Oct 2024 12:13:07 +0300
Subject: [PATCH 04/13] Pagination for users list is working - to be done
 still: search functionality

---
 .../src/assets/community_placeholder.json     | 49 +++++++++++++++
 .../pokedex_app/src/components/Community.jsx  | 63 ++++++++++++++-----
 2 files changed, 96 insertions(+), 16 deletions(-)

diff --git a/frontend/pokedex_app/src/assets/community_placeholder.json b/frontend/pokedex_app/src/assets/community_placeholder.json
index 02b18ea..79478e4 100644
--- a/frontend/pokedex_app/src/assets/community_placeholder.json
+++ b/frontend/pokedex_app/src/assets/community_placeholder.json
@@ -45,6 +45,55 @@
 	"bio": "Hi! My name is Ash! Gotta catch'em all!",
 	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
 	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+			"username":	"Jane Doe 2",
+	"bio": "Hi! My name is Jane! I was created only for testing purpoposes",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"ivysaur", "raticate", "flareon", "eevee", "cubone", "seel", "krabby", "kingler", "mankey", "rhydon", "staryu"
+	]
+		},
+		{
+
+			"username":	"Ash Ketchum 2",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"Brock 2",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"Jessie 2",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
+	"liked_pokemons": [
+		"pikachu"
+	]
+		},
+		{
+
+			"username":	"James 2",
+	"bio": "Hi! My name is Ash! Gotta catch'em all!",
+	"profile_pic": "https://www.shutterstock.com/shutterstock/photos/2500022355/display_1500/stock-photo-young-latin-woman-in-casual-clothing-in-the-street-looking-at-camera-during-early-morning-2500022355.jpg",
+	"created_at": "1999-01-08 04:05:06",
 	"liked_pokemons": [
 		"pikachu"
 	]
diff --git a/frontend/pokedex_app/src/components/Community.jsx b/frontend/pokedex_app/src/components/Community.jsx
index 361f520..fdfc535 100644
--- a/frontend/pokedex_app/src/components/Community.jsx
+++ b/frontend/pokedex_app/src/components/Community.jsx
@@ -8,19 +8,17 @@ const Community = () => {
 	.then((response) => console.log(response)) */
 	const [users, setUsers] = useState(testProfiles);
 	const [loading, setLoading] = useState(false);
-	const [usersPerPage, setUsersPerPage] = useState(40);
-
-	console.log(users.users.length)
+	const [usersPerPage, setUsersPerPage] = useState(8);
 
 	let totalPages;
 
-	if (users.users.length <= 40)
+	if (users.users.length <= usersPerPage)
 	{
 		totalPages = 1;
 	}
 	else
 	{
-		totalPages = Math.floor(users.users.length / 40)
+		totalPages = Math.floor(users.users.length / usersPerPage)
 	}
 
 	const [currentPage, setCurrentPage] = useState(totalPages);
@@ -34,15 +32,38 @@ const Community = () => {
 		fetchUsers();
 	}, [])
 
-	const UsersOverview = (props) => {
+	const UsersOverview = ({loading, users, usersPerPage, currentPage}) => {
+
+		let shownUsersStart;
 
-		if (props.loading === true)
+		console.log('current page - user rendering', currentPage)
+		console.log("Users per page: ", usersPerPage)
+		
+		if (currentPage == 1)
+		{
+			shownUsersStart = 0
+		}
+		else
+		{
+			shownUsersStart = (currentPage - 1) * usersPerPage
+			console.log("Calculating users for current page other than first")
+		}
+
+		let shownUsersEnd = (currentPage * usersPerPage)
+
+		console.log('Shown users start and end', shownUsersStart, shownUsersEnd)
+
+		const  currentPageUsers = users.slice(shownUsersStart, shownUsersEnd)
+
+		console.log('Current page users:', currentPageUsers)
+
+		if (loading === true)
 		{
 			return (<h2 className="text-7xl text-center font-pokemon">Loading...</h2>)
 		}
 		return (
 			<ul className="grid grid-cols-4">
-				{users.users.map((user => (
+				{currentPageUsers.map((user => (
 					<li className="p-5 text-center text-3xl" key={user.username}>{user.username}<br/><br/> <img src={user.profile_pic}/> </li>
 				)))
 				}
@@ -50,39 +71,49 @@ const Community = () => {
 		)
 	}
 
-	const Pagination = ({usersPerPage, length}) => {
+	const Pagination = ({usersPerPage, length, currentPage}) => {
 
 		const paginationNumbers = [];
 
-		for (let i = 1; i <= Math.ceil(length / postsPerPage); i++)
+		for (let i = 1; i <= Math.ceil(length / usersPerPage); i++)
 		{
 			paginationNumbers.push(i);
 		}
 
+		const handlePagination = ({pageNumber}) => {
+
+			//console.log("Page num: ", pageNumber)
+			setCurrentPage(pageNumber)
+			//console.log("Current page: ", currentPage)
+		}
+
 		return (
-			<div className='pagination'>
+			<div className='text-4xl items-center flex justify-center m-10'>
 
-      			{paginationNumbers.map((pageNumber) => (
+      			{paginationNumbers.map(pageNumber => (
 
-        			<button key={pageNumber}>{pageNumber}</button>
+        			<button key={pageNumber} className={
+						currentPage === pageNumber ? "text-rose-700 border-pink-950 border-2 p-2 m-3 rounded-lg bg-rose-300" : "text-rose-400 border-pink-950 border-2 p-2 m-2 rounded-md bg-rose-100"
+					} onClick={() => handlePagination({pageNumber})}>{pageNumber}</button>
 
       			))}
 
     		</div>
 
  		 );
-
-
 	}
 
+	
+
 	return (
 		<main>
 			<section>
 				<h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">Our community</h1>
 				
 				<div className="">
-					<UsersOverview loading={loading}/>
+					<UsersOverview loading={loading} users={users.users} usersPerPage={usersPerPage} currentPage={currentPage}/>
 				</div>
+				<Pagination currentPage={currentPage} length={users.users.length} usersPerPage={usersPerPage}/>
 			</section>
 		</main>
 	)

From e88b31ffe12f028f9d5fb0f9fc0f0680f8b26059 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Mon, 21 Oct 2024 12:25:14 +0300
Subject: [PATCH 05/13] Added search box for users - does not do anything yet

---
 .../pokedex_app/src/components/Community.jsx  | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/pokedex_app/src/components/Community.jsx b/frontend/pokedex_app/src/components/Community.jsx
index fdfc535..7b6c5c3 100644
--- a/frontend/pokedex_app/src/components/Community.jsx
+++ b/frontend/pokedex_app/src/components/Community.jsx
@@ -9,6 +9,7 @@ const Community = () => {
 	const [users, setUsers] = useState(testProfiles);
 	const [loading, setLoading] = useState(false);
 	const [usersPerPage, setUsersPerPage] = useState(8);
+	const [searchQuery, setSearchQuery] = useState("");
 
 	let totalPages;
 
@@ -35,10 +36,7 @@ const Community = () => {
 	const UsersOverview = ({loading, users, usersPerPage, currentPage}) => {
 
 		let shownUsersStart;
-
-		console.log('current page - user rendering', currentPage)
-		console.log("Users per page: ", usersPerPage)
-		
+	
 		if (currentPage == 1)
 		{
 			shownUsersStart = 0
@@ -46,17 +44,13 @@ const Community = () => {
 		else
 		{
 			shownUsersStart = (currentPage - 1) * usersPerPage
-			console.log("Calculating users for current page other than first")
 		}
 
 		let shownUsersEnd = (currentPage * usersPerPage)
 
-		console.log('Shown users start and end', shownUsersStart, shownUsersEnd)
 
 		const  currentPageUsers = users.slice(shownUsersStart, shownUsersEnd)
 
-		console.log('Current page users:', currentPageUsers)
-
 		if (loading === true)
 		{
 			return (<h2 className="text-7xl text-center font-pokemon">Loading...</h2>)
@@ -71,6 +65,21 @@ const Community = () => {
 		)
 	}
 
+	const handleSearch = () => {
+		
+	}
+
+	const SearchUser = () => {
+		
+		return (
+			<div className="flex justify-center">
+				<h2 className="mx-4 font-mono text-rose-950">Search users by name: </h2>
+				<input className="bg-rose-200 content-center" type="text"></input>
+			</div>
+		)
+	}
+
+
 	const Pagination = ({usersPerPage, length, currentPage}) => {
 
 		const paginationNumbers = [];
@@ -82,9 +91,7 @@ const Community = () => {
 
 		const handlePagination = ({pageNumber}) => {
 
-			//console.log("Page num: ", pageNumber)
 			setCurrentPage(pageNumber)
-			//console.log("Current page: ", currentPage)
 		}
 
 		return (
@@ -109,7 +116,7 @@ const Community = () => {
 		<main>
 			<section>
 				<h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">Our community</h1>
-				
+				<SearchUser/>
 				<div className="">
 					<UsersOverview loading={loading} users={users.users} usersPerPage={usersPerPage} currentPage={currentPage}/>
 				</div>

From ba39cf748b1cfe7f73174bf02c20bd9ee75fe158 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Mon, 21 Oct 2024 14:20:32 +0300
Subject: [PATCH 06/13] User list is now fetched from the backend (picture
 display is not working yet)

---
 .../pokedex_app/src/components/Community.jsx  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/pokedex_app/src/components/Community.jsx b/frontend/pokedex_app/src/components/Community.jsx
index 7b6c5c3..72710d6 100644
--- a/frontend/pokedex_app/src/components/Community.jsx
+++ b/frontend/pokedex_app/src/components/Community.jsx
@@ -4,22 +4,20 @@ import { useState, useEffect } from "react";
 
 const Community = () => {
 
-/* 	fetch("/api/profiles")
-	.then((response) => console.log(response)) */
-	const [users, setUsers] = useState(testProfiles);
+	const [userList, setUserList] = useState([]);
 	const [loading, setLoading] = useState(false);
 	const [usersPerPage, setUsersPerPage] = useState(8);
 	const [searchQuery, setSearchQuery] = useState("");
 
 	let totalPages;
 
-	if (users.users.length <= usersPerPage)
+	if (userList.length <= usersPerPage)
 	{
 		totalPages = 1;
 	}
 	else
 	{
-		totalPages = Math.floor(users.users.length / usersPerPage)
+		totalPages = Math.floor(userList.length / usersPerPage)
 	}
 
 	const [currentPage, setCurrentPage] = useState(totalPages);
@@ -27,8 +25,11 @@ const Community = () => {
 	useEffect(() => {
 		const fetchUsers = async () => {
 			setLoading(true);
-			setUsers(testProfiles);
-			setLoading(false);
+			fetch("/api/profile")
+			.then((response) => response.json())
+			.then((data) => (setUserList(data)))
+			.then(setLoading(false))
+			.catch((error) => alert("Error fetching user list"))			
 		};
 		fetchUsers();
 	}, [])
@@ -58,7 +59,7 @@ const Community = () => {
 		return (
 			<ul className="grid grid-cols-4">
 				{currentPageUsers.map((user => (
-					<li className="p-5 text-center text-3xl" key={user.username}>{user.username}<br/><br/> <img src={user.profile_pic}/> </li>
+					<li className="p-5 text-center text-3xl" key={user.name}>{user.name}<br/><br/> <img src={user.profile_pic}/> </li>
 				)))
 				}
 			</ul>
@@ -118,9 +119,9 @@ const Community = () => {
 				<h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">Our community</h1>
 				<SearchUser/>
 				<div className="">
-					<UsersOverview loading={loading} users={users.users} usersPerPage={usersPerPage} currentPage={currentPage}/>
+					<UsersOverview loading={loading} users={userList} usersPerPage={usersPerPage} currentPage={currentPage}/>
 				</div>
-				<Pagination currentPage={currentPage} length={users.users.length} usersPerPage={usersPerPage}/>
+				<Pagination currentPage={currentPage} length={userList.length} usersPerPage={usersPerPage}/>
 			</section>
 		</main>
 	)

From f9978e1768989db6b0129394c34eacb2dbe53104 Mon Sep 17 00:00:00 2001
From: Leonor Tu <jingyi.tu@outlook.com>
Date: Mon, 21 Oct 2024 14:25:23 +0300
Subject: [PATCH 07/13] Feat: added dynamic button for shuffle

---
 frontend/pokedex_app/package-lock.json     | 10 ++++++++++
 frontend/pokedex_app/package.json          |  1 +
 frontend/pokedex_app/src/pages/pokedex.jsx | 11 +++++++----
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/pokedex_app/package-lock.json b/frontend/pokedex_app/package-lock.json
index e6fa8ec..dd3157a 100644
--- a/frontend/pokedex_app/package-lock.json
+++ b/frontend/pokedex_app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@heroicons/react": "^2.1.5",
+        "lucide-react": "^0.453.0",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -3843,6 +3844,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/frontend/pokedex_app/package.json b/frontend/pokedex_app/package.json
index 3746f2b..d8417d7 100644
--- a/frontend/pokedex_app/package.json
+++ b/frontend/pokedex_app/package.json
@@ -12,6 +12,7 @@
   "proxy": "http://localhost:3000",
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "lucide-react": "^0.453.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/frontend/pokedex_app/src/pages/pokedex.jsx b/frontend/pokedex_app/src/pages/pokedex.jsx
index 06a89f0..45d4788 100644
--- a/frontend/pokedex_app/src/pages/pokedex.jsx
+++ b/frontend/pokedex_app/src/pages/pokedex.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import logo from '../../img/logo.png';
 import './pokedex.css';
+import { RefreshCw } from 'lucide-react';
 
 const Pokedex = () => {
   const [pokemonList, setPokemonList] = useState([]);
@@ -188,21 +189,23 @@ const Sort = ({ sortOrder, onSort }) => (
     <option value="ID-desc">ID (Descending)</option>
     <option value="A-Z">A-Z</option>
     <option value="Z-A">Z-A</option>
-    <option value="random" disabled>Random</option> 
+    <option value="random" disabled>Random</option>
     </select>
   </div>
 );
 
 // Shuffle button
 const Shuffle = ({ isFetching, onShuffle }) => (
+  <div className="w-full flex justify-center">
   <button
     onClick={onShuffle}
     disabled={isFetching}
-    className={`block mx-auto my-12 px-6 py-3 font-semibold text-white rounded-lg shadow-lg transition-all
-      ${isFetching ? 'bg-gray-500 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700'}`}
+    className="inline-flex items-center justify-center space-x-1 bg-sky-400 hover:bg-sky-500 text-white font-medium text-sm py-1.5 px-3 rounded transition-colors duration-300"
   >
-    {isFetching ? "Loading..." : "Shuffle"}
+    <RefreshCw size={14} className={isFetching ? "animate-spin" : ""} />
+    <span>{isFetching ? "Loading..." : "Surprise Me!"}</span>
   </button>
+</div>
 );
 
 // Pokémon List component (non-search)

From f63b3435f2cd0dfaf18a254d985b3e2d7928539a Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Mon, 21 Oct 2024 14:55:28 +0300
Subject: [PATCH 08/13] Started connecting frontend to backend: communitty page
 renders users from database (pictures don't work yet). User profile also
 fetches user data from backend (again, excluding pictures)

---
 backend/models/profileModel.js             | 10 +++++-----
 frontend/pokedex_app/src/pages/profile.jsx | 19 ++++++++++++++++---
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/backend/models/profileModel.js b/backend/models/profileModel.js
index 3c7d375..934986d 100644
--- a/backend/models/profileModel.js
+++ b/backend/models/profileModel.js
@@ -11,7 +11,7 @@ const createProfile = async (user_id, name, bio, profile_pic) => {
 
 const updateProfile = async (id, name, bio, profile_pic) => {
   const result = await db.query(
-    "UPDATE profiles SET name = $1, bio = $2, profile_pic = $3, updated_at = NOW() WHERE id = $4 RETURNING *",
+    "UPDATE profiles SET name = $1, bio = $2, profile_pic = $3, updated_at = NOW() WHERE user_id = $4 RETURNING *",
     [name, bio, profile_pic, id]
   );
   if (result.rows.length === 0) {
@@ -22,7 +22,7 @@ const updateProfile = async (id, name, bio, profile_pic) => {
 
 const updateProfilePic = async (id, profile_pic) => {
   const result = await db.query(
-    "UPDATE profiles SET profile_pic = $1, updated_at = NOW() WHERE id = $2 RETURNING *",
+    "UPDATE profiles SET profile_pic = $1, updated_at = NOW() WHERE user_id = $2 RETURNING *",
     [profile_pic, id]
   );
   if (result.rows.length === 0) {
@@ -33,7 +33,7 @@ const updateProfilePic = async (id, profile_pic) => {
 
 const updateBio = async (id, bio) => {
   const result = await db.query(
-    "UPDATE profiles SET bio = $1, updated_at = NOW() WHERE id = $2  RETURNING *",
+    "UPDATE profiles SET bio = $1, updated_at = NOW() WHERE user_id = $2  RETURNING *",
     [bio, id]
   );
   if (result.rows.length === 0) {
@@ -44,7 +44,7 @@ const updateBio = async (id, bio) => {
 
 const updateName = async (id, name) => {
   const result = await db.query(
-    "UPDATE profiles SET name = $1, updated_at = NOW() WHERE id = $2 RETURNING *",
+    "UPDATE profiles SET name = $1, updated_at = NOW() WHERE user_id = $2 RETURNING *",
     [name, id]
   );
   if (result.rows.length === 0) {
@@ -59,7 +59,7 @@ const getProfiles = async () => {
 };
 
 const getProfileById = async (id) => {
-  const result = await db.query("SELECT * FROM profiles WHERE id = $1", [id]);
+  const result = await db.query("SELECT * FROM profiles WHERE user_id = $1", [id]);
   if (result.rows.length === 0) {
     throw new NotFoundError("Profile not found");
   }
diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index 3abf899..b183b85 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -2,12 +2,25 @@ 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 } from "react";
+import { useState, useEffect } from "react";
 
 const Profile = () => {
 
     const [editingBio, setEditingBio] = useState(false);
     const [bio, setBio] = useState(testData.bio)
+    const [ownData, setOwnData] = useState();
+
+    useEffect(() => {
+		const fetchProfile = async () => {
+			fetch("/api/profile/me")
+			.then((response) => response.json())
+			.then((data) => (setOwnData(data)))
+			.catch((error) => alert("Error fetching user list"))			
+		};
+		fetchProfile();
+	}, [])
+
+    console.log(ownData)
 
     const updateBio = (event) => {
         setBio(event.target.value)
@@ -18,7 +31,7 @@ const Profile = () => {
         console.log("Handling bio")
 
         if (editingBio === false)
-            return (<p className="m-3 text-lg">{bio}</p>)
+            return (<p className="m-3 text-lg">{ownData.bio}</p>)
         else
         {
             return (
@@ -48,7 +61,7 @@ const Profile = () => {
                                 className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]" />
                         <h1
                             className="w-full text-left my-4 sm:mx-4 xs:pl-4 text-gray-800 dark:text-white lg:text-4xl md:text-3xl sm:text-3xl xs:text-xl font-mono">
-                            {testData.username}</h1>
+                            {ownData.name}</h1>
                     </div>
                     <div className="xl:w-[80%] lg:w-[90%] md:w-[90%] sm:w-[92%] xs:w-[90%] mx-auto flex flex-col gap-4 items-center relative lg:-top-8 md:-top-6 sm:-top-4 xs:-top-4">
                         <div className="w-fit text-gray-700 dark:text-gray-400 text-md">{handleBio()}</div>

From d7b3c2e0bcd945afc18ce5f16c730a7aee0f3e52 Mon Sep 17 00:00:00 2001
From: Leonor Tu <jingyi.tu@outlook.com>
Date: Mon, 21 Oct 2024 15:10:10 +0300
Subject: [PATCH 09/13] Feat: add like and dislike functions in pokemon profile

---
 frontend/pokedex_app/src/pages/pokedex.jsx    |  3 +-
 .../pokedex_app/src/pages/pokemon_profile.jsx | 82 +++++++++++++++----
 2 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/frontend/pokedex_app/src/pages/pokedex.jsx b/frontend/pokedex_app/src/pages/pokedex.jsx
index 45d4788..fe85a89 100644
--- a/frontend/pokedex_app/src/pages/pokedex.jsx
+++ b/frontend/pokedex_app/src/pages/pokedex.jsx
@@ -200,7 +200,8 @@ const Shuffle = ({ isFetching, onShuffle }) => (
   <button
     onClick={onShuffle}
     disabled={isFetching}
-    className="inline-flex items-center justify-center space-x-1 bg-sky-400 hover:bg-sky-500 text-white font-medium text-sm py-1.5 px-3 rounded transition-colors duration-300"
+    className={`inline-flex items-center justify-center space-x-2 px-6 py-3 font-semibold text-white rounded-lg shadow-lg transition-all
+      ${isFetching ? 'bg-gray-500 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700'}`}
   >
     <RefreshCw size={14} className={isFetching ? "animate-spin" : ""} />
     <span>{isFetching ? "Loading..." : "Surprise Me!"}</span>
diff --git a/frontend/pokedex_app/src/pages/pokemon_profile.jsx b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
index 3ff79c6..2fa080f 100644
--- a/frontend/pokedex_app/src/pages/pokemon_profile.jsx
+++ b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
@@ -8,6 +8,8 @@ const PokemonProfile = () => {
 	const [pokemonInfo, setPokemonInfo] = useState(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState(null);
+	const [like, setLike] = useState(false);
+	const [dislike, setDislike] = useState(false);
 
 	useEffect(() => {
 	const fetchPokemonInfo = async () => {
@@ -31,6 +33,52 @@ const PokemonProfile = () => {
 	if (loading) return <div>Loading...</div>;
 	if (error) return <div>{error}</div>;
 
+	const handleLike = async () => {
+		if (!like) {
+			setLike(true);
+			setDislike(false);
+		try {
+			const response = await fetch(`/api/pokemon/liked`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json', // Define the content type
+				},
+				body: JSON.stringify({
+					pokemon_id: pokemonInfo.id,  // Send the appropriate data
+					pokemon_name: pokemonInfo.name,
+				}),
+			});
+		if (!response.ok) {
+			throw new Error('Failed to like Pokémon');
+			}
+		}catch(error){
+			console.error('Error in liking pokemons:', error);
+		}
+	}}
+
+	const handleDislike = async () => {
+		if (!dislike) {
+			setLike(false);
+			setDislike(true);
+		try {
+			const response = await fetch(`/api/pokemon/disliked`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json', // Define the content type
+				},
+				body: JSON.stringify({
+					pokemon_id: pokemonInfo.id,  // Send the appropriate data
+					pokemon_name: pokemonInfo.name,
+				}),
+			});
+		if (!response.ok) {
+			throw new Error('Failed to dislike Pokémon');
+			}
+		}catch(error){
+			console.error('Error in disliking pokemons:', error);
+		}
+	}}
+
 	return (
 		<div className="pokemon-details">
 			<h1 className="font-pokemon text-[#E03C31] text-6xl py-5 flex justify-evenly">{pokemonInfo.name }</h1>
@@ -42,19 +90,19 @@ const PokemonProfile = () => {
 			/>
 
 			<div className="info-section grid grid-cols-2 gap-4">
-  {/* Height */}
-  <p className="font-semibold">Height:</p>
-  <div className="flex items-baseline">
-    <span className="min-w-[25px]">{pokemonInfo.height * 10}</span>
-    <span className="ml-1">cm</span>
-  </div>
-
-  {/* Weight */}
-  <p className="font-semibold">Weight:</p>
-  <div className="flex items-baseline">
-    <span className="min-w-[25px]">{pokemonInfo.weight * 0.1}</span>
-    <span className="ml-1">kg</span>
-  </div>
+			{/* Height */}
+			<p className="font-semibold">Height:</p>
+			<div className="flex items-baseline">
+				<span className="min-w-[25px]">{pokemonInfo.height * 10}</span>
+				<span className="ml-1">cm</span>
+			</div>
+
+			{/* Weight */}
+			<p className="font-semibold">Weight:</p>
+			<div className="flex items-baseline">
+				<span className="min-w-[25px]">{pokemonInfo.weight * 0.1}</span>
+				<span className="ml-1">kg</span>
+			</div>
 
 			{/* Type */}
 			<p className="font-semibold">Type:</p>
@@ -84,12 +132,16 @@ const PokemonProfile = () => {
 			{/* Like and Dislike Buttons */}
 			<div className="flex flex-row items-center space-x-20">
 				{/* Like Button */}
-				<button className="flex items-center justify-center w-16 h-16 rounded-full bg-pink-400 text-white shadow-lg transition-transform transform hover:scale-105">
+				<button
+					onClick={handleLike}
+					className="flex items-center justify-center w-16 h-16 rounded-full bg-pink-400 text-white shadow-lg transition-transform transform hover:scale-105">
 					<HeartIcon className="w-8 h-8" />
 				</button>
 
 				{/* Dislike Button */}
-				<button className="flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white shadow-lg transition-transform transform hover:scale-105">
+				<button
+					onClick={handleDislike}
+					className="flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white shadow-lg transition-transform transform hover:scale-105">
 					<HandThumbDownIcon className="w-8 h-8" />
 				</button>
 			</div>

From d62db106de87657fcc6a9d4a659c56b4ac69f551 Mon Sep 17 00:00:00 2001
From: Szabina Korbai <skorbai@student.hive.fi>
Date: Mon, 21 Oct 2024 15:19:35 +0300
Subject: [PATCH 10/13] Rolled back on the users own profile page to a working
 version

---
 frontend/pokedex_app/src/pages/profile.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index b183b85..5e601f3 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -31,7 +31,7 @@ const Profile = () => {
         console.log("Handling bio")
 
         if (editingBio === false)
-            return (<p className="m-3 text-lg">{ownData.bio}</p>)
+            return (<p className="m-3 text-lg">{bio}</p>)
         else
         {
             return (
@@ -61,7 +61,7 @@ const Profile = () => {
                                 className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]" />
                         <h1
                             className="w-full text-left my-4 sm:mx-4 xs:pl-4 text-gray-800 dark:text-white lg:text-4xl md:text-3xl sm:text-3xl xs:text-xl font-mono">
-                            {ownData.name}</h1>
+                            {testData.name}</h1>
                     </div>
                     <div className="xl:w-[80%] lg:w-[90%] md:w-[90%] sm:w-[92%] xs:w-[90%] mx-auto flex flex-col gap-4 items-center relative lg:-top-8 md:-top-6 sm:-top-4 xs:-top-4">
                         <div className="w-fit text-gray-700 dark:text-gray-400 text-md">{handleBio()}</div>

From 887e1c90317bcca9050a847f1c932f989372122a Mon Sep 17 00:00:00 2001
From: Leonor Tu <jingyi.tu@outlook.com>
Date: Mon, 21 Oct 2024 16:13:33 +0300
Subject: [PATCH 11/13] Feat: added unlike and undislike functions and styled
 the buttons for different user's behaviors

---
 backend/models/pokemonModel.js                |  30 ++---
 .../pokedex_app/src/pages/pokemon_profile.jsx | 115 ++++++++++++------
 2 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/backend/models/pokemonModel.js b/backend/models/pokemonModel.js
index 9907581..88c8803 100644
--- a/backend/models/pokemonModel.js
+++ b/backend/models/pokemonModel.js
@@ -18,13 +18,13 @@ const insertLikedPokemon = async (user_id, pokemon_id) => {
     INSERT INTO user_pokemons (pokemon_id, user_id, relationship)
     VALUES ($1, $2, 'like')
     ON CONFLICT (pokemon_id, user_id)
-    DO UPDATE SET 
-      relationship = CASE 
-        WHEN user_pokemons.relationship = 'dislike' THEN 'like' 
-        ELSE user_pokemons.relationship 
+    DO UPDATE SET
+      relationship = CASE
+        WHEN user_pokemons.relationship = 'dislike' THEN 'like'
+        ELSE user_pokemons.relationship
       END
     RETURNING user_id, pokemon_id`;
-    
+
   const values = [pokemon_id, user_id];
   const result = await db.query(text, values);
   return result;
@@ -36,10 +36,10 @@ const insertDislikedPokemon = async (user_id, pokemon_id) => {
   INSERT INTO user_pokemons (pokemon_id, user_id, relationship)
   VALUES ($1, $2, 'dislike')
   ON CONFLICT (pokemon_id, user_id)
-  DO UPDATE SET 
-    relationship = CASE 
-      WHEN user_pokemons.relationship = 'like' THEN 'dislike' 
-      ELSE user_pokemons.relationship 
+  DO UPDATE SET
+    relationship = CASE
+      WHEN user_pokemons.relationship = 'like' THEN 'dislike'
+      ELSE user_pokemons.relationship
     END
   RETURNING user_id, pokemon_id`;
   const values = [pokemon_id, user_id];
@@ -50,9 +50,6 @@ const insertDislikedPokemon = async (user_id, pokemon_id) => {
 const likedPokemon = async (user_id, pokemon_id, name) => {
   await insertPokemon(pokemon_id, name);
   const result = await insertLikedPokemon(user_id, pokemon_id);
-  if (result.rows.length === 0) {
-    throw new ValidationError("Pokemon already liked");
-  }
   return result.rows[0];
 };
 
@@ -61,18 +58,12 @@ const unlikePokemon = async (user_id, pokemon_id) => {
     "DELETE FROM user_pokemons WHERE user_id = $1 AND pokemon_id = $2 AND relationship = 'like' RETURNING user_id, pokemon_id";
   const values = [user_id, pokemon_id];
   const result = await db.query(text, values);
-  if (result.rows.length === 0) {
-    throw new ValidationError("Pokemon already unliked");
-  }
   return result.rows[0];
 };
 
 const dislikedPokemon = async (user_id, pokemon_id, name) => {
   await insertPokemon(pokemon_id, name);
   const result = await insertDislikedPokemon(user_id, pokemon_id);
-  if (result.rows.length === 0) {
-    throw new ValidationError("Pokemon already disliked");
-  }
   return result.rows[0];
 };
 
@@ -81,9 +72,6 @@ const undislikePokemon = async (user_id, pokemon_id) => {
     "DELETE FROM user_pokemons WHERE user_id = $1 AND pokemon_id = $2 AND relationship = 'dislike' RETURNING user_id, pokemon_id";
   const values = [user_id, pokemon_id];
   const result = await db.query(text, values);
-  if (result.rows.length === 0) {
-    throw new ValidationError("Pokemon already undisliked");
-  }
   return result.rows[0];
 };
 
diff --git a/frontend/pokedex_app/src/pages/pokemon_profile.jsx b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
index 2fa080f..a7052eb 100644
--- a/frontend/pokedex_app/src/pages/pokemon_profile.jsx
+++ b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
@@ -34,33 +34,62 @@ const PokemonProfile = () => {
 	if (error) return <div>{error}</div>;
 
 	const handleLike = async () => {
-		if (!like) {
-			setLike(true);
-			setDislike(false);
 		try {
-			const response = await fetch(`/api/pokemon/liked`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json', // Define the content type
-				},
-				body: JSON.stringify({
-					pokemon_id: pokemonInfo.id,  // Send the appropriate data
-					pokemon_name: pokemonInfo.name,
-				}),
-			});
-		if (!response.ok) {
-			throw new Error('Failed to like Pokémon');
+			if (like) {
+				// If already liked, unlike the Pokémon
+				const unlikeResponse = await fetch(`/api/pokemon/unlike/${pokemonInfo.id}`, {
+				  method: 'DELETE',
+				});
+				if (!unlikeResponse.ok) {
+				  throw new Error('Failed to unlike Pokémon');
+				}
+				setLike(false);  // Update state to reflect unliking
+			  } else {
+				setLike(true);
+				setDislike(false);
+				const response = await fetch(`/api/pokemon/liked`, {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json', // Define the content type
+					},
+					body: JSON.stringify({
+						pokemon_id: pokemonInfo.id,  // Send the appropriate data
+						pokemon_name: pokemonInfo.name,
+					}),
+				});
+				if (!response.ok) {
+					throw new Error('Failed to like Pokémon');
+					}
+
+				if (dislike) {
+					const undislikeResponse = await fetch(`/api/pokemon/undislike/${pokemonInfo.id}`, {
+						method: 'DELETE',
+				});
+				if (!undislikeResponse.ok) {
+					throw new Error('Failed to undislike Pokémon');
+				}
+				setDislike(false);
+				}
 			}
-		}catch(error){
+		} catch(error){
 			console.error('Error in liking pokemons:', error);
 		}
-	}}
+	}
 
 	const handleDislike = async () => {
-		if (!dislike) {
-			setLike(false);
-			setDislike(true);
 		try {
+			if (dislike) {
+				// If already disliked, undis    like the Pokémon
+				const undislikeResponse = await fetch(`/api/pokemon/undislike/${pokemonInfo.id}`, {
+				  method: 'DELETE',
+				});
+				if (!undislikeResponse.ok) {
+				  throw new Error('Failed to undislike Pokémon');
+				}
+				setDislike(false);  // Update state to reflect unliking
+			  } else {
+				setLike(false);
+				setDislike(true);
 			const response = await fetch(`/api/pokemon/disliked`, {
 				method: 'POST',
 				headers: {
@@ -71,13 +100,24 @@ const PokemonProfile = () => {
 					pokemon_name: pokemonInfo.name,
 				}),
 			});
-		if (!response.ok) {
-			throw new Error('Failed to dislike Pokémon');
+			if (!response.ok) {
+				throw new Error('Failed to dislike Pokémon');
+				}
+
+			if (like) {
+				const undislikeResponse = await fetch(`/api/pokemon/unlike/${pokemonInfo.id}`, {
+					method: 'DELETE',
+			});
+			if (!undislikeResponse.ok) {
+				throw new Error('Failed to unlike Pokémon');
 			}
+			setLike(false);
+			}
+		}
 		}catch(error){
 			console.error('Error in disliking pokemons:', error);
 		}
-	}}
+	}
 
 	return (
 		<div className="pokemon-details">
@@ -131,20 +171,23 @@ const PokemonProfile = () => {
 
 			{/* Like and Dislike Buttons */}
 			<div className="flex flex-row items-center space-x-20">
-				{/* Like Button */}
-				<button
-					onClick={handleLike}
-					className="flex items-center justify-center w-16 h-16 rounded-full bg-pink-400 text-white shadow-lg transition-transform transform hover:scale-105">
-					<HeartIcon className="w-8 h-8" />
-				</button>
-
-				{/* Dislike Button */}
-				<button
-					onClick={handleDislike}
-					className="flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white shadow-lg transition-transform transform hover:scale-105">
-					<HandThumbDownIcon className="w-8 h-8" />
-				</button>
+			{/* Like Button */}
+			<button
+				className={`flex items-center justify-center w-16 h-16 rounded-full ${like ? 'bg-pink-500' : 'bg-gray-400'} text-white shadow-lg transition-transform transform hover:scale-105`}
+				onClick={handleLike}
+			>
+				<HeartIcon className="w-8 h-8" />
+			</button>
+
+			{/* Dislike Button */}
+			<button
+				className={`flex items-center justify-center w-16 h-16 rounded-full ${dislike ? 'bg-red-600' : 'bg-gray-400'} text-white shadow-lg transition-transform transform hover:scale-105`}
+				onClick={handleDislike}
+			>
+				<HandThumbDownIcon className="w-8 h-8" />
+			</button>
 			</div>
+
 		</div>
 		/* Add more fields as needed */
 	);

From 2b5f1d67d652a0a86e55f47839946fb8cc05d047 Mon Sep 17 00:00:00 2001
From: Leonor Tu <jingyi.tu@outlook.com>
Date: Mon, 21 Oct 2024 16:17:02 +0300
Subject: [PATCH 12/13] Fix: fixed weight and height to two decimal places

---
 frontend/pokedex_app/src/pages/pokemon_profile.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pokedex_app/src/pages/pokemon_profile.jsx b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
index a7052eb..029582f 100644
--- a/frontend/pokedex_app/src/pages/pokemon_profile.jsx
+++ b/frontend/pokedex_app/src/pages/pokemon_profile.jsx
@@ -133,14 +133,14 @@ const PokemonProfile = () => {
 			{/* Height */}
 			<p className="font-semibold">Height:</p>
 			<div className="flex items-baseline">
-				<span className="min-w-[25px]">{pokemonInfo.height * 10}</span>
+				<span className="min-w-[25px]">{(pokemonInfo.height * 10).toFixed(2)}</span>
 				<span className="ml-1">cm</span>
 			</div>
 
 			{/* Weight */}
 			<p className="font-semibold">Weight:</p>
 			<div className="flex items-baseline">
-				<span className="min-w-[25px]">{pokemonInfo.weight * 0.1}</span>
+				<span className="min-w-[25px]">{(pokemonInfo.weight * 0.1).toFixed(2)}</span>
 				<span className="ml-1">kg</span>
 			</div>
 

From f9316ccb7d23a4564ccca264fc40291eb13ad91a Mon Sep 17 00:00:00 2001
From: Janrau Beray <janraup356@gmail.com>
Date: Tue, 22 Oct 2024 14:27:11 +0300
Subject: [PATCH 13/13] profile pic saving,holy loader, need to move profile
 pic to url in sessions

---
 backend/controllers/profileController.js      |   3 +-
 backend/controllers/userController.js         |  26 +-
 backend/models/userModel.js                   |   2 +-
 backend/routes/profileRoutes.js               |   2 +-
 backend/routes/userRoutes.js                  |   3 +
 backend/services/profileService.js            |  46 ++-
 frontend/pokedex_app/package-lock.json        |  10 +
 frontend/pokedex_app/package.json             |   1 +
 frontend/pokedex_app/src/App.jsx              |  10 +-
 frontend/pokedex_app/src/AuthContext.jsx      |   7 +
 .../pokedex_app/src/assets/no_profile_pic.jpg | Bin 0 -> 6506 bytes
 .../pokedex_app/src/components/Community.jsx  | 252 +++++++--------
 frontend/pokedex_app/src/pages/profile.jsx    | 289 +++++++++++++-----
 13 files changed, 419 insertions(+), 232 deletions(-)
 create mode 100644 frontend/pokedex_app/src/assets/no_profile_pic.jpg

diff --git a/backend/controllers/profileController.js b/backend/controllers/profileController.js
index 0ccc4f5..a70dc24 100644
--- a/backend/controllers/profileController.js
+++ b/backend/controllers/profileController.js
@@ -38,7 +38,8 @@ const updateProfile = async (req, res, next) => {
 const updateProfilePic = async (req, res, next) => {
   try {
     const { id } = req.session.user;
-    const { profile_pic } = req.body;
+    // const { profile_pic } = req.body;
+    const profile_pic = req.file.buffer;
     const profile = await profileService.updateProfilePic({
       id,
       profile_pic,
diff --git a/backend/controllers/userController.js b/backend/controllers/userController.js
index d9c6a5a..5ac8360 100644
--- a/backend/controllers/userController.js
+++ b/backend/controllers/userController.js
@@ -1,6 +1,6 @@
 const userService = require('../services/userService');
 
-const getLikedPokemonsByUserId = async (req, res, next) => {
+const getLikedPokemonsByUser = async (req, res, next) => {
   try {
     const { id } = req.session.user;
     const pokemons = await userService.getLikedPokemonsByUserId(id);
@@ -10,7 +10,7 @@ const getLikedPokemonsByUserId = async (req, res, next) => {
   }
 }
 
-const getDislikedPokemonsByUserId = async (req, res, next) => {
+const getDislikedPokemonsByUser = async (req, res, next) => {
   try {
     const { id } = req.session.user;
     const pokemons = await userService.getDislikedPokemonsByUserId(id);
@@ -20,6 +20,26 @@ const getDislikedPokemonsByUserId = async (req, res, next) => {
   }
 }
 
+const getLikedPokemonsByUserId = async (req, res, next) => {
+  try {
+    const { user_id } = req.params
+    const pokemons = await userService.getLikedPokemonsByUserId(user_id);
+    res.status(200).json(pokemons);
+  } catch (error) {
+    next(error);
+  }
+}
+
+const getDislikedPokemonsByUserId = async (req, res, next) => {
+  try {
+    const { user_id } = req.params;
+    const pokemons = await userService.getDislikedPokemonsByUserId(user_id);
+    res.status(200).json(pokemons);
+  } catch (error) {
+    next(error);
+  }
+}
+
 const searchUsers = async (req, res, next) => {
   try {
     const { username } = req.query;
@@ -31,6 +51,8 @@ const searchUsers = async (req, res, next) => {
 }
 
 module.exports = {
+  getLikedPokemonsByUser,
+  getDislikedPokemonsByUser,
   getLikedPokemonsByUserId,
   getDislikedPokemonsByUserId,
   searchUsers,
diff --git a/backend/models/userModel.js b/backend/models/userModel.js
index 36ab026..956be83 100644
--- a/backend/models/userModel.js
+++ b/backend/models/userModel.js
@@ -44,7 +44,7 @@ const getDislikedPokemonsByUserId = async (userId) => {
   if (result.rows.length === 0) {
     throw new NotFoundError("User not found");
   }
-  return result.rows; // Return the array of disliked Pokémon
+  return result.rows[0]; // Return the array of disliked Pokémon
 }
 
 const searchUsers = async (query) => {
diff --git a/backend/routes/profileRoutes.js b/backend/routes/profileRoutes.js
index 24af092..2da13c2 100644
--- a/backend/routes/profileRoutes.js
+++ b/backend/routes/profileRoutes.js
@@ -14,7 +14,7 @@ router.get("/:id", isAuthenticated, profileController.getProfileById);
   profileController.createProfile
 ); */
 router.put("/me/update", isAuthenticated, profileController.updateProfile);
-router.patch(
+router.post(
   "/me/update/profile_pic",
   upload.single("profile_pic"),
   profileController.updateProfilePic
diff --git a/backend/routes/userRoutes.js b/backend/routes/userRoutes.js
index b357b1e..d74befc 100644
--- a/backend/routes/userRoutes.js
+++ b/backend/routes/userRoutes.js
@@ -13,6 +13,9 @@ router.get(
   isAuthenticated,
   userController.getDislikedPokemonsByUserId
 );
+
+router.get("/:user_id/liked_pokemons", isAuthenticated, userController.getLikedPokemonsByUserId);
+router.get("/:user_id/disliked_pokemons", isAuthenticated, userController.getDislikedPokemonsByUserId);
 router.get("/search", isAuthenticated, userController.searchUsers);
 
 module.exports = router;
diff --git a/backend/services/profileService.js b/backend/services/profileService.js
index 4a00f00..6a32a94 100644
--- a/backend/services/profileService.js
+++ b/backend/services/profileService.js
@@ -1,9 +1,9 @@
 const userModel = require("../models/profileModel");
 
-const fs = require('fs');
+const fs = require("fs");
 
 // Read the default profile picture file
-const defaultProfilePic = fs.readFileSync('./database/profile_pic.png');
+const defaultProfilePic = fs.readFileSync("./database/profile_pic.png");
 
 // Convert it to a binary format
 const defaultProfilePicBinary = Buffer.from(defaultProfilePic);
@@ -12,8 +12,15 @@ const createProfile = async ({ user_id, name, bio }) => {
   try {
     console.log("creating profile");
     console.log(user_id, name, bio, defaultProfilePicBinary);
-    const profile = await userModel.createProfile(user_id, name, bio, defaultProfilePicBinary);
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
+    const profile = await userModel.createProfile(
+      user_id,
+      name,
+      bio,
+      defaultProfilePicBinary
+    );
+    const base64Image = profile.profile_pic
+      ? profile.profile_pic.toString("base64")
+      : null;
     profile.profile_pic = base64Image;
     console.log("creating profile successful:", profile);
     return profile;
@@ -28,11 +35,12 @@ const updateProfile = async ({ id, name, bio, profile_pic }) => {
     console.log("updating profile");
     console.log(id, name, bio, profile_pic);
     const profile = await userModel.updateProfile(id, name, bio, profile_pic);
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
+    const base64Image = profile.profile_pic
+      ? profile.profile_pic.toString("base64")
+      : null;
     profile.profile_pic = base64Image;
     console.log("updating profile successful:", profile);
     return profile;
-
   } catch (error) {
     console.log("error updating profile:", error.message);
     throw error;
@@ -44,7 +52,9 @@ const updateProfilePic = async ({ id, profile_pic }) => {
     console.log("updating profile pic");
     console.log(id, profile_pic);
     const profile = await userModel.updateProfilePic(id, profile_pic);
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
+    const base64Image = profile.profile_pic
+      ? profile.profile_pic.toString("base64")
+      : null;
     profile.profile_pic = base64Image;
     console.log("updating profile pic successful:", profile);
     return profile;
@@ -85,7 +95,9 @@ const getProfileById = async (id) => {
     console.log("fetching profile");
     console.log(id);
     const profile = await userModel.getProfileById(id);
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
+    const base64Image = profile.profile_pic
+      ? profile.profile_pic.toString("base64")
+      : null;
     profile.profile_pic = base64Image;
     console.log("fetching profile successful:", profile);
     return profile;
@@ -99,8 +111,12 @@ const getProfiles = async () => {
   try {
     console.log("fetching profiles");
     const profiles = await userModel.getProfiles();
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
-    profile.profile_pic = base64Image;
+    profiles.map((profile) => {
+      const base64Image = profile.profile_pic
+        ? profile.profile_pic.toString("base64")
+        : null;
+      profile.profile_pic = base64Image;
+    });
     console.log("fetching profiles successful:", profiles);
     return profiles;
   } catch (error) {
@@ -113,16 +129,18 @@ const searchProfiles = async (name) => {
   try {
     console.log("searching profiles");
     console.log(name);
-    const profiles = await userModel.searchProfiles(name);
-    const base64Image = profile.profile_pic ? profile.profile_pic.toString('base64') : null;
+    const profile = await userModel.searchProfiles(name);
+    const base64Image = profile.profile_pic
+      ? profile.profile_pic.toString("base64")
+      : null;
     profile.profile_pic = base64Image;
-    console.log("searching profiles successful:", profiles);
+    console.log("searching profiles successful:", profile);
     return profiles;
   } catch (error) {
     console.log("error searching profiles:", error.message);
     throw error;
   }
-}
+};
 
 module.exports = {
   createProfile,
diff --git a/frontend/pokedex_app/package-lock.json b/frontend/pokedex_app/package-lock.json
index dd3157a..6e058a6 100644
--- a/frontend/pokedex_app/package-lock.json
+++ b/frontend/pokedex_app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@heroicons/react": "^2.1.5",
+        "holy-loader": "^2.3.8",
         "lucide-react": "^0.453.0",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -3179,6 +3180,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/holy-loader": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/holy-loader/-/holy-loader-2.3.8.tgz",
+      "integrity": "sha512-EhdAbXSuZtEc5z0Ta1PAgJXr0t/9lfOWt8tl4fjObGl7ObYLESL4218VHR/zPcE+ibyALnUf9JgAIeEDyqKCDw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
diff --git a/frontend/pokedex_app/package.json b/frontend/pokedex_app/package.json
index d8417d7..3495078 100644
--- a/frontend/pokedex_app/package.json
+++ b/frontend/pokedex_app/package.json
@@ -12,6 +12,7 @@
   "proxy": "http://localhost:3000",
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "holy-loader": "^2.3.8",
     "lucide-react": "^0.453.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
diff --git a/frontend/pokedex_app/src/App.jsx b/frontend/pokedex_app/src/App.jsx
index 543433b..3eb63a2 100644
--- a/frontend/pokedex_app/src/App.jsx
+++ b/frontend/pokedex_app/src/App.jsx
@@ -16,8 +16,8 @@ import Community from "./components/Community";
 
 function App() {
   return (
-    <AuthProvider>
-      <Router>
+    <Router>
+      <AuthProvider>
         <div id="root">
           <Navbar />
           <main>
@@ -36,13 +36,13 @@ function App() {
               <Route path="/pokemon/:name" element={<PokemonProfile />} />
               <Route path="/privacy-policy" element={<PrivacyPolicy />} />
               <Route path="/terms" element={<TermsOfService />} />
-              <Route path="/Community" element={<Community/>}/>
+              <Route path="/Community" element={<Community />} />
             </Routes>
           </main>
           <Footer />
         </div>
-      </Router>
-    </AuthProvider>
+      </AuthProvider>
+    </Router>
   );
 }
 
diff --git a/frontend/pokedex_app/src/AuthContext.jsx b/frontend/pokedex_app/src/AuthContext.jsx
index 8c13b24..818794a 100644
--- a/frontend/pokedex_app/src/AuthContext.jsx
+++ b/frontend/pokedex_app/src/AuthContext.jsx
@@ -1,4 +1,6 @@
 import { createContext, useState, useEffect } from "react";
+import { useNavigate } from 'react-router-dom';
+import HolyLoader from "holy-loader";
 
 // Create Context
 const AuthContext = createContext();
@@ -8,6 +10,7 @@ export const AuthProvider = ({ children }) => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [user, setUser] = useState(null); // To hold user details
   const [loading, setLoading] = useState(true); // New loading state
+  const navigate = useNavigate(); 
 
   useEffect(() => {
     const checkLoginStatus = async () => {
@@ -37,15 +40,19 @@ export const AuthProvider = ({ children }) => {
   }, []);
 
   const logout = async () => {
+    setLoading(true);
     await fetch("/api/logout", { method: "POST", credentials: "include" });
     setIsAuthenticated(false);
     setUser(null);
+    setLoading(false);
+    navigate("/login");
   };
 
   return (
     <AuthContext.Provider
       value={{ isAuthenticated, setIsAuthenticated, logout, user, setUser, loading }}
     >
+      {loading && <HolyLoader />} {/* Render the loader when loading */}
       {children}
     </AuthContext.Provider>
   );
diff --git a/frontend/pokedex_app/src/assets/no_profile_pic.jpg b/frontend/pokedex_app/src/assets/no_profile_pic.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7135a3323a78783d1320d1f77422d5b873baff61
GIT binary patch
literal 6506
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

literal 0
HcmV?d00001

diff --git a/frontend/pokedex_app/src/components/Community.jsx b/frontend/pokedex_app/src/components/Community.jsx
index 72710d6..62281f7 100644
--- a/frontend/pokedex_app/src/components/Community.jsx
+++ b/frontend/pokedex_app/src/components/Community.jsx
@@ -1,130 +1,130 @@
 import React from "react";
-import testProfiles from '../assets/community_placeholder.json';
+import testProfiles from "../assets/community_placeholder.json";
 import { useState, useEffect } from "react";
 
 const Community = () => {
-
-	const [userList, setUserList] = useState([]);
-	const [loading, setLoading] = useState(false);
-	const [usersPerPage, setUsersPerPage] = useState(8);
-	const [searchQuery, setSearchQuery] = useState("");
-
-	let totalPages;
-
-	if (userList.length <= usersPerPage)
-	{
-		totalPages = 1;
-	}
-	else
-	{
-		totalPages = Math.floor(userList.length / usersPerPage)
-	}
-
-	const [currentPage, setCurrentPage] = useState(totalPages);
-
-	useEffect(() => {
-		const fetchUsers = async () => {
-			setLoading(true);
-			fetch("/api/profile")
-			.then((response) => response.json())
-			.then((data) => (setUserList(data)))
-			.then(setLoading(false))
-			.catch((error) => alert("Error fetching user list"))			
-		};
-		fetchUsers();
-	}, [])
-
-	const UsersOverview = ({loading, users, usersPerPage, currentPage}) => {
-
-		let shownUsersStart;
-	
-		if (currentPage == 1)
-		{
-			shownUsersStart = 0
-		}
-		else
-		{
-			shownUsersStart = (currentPage - 1) * usersPerPage
-		}
-
-		let shownUsersEnd = (currentPage * usersPerPage)
-
-
-		const  currentPageUsers = users.slice(shownUsersStart, shownUsersEnd)
-
-		if (loading === true)
-		{
-			return (<h2 className="text-7xl text-center font-pokemon">Loading...</h2>)
-		}
-		return (
-			<ul className="grid grid-cols-4">
-				{currentPageUsers.map((user => (
-					<li className="p-5 text-center text-3xl" key={user.name}>{user.name}<br/><br/> <img src={user.profile_pic}/> </li>
-				)))
-				}
-			</ul>
-		)
-	}
-
-	const handleSearch = () => {
-		
-	}
-
-	const SearchUser = () => {
-		
-		return (
-			<div className="flex justify-center">
-				<h2 className="mx-4 font-mono text-rose-950">Search users by name: </h2>
-				<input className="bg-rose-200 content-center" type="text"></input>
-			</div>
-		)
-	}
-
-
-	const Pagination = ({usersPerPage, length, currentPage}) => {
-
-		const paginationNumbers = [];
-
-		for (let i = 1; i <= Math.ceil(length / usersPerPage); i++)
-		{
-			paginationNumbers.push(i);
-		}
-
-		const handlePagination = ({pageNumber}) => {
-
-			setCurrentPage(pageNumber)
-		}
-
-		return (
-			<div className='text-4xl items-center flex justify-center m-10'>
-
-      			{paginationNumbers.map(pageNumber => (
-
-        			<button key={pageNumber} className={
-						currentPage === pageNumber ? "text-rose-700 border-pink-950 border-2 p-2 m-3 rounded-lg bg-rose-300" : "text-rose-400 border-pink-950 border-2 p-2 m-2 rounded-md bg-rose-100"
-					} onClick={() => handlePagination({pageNumber})}>{pageNumber}</button>
-
-      			))}
-
-    		</div>
-
- 		 );
-	}
-
-	
-
-	return (
-		<main>
-			<section>
-				<h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">Our community</h1>
-				<SearchUser/>
-				<div className="">
-					<UsersOverview loading={loading} users={userList} usersPerPage={usersPerPage} currentPage={currentPage}/>
-				</div>
-				<Pagination currentPage={currentPage} length={userList.length} usersPerPage={usersPerPage}/>
-			</section>
-		</main>
-	)
-}
-
-export default Community;
\ No newline at end of file
+  const [userList, setUserList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [usersPerPage, setUsersPerPage] = useState(8);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  let totalPages;
+
+  if (userList.length <= usersPerPage) {
+    totalPages = 1;
+  } else {
+    totalPages = Math.floor(userList.length / usersPerPage);
+  }
+
+  const [currentPage, setCurrentPage] = useState(totalPages);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      setLoading(true);
+      fetch("/api/profile/")
+        .then((response) => response.json())
+        .then((data) => setUserList(data))
+        .then(setLoading(false))
+        .catch((error) => alert("Error fetching user list"));
+    };
+    fetchUsers();
+  }, []);
+
+  const UsersOverview = ({ loading, users, usersPerPage, currentPage }) => {
+    let shownUsersStart;
+
+    if (currentPage == 1) {
+      shownUsersStart = 0;
+    } else {
+      shownUsersStart = (currentPage - 1) * usersPerPage;
+    }
+
+    let shownUsersEnd = currentPage * usersPerPage;
+
+    console.log("Users: ", users);
+
+    const currentPageUsers = users.slice(shownUsersStart, shownUsersEnd);
+
+    if (loading === true) {
+      return <h2 className="text-7xl text-center font-pokemon">Loading...</h2>;
+    }
+    return (
+      <ul className="grid grid-cols-4">
+        {currentPageUsers.map((user) => (
+          <li className="p-5 text-center text-3xl" key={user.name}>
+            {user.name}
+            <br />
+            <br /> <img src={user.profile_pic} />{" "}
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const handleSearch = () => {};
+
+  const SearchUser = () => {
+    return (
+      <div className="flex justify-center">
+        <h2 className="mx-4 font-mono text-rose-950">Search users by name: </h2>
+        <input className="bg-rose-200 content-center" type="text"></input>
+      </div>
+    );
+  };
+
+  const Pagination = ({ usersPerPage, length, currentPage }) => {
+    const paginationNumbers = [];
+
+    for (let i = 1; i <= Math.ceil(length / usersPerPage); i++) {
+      paginationNumbers.push(i);
+    }
+
+    const handlePagination = ({ pageNumber }) => {
+      setCurrentPage(pageNumber);
+    };
+
+    return (
+      <div className="text-4xl items-center flex justify-center m-10">
+        {paginationNumbers.map((pageNumber) => (
+          <button
+            key={pageNumber}
+            className={
+              currentPage === pageNumber
+                ? "text-rose-700 border-pink-950 border-2 p-2 m-3 rounded-lg bg-rose-300"
+                : "text-rose-400 border-pink-950 border-2 p-2 m-2 rounded-md bg-rose-100"
+            }
+            onClick={() => handlePagination({ pageNumber })}
+          >
+            {pageNumber}
+          </button>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <main>
+      <section>
+        <h1 className="text-rose-900 font-pokemon text-center text-7xl my-10">
+          Our community
+        </h1>
+        <SearchUser />
+        <div className="">
+          <UsersOverview
+            loading={loading}
+            users={userList}
+            usersPerPage={usersPerPage}
+            currentPage={currentPage}
+          />
+        </div>
+        <Pagination
+          currentPage={currentPage}
+          length={userList.length}
+          usersPerPage={usersPerPage}
+        />
+      </section>
+    </main>
+  );
+};
+
+export default Community;
diff --git a/frontend/pokedex_app/src/pages/profile.jsx b/frontend/pokedex_app/src/pages/profile.jsx
index aef52da..9cb8bc5 100644
--- a/frontend/pokedex_app/src/pages/profile.jsx
+++ b/frontend/pokedex_app/src/pages/profile.jsx
@@ -1,98 +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 [ownData, setOwnData] = useState();
-
-    useEffect(() => {
-		const fetchProfile = async () => {
-			fetch("/api/profile/me")
-			.then((response) => response.json())
-			.then((data) => (setOwnData(data)))
-			.catch((error) => alert("Error fetching user list"))			
-		};
-		fetchProfile();
-	}, [])
-
-    console.log(ownData)
-
-    const { isAuthenticated , user, loading} = useContext(AuthContext);
-    const navigate = useNavigate();
-
-    console.log("isAuthenticated:", isAuthenticated);
-    useEffect(() => {
-        if (!isAuthenticated && !loading) {
-          navigate('/login');  // Redirect to login if not authenticated
-        }
-      }, [isAuthenticated, navigate]);
+  const { isAuthenticated, user, loading } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const fileInputRef = useRef();
 
-    const updateBio = (event) => {
-        setBio(event.target.value)
-    }
+  const handleSubmit = async (event) => {
+    event.preventDefault(); // Prevent the default form submission
 
-    const handleBio = () => {
+    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);
 
-        console.log("Handling bio")
+      try {
+        const response = await fetch("/api/profile/me/update/profile_pic", {
+          method: "POST",
+          body: formData,
+        });
 
-        if (editingBio === false)
-            return (<p className="m-3 text-lg">{bio}</p>)
-        else
-        {
-            return (
-                <section className="text-lg">
-                    <textarea spellCheck="true" name="new_bio" onChange={updateBio} className="bg-gray-300 resize" cols={60} defaultValue={bio} maxLength={250} rows={2} type="text"/>
-                </section>
-            )
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
         }
+
+        // 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 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"));
+  };
 
-    const handleBioEditing = (event) => {
-        setEditingBio(true);
+  console.log("isAuthenticated:", isAuthenticated);
+  useEffect(() => {
+    if (!isAuthenticated && !loading) {
+      navigate("/login"); // Redirect to login if not authenticated
+    } else {
+      fetchProfile();
     }
+  }, [isAuthenticated, navigate, loading]);
+
+  //   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 <p className="m-3 text-lg">{ownData.bio}</p>;
+    else {
+      return (
+        <section className="text-lg">
+          <textarea
+            spellCheck="true"
+            name="new_bio"
+            onChange={updateBio}
+            className="bg-gray-300 resize"
+            cols={60}
+            defaultValue={ownData.bio}
+            maxLength={250}
+            rows={2}
+            type="text"
+          />
+        </section>
+      );
     }
+  };
+
+  const RenderProfilePic = () => {
+    console.log("rendering profile pic");
+    return (
+      <img
+        src={defaultProfilePic}
+        alt="User Profile"
+        className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]"
+      />
+    );
+   /*  if (ownData.profile_pic === null) {
+      return (
+        <img
+          src={defaultProfilePic}
+          alt="User Profile"
+          className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]"
+        />
+      );
+    } else {
+      return (
+        <img
+          src={ownData.profile_pic}
+          alt="User Profile"
+          className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]"
+        />
+      );
+    } */
+  };
+
+  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 (
+    <main>
+      <section className="w-full overflow-hidden dark:bg-gray-900">
+        <div className="flex flex-col">
+          <img
+            src={background}
+            alt="pokemon in the background"
+            className="w-full xl:h-[36rem] lg:h-[32rem] md:h-[28rem] sm:h-[24rem] xs:h-[20rem]"
+          />
+          <div className="sm:w-[80%] xs:w-[90%] mx-auto flex">
+            <RenderProfilePic />
+            <h1 className="w-full text-left my-4 sm:mx-4 xs:pl-4 text-gray-800 dark:text-white lg:text-4xl md:text-3xl sm:text-3xl xs:text-xl font-mono">
+              {ownData.name}
+            </h1>
+          </div>
+          <div className="xl:w-[80%] lg:w-[90%] md:w-[90%] sm:w-[92%] xs:w-[90%] mx-auto flex flex-col gap-4 items-center relative lg:-top-8 md:-top-6 sm:-top-4 xs:-top-4">
+            <div className="w-fit text-gray-700 dark:text-gray-400 text-md">
+              {handleBio()}
+            </div>
+            <div className="w-full my-auto py-6 flex flex-col justify-center gap-2">
+              <div className="w-full flex sm:flex-row xs:flex-col gap-2 justify-center">
+                <form onSubmit={handleSubmit} encType="multipart/form-data">
+                  <input
+                    className="text-white"
+                    type="file"
+                    name="profile_pic"
+                    accept=".jpg, .png, .gif"
+                    ref={fileInputRef}
+                    required
+                  />
+                  <button
+                    type="submit"
+                    className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded"
+                  >
+                    Upload new picture
+                  </button>
+                </form>
+
+                <button
+                  type="button"
+                  onClick={handleBioSaving}
+                  className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded"
+                >
+                  Save bio changes
+                </button>
+                <button
+                  type="button"
+                  onClick={handleBioEditing}
+                  className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded"
+                >
+                  Edit bio
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <h1 className="mb-10 font-bold w-full max-w-md m-auto rounded-lg opacity-90 border-8  bg-slate-800 text-center text-5xl font-pokemon py-6 text-white border-pink-950">
+          Pokemon that I like:
+        </h1>
+        <UserLikedPokemon likedPokemon={testData.liked_pokemons} />
+      </section>
+    </main>
+  );
+};
 
-	return (
-        <main>
-            <section className="w-full overflow-hidden dark:bg-gray-900">
-                <div className="flex flex-col">
-                    <img src={background} alt="pokemon in the background" className="w-full xl:h-[36rem] lg:h-[32rem] md:h-[28rem] sm:h-[24rem] xs:h-[20rem]"/>
-                    <div className="sm:w-[80%] xs:w-[90%] mx-auto flex">
-                        <img src={testData.profile_pic} alt="User Profile"
-                                className="rounded-md lg:w-[12rem] lg:h-[12rem] md:w-[10rem] md:h-[10rem] sm:w-[8rem] sm:h-[8rem] xs:w-[7rem] xs:h-[7rem] outline outline-2 outline-offset-2 outline-rose-900 relative lg:bottom-[5rem] sm:bottom-[4rem] xs:bottom-[3rem]" />
-                        <h1
-                            className="w-full text-left my-4 sm:mx-4 xs:pl-4 text-gray-800 dark:text-white lg:text-4xl md:text-3xl sm:text-3xl xs:text-xl font-mono">
-                            {testData.name}</h1>
-                    </div>
-                    <div className="xl:w-[80%] lg:w-[90%] md:w-[90%] sm:w-[92%] xs:w-[90%] mx-auto flex flex-col gap-4 items-center relative lg:-top-8 md:-top-6 sm:-top-4 xs:-top-4">
-                        <div className="w-fit text-gray-700 dark:text-gray-400 text-md">{handleBio()}</div>
-                        <div className="w-full my-auto py-6 flex flex-col justify-center gap-2">
-                            <div className="w-full flex sm:flex-row xs:flex-col gap-2 justify-center">
-                                <button type="button" className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded">Change profile picture</button>
-                                <button type="button" onClick={handleBioSaving} className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded">Save bio changes</button>
-                                <button type="button" onClick={handleBioEditing} className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded">Edit bio</button>
-                                <button type="button" className="bg-rose-900 hover:bg-pink-950 text-white font-bold my-3 py-2 px-4 mb-6 rounded">Upload new picture</button>
-                            </div>
-                    </div>
-                    </div>
-                </div>
-                <h1 className="mb-10 font-bold w-full max-w-md m-auto rounded-lg opacity-90 border-8  bg-slate-800 text-center text-5xl font-pokemon py-6 text-white border-pink-950">Pokemon that I like:</h1>
-                <UserLikedPokemon likedPokemon={testData.liked_pokemons}/>
-            </section>
-        </main>
-    )
-}
-
-export default Profile;
\ No newline at end of file
+export default Profile;