Skip to content

Commit

Permalink
paginated payments profile and fixed progress bar visual bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@MateoGlzAlon
MateoGlzAlon committed Jan 13, 2025
1 parent c510aa3 commit acaecfa
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 69 deletions.
5 changes: 2 additions & 3 deletions app/(pages)/bookmarks/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ export default function Bookmarks() {

setUser(userData || {});
setProjects(userProjects || []);

console.log("User Data:", userData);
} catch (error) {
console.error("Error fetching user data:", error);
}
Expand Down Expand Up @@ -105,7 +103,8 @@ export default function Bookmarks() {
className="w-full h-full object-cover"
/>
</div>
{/*<p>{format(new Date(project.dateCreated), 'dd/MM/yyyy')}</p>*/} <div className="w-full bg-gray-300 rounded-full h-2.5 mt-4">
{/*<p>{format(new Date(project.dateCreated), 'dd/MM/yyyy')}</p>*/}
<div className="w-full overflow-hidden bg-gray-300 rounded-full h-2.5 mt-4">
<div
className="bg-green-500 h-2.5 rounded-full"
style={{
Expand Down
140 changes: 89 additions & 51 deletions app/(pages)/profile/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
"use client"
"use client";

import { useEffect, useState, useRef, useCallback } from "react";
import getProjectsCreatedByUserGET from "@/components/fetchComponents/GET/getProjectsCreatedByUserGET";
Expand All @@ -22,6 +22,9 @@ export default function Profile() {
const [previewImage, setPreviewImage] = useState(null);
const [showConfirmation, setShowConfirmation] = useState(false);
const [userId, setUserId] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(1);
const pageSize = 5;
const fileInputRef = useRef(null);
const router = useRouter();

Expand All @@ -43,22 +46,28 @@ export default function Profile() {
getProjectsCreatedByUserGET(userId),
]);

const userPayments = await getPaymentsMadeByUserGET(timeFilter);
const userPayments = await getPaymentsMadeByUserGET(timeFilter, currentPage, pageSize);
const userTotalPayments = await getTotalPaymentsGET(userId, timeFilter);

setUser(userData || {});
setProjects(userProjects || []);
setPayments(userPayments || []);
setPayments(userPayments.data.content || []); // Fix: Set payments from userPayments.content
setTotalPayments(userTotalPayments || 0);
const calculatedPages = Math.ceil((userPayments.data.totalElements || 0) / pageSize);
setTotalPages(calculatedPages || 1);

} catch (error) {
console.error("Error fetching user data:", error);
}
}, [userId, timeFilter]);
}, [userId, timeFilter, currentPage]); // Include currentPage to re-fetch data on page change

useEffect(() => {
fetchUserData();
}, [fetchUserData]);

const handleNextPage = () => setCurrentPage((prev) => prev + 1);
const handlePreviousPage = () => setCurrentPage((prev) => Math.max(prev - 1, 0));

// Handle File Change for Profile Picture
const handleFileChange = (e) => {
const file = e.target.files[0];
Expand Down Expand Up @@ -88,10 +97,11 @@ export default function Profile() {
// Handle Time Filter Change
const handleFilterChange = (e) => {
setTimeFilter(e.target.value);
setCurrentPage(0); // Reset to the first page when the filter changes
};

if (!user) {
return <>
return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center">
<svg
Expand All @@ -117,7 +127,7 @@ export default function Profile() {
<p className="mt-4 text-xl font-semibold">Loading profile</p>
</div>
</div>
</>
);
}

return (
Expand Down Expand Up @@ -210,52 +220,80 @@ export default function Profile() {
</div>

{/* Payments Section */}
<div className="bg-white p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-800">Payments Made ({totalPayments}€)</h2>
<select
className="border px-4 py-2 rounded bg-gray-50"
value={timeFilter}
onChange={handleFilterChange}
>
<option value="This_month">This month</option>
<option value="This_year">This Year</option>
<option value="All_time">All Time</option>
</select>
</div>
<div className="space-y-4">
{payments.length > 0 ? (
payments.map((payment) => (
<div
key={payment.id}
className="flex items-center border rounded-lg p-4 bg-gray-50 hover:bg-gray-100 cursor-pointer"
onClick={() => router.push(`/projects/${payment.projectId}`)}
>
<div className="w-20 h-20 bg-gray-300 rounded-lg mr-4 overflow-hidden">
<img
src={payment.projectCoverImage || "/placeholder.jpg"}
alt="Project"
className="h-full object-cover"
/>
</div>
<div className="flex-grow">
<h3 className="text-lg font-semibold text-gray-800">{payment.projectName}</h3>
<p className="text-gray-600">
<strong>Owner: </strong> {payment.projectOwnerName}
</p>
<p className="text-gray-600">
{format(new Date(payment.paymentDate), "dd/MM/yyyy")}
</p>
</div>
<div className="text-right">
<p className="text-xl font-bold text-gray-800">{payment.amountFunded}€</p>
<p className="text-gray-600">contributed</p>
<div className="bg-white p-4 rounded-lg shadow-md flex flex-col h-full">
<div>
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-800">Payments Made ({totalPayments}€)</h2>
<select
className="border px-4 py-2 rounded bg-gray-50"
value={timeFilter}
onChange={handleFilterChange}
>
<option value="This_month">This month</option>
<option value="This_year">This Year</option>
<option value="All_time">All Time</option>
</select>
</div>
<div className="space-y-4">
{payments.length > 0 ? (
payments.map((payment) => (
<div
key={payment.id}
className="flex items-center border rounded-lg p-4 bg-gray-50 hover:bg-gray-100 cursor-pointer"
onClick={() => router.push(`/projects/${payment.projectId}`)}
>
<div className="w-20 h-20 bg-gray-300 rounded-lg mr-4 overflow-hidden">
<img
src={payment.projectCoverImage || "/placeholder.jpg"}
alt="Project"
className="h-full object-cover"
/>
</div>
<div className="flex-grow">
<h3 className="text-lg font-semibold text-gray-800">{payment.projectName}</h3>
<p className="text-gray-600">
<strong>Owner: </strong> {payment.projectOwnerName}
</p>
<p className="text-gray-600">
{format(new Date(payment.paymentDate), "dd/MM/yyyy")}
</p>
</div>
<div className="text-right">
<p className="text-xl font-bold text-gray-800">{payment.amountFunded}€</p>
<p className="text-gray-600">contributed</p>
</div>
</div>
</div>
))
) : (
<p className="text-gray-600">No payments made yet.</p>
)}
))
) : (
<p className="text-gray-600">No payments made yet.</p>
)}
</div>
</div>
{/* Pagination Buttons Fixed at the Bottom */}
<div className="flex justify-between items-center mt-auto bottom-0 bg-white p-4">
<button
onClick={handlePreviousPage}
disabled={currentPage === 0}
className={`px-4 py-2 rounded-md ${currentPage === 0
? "bg-gray-300 text-gray-500 cursor-not-allowed"
: "bg-blue-600 text-white hover:bg-blue-700"
}`}
>
Previous
</button>
<span>
Page {currentPage + 1} of {totalPages}
</span>
<button
onClick={handleNextPage}
disabled={currentPage === totalPages - 1}
className={`px-4 py-2 rounded-md ${currentPage === totalPages - 1
? "bg-gray-300 text-gray-500 cursor-not-allowed"
: "bg-blue-600 text-white hover:bg-blue-700"
}`}
>
Next
</button>
</div>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions app/(pages)/projects/[projectId]/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,15 @@ const ProjectDetails = ({ params }) => {
async function toggleBookmark() {

if (bookmarked) {
console.log("true book")
await removeBookmark(projectId, TokenManager.getClaims().userId);

} else {
console.log("false book")
const bookmarkdata = {
projectId: projectId,
userId: TokenManager.getClaims().userId
}

const bkresponse = await addBookmark(bookmarkdata);
console.log("response ", bkresponse)
}

const isBookmarked = await isProjectBookmarked(projectId);
Expand Down
6 changes: 3 additions & 3 deletions components/fetchComponents/GET/getPaymentsMadeByUserGET.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import axios from "axios";
import { DATA } from "@/app/data";
import TokenManager from "@/app/apis/TokenManager";

export default async function getPaymentsMadeByUserGET(filter) {
export default async function getPaymentsMadeByUserGET(filter, page = 0, size = 5) {
const userId = TokenManager.getClaims().userId;

const response = await axios.get(`${DATA.origin}/payments/profile/${userId}`, {
params: { filter },
params: { filter, page, size },
headers: { Authorization: `Bearer ${TokenManager.getAccessToken()}` }
});

return response.data;
return response;
}
3 changes: 0 additions & 3 deletions components/fetchComponents/GET/isBookmarkedGET.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,5 @@ export default async function isProjectBookmarked(projectId) {
}
);

console.log("response es bbok ", response.data);
console.log("userid: ", userId, " projectid: ", projectId);

return response.data;
}
8 changes: 4 additions & 4 deletions components/pageComponents/landingPage/ProjectsFilterTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ export default function ProjectFilterTable() {
});

if (data) {
setProjects(data.content || data); // Assuming the API returns a "content" key for projects
setTotalPages(data.totalPages || 1); // Assuming the API returns a "totalPages" key
setProjects(data.content || data);
setTotalPages(data.totalPages || 1);
}
setLoading(false); // Set loading to false after data is fetched
setLoading(false);
};

fetchData();
Expand Down Expand Up @@ -158,7 +158,7 @@ export default function ProjectFilterTable() {
</p>
</div>

<div className="w-full bg-gray-300 rounded-full h-2.5 mb-[1rem]">
<div className="w-full overflow-hidden bg-gray-300 rounded-full h-2.5 mb-[1rem]">
<div
className="bg-green-500 h-2.5 rounded-full"
style={{
Expand Down
2 changes: 1 addition & 1 deletion components/pageComponents/landingPage/ProjectsList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const ProjectsList = ({ title, endpoint }) => {
onError={(e) => (e.target.src = '/default-placeholder.png')}
/>
</div>
<div className="w-full bg-gray-300 rounded-full h-2.5 mt-4">
<div className="w-full overflow-hidden bg-gray-300 rounded-full h-2.5 mt-4 ">
<div
className="bg-green-500 h-2.5 rounded-full"
style={{
Expand Down
2 changes: 1 addition & 1 deletion components/pageComponents/search/SearchProjectList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function SearchProjectList() {
<div className="text-sm font-medium text-gray-800">
{project.moneyRaised} € raised of {project.fundingGoal} €
</div>
<div className="w-full bg-gray-300 rounded-full h-2.5 mb-[1rem]">
<div className="w-full overflow-hidden bg-gray-300 rounded-full h-2.5 mb-[1rem]">
<div
className="bg-green-500 h-2.5 rounded-full"
style={{
Expand Down

0 comments on commit acaecfa

Please sign in to comment.