Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

credit button issue fix #193 #206

Merged
merged 1 commit into from
Jan 26, 2025
Merged

credit button issue fix #193 #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 74 additions & 67 deletions app/(default)/Credits/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { auth } from "@/Firebase";
import { PinContainer } from "./creditcards/credits";
import { useRouter } from "next/navigation";
import { FaPencilAlt, FaTrash } from "react-icons/fa";
import { PuffLoader } from "react-spinners";

export default function PinPage() {
const [contributors, setContributors] = useState([]);
Expand Down Expand Up @@ -128,7 +129,11 @@ export default function PinPage() {
Website <span className="text-green-500">Contributors</span>
</h1>

{isLoading && <p className="text-slate-100">Loading...</p>}
{isLoading && (
<div className="flex justify-center items-center min-h-screen">
<PuffLoader color="#00c853" size={100} />
</div>
)}
{error && <p className="text-red-500">{error}</p>}

{!isLoading && !error && contributors.length === 0 && (
Expand Down Expand Up @@ -185,81 +190,83 @@ export default function PinPage() {
{!isLoading &&
!error &&
[...contributors]
.sort((a,b) => a.name.localeCompare(b.name))
.map((contributor) => (
<div
className="relative flex flex-col items-center"
key={contributor._id}
>
{/* PinContainer */}
<PinContainer title="Visit GitHub" href={contributor.githubUrl}>
<div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
{/* Image wrapper */}
<div className="relative h-full w-full">
<Image
src={contributor.imageUrl}
alt={contributor.name}
layout="fill"
objectFit="cover"
className="rounded-md"
/>
{/* Overlay description */}
<div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
<h3 className="font-bold text-base text-slate-100">
{contributor.name}
</h3>
.sort((a, b) => a.name.localeCompare(b.name))
.map((contributor) => (
<div
className="relative flex flex-col items-center"
key={contributor._id}
>
{/* PinContainer */}
<PinContainer title="Visit GitHub" href={contributor.githubUrl}>
<div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
{/* Image wrapper */}
<div className="relative h-full w-full">
<Image
src={contributor.imageUrl}
alt={contributor.name}
layout="fill"
objectFit="cover"
className="rounded-md"
/>
{/* Overlay description */}
<div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
<h3 className="font-bold text-base text-slate-100">
{contributor.name}
</h3>
</div>
</div>
</div>
</div>
</PinContainer>
</PinContainer>

{/* Edit and Delete Buttons */}
<div
className={`flex justify-center space-x-4 mt-9 ${
showEditIcons ? "opacity-100 visible" : "opacity-0 invisible"
} `}
>
<button
className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-500 transition"
onClick={(e) => {
e.stopPropagation();
console.log("Edit clicked!");
handleEdit(contributor);
}}
>
<FaPencilAlt className="text-white" size={20} />
</button>
<button
className="bg-red-600 text-white rounded-full p-2 hover:bg-red-500 transition"
onClick={(e) => {
e.stopPropagation();
console.log("Delete clicked!");
handleDelete(contributor._id);
}}
{/* Edit and Delete Buttons */}
<div
className={`flex justify-center space-x-4 mt-9 ${
showEditIcons
? "opacity-100 visible"
: "opacity-0 invisible"
} `}
>
<FaTrash className="text-white" size={20} />
</button>
<button
className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-500 transition"
onClick={(e) => {
e.stopPropagation();
console.log("Edit clicked!");
handleEdit(contributor);
}}
>
<FaPencilAlt className="text-white" size={20} />
</button>
<button
className="bg-red-600 text-white rounded-full p-2 hover:bg-red-500 transition"
onClick={(e) => {
e.stopPropagation();
console.log("Delete clicked!");
handleDelete(contributor._id);
}}
>
<FaTrash className="text-white" size={20} />
</button>
</div>
</div>
</div>
))}
))}
</div>

{isAdmin && (
<div className="w-full flex justify-center mt-10">
<button
className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-500 transition"
onClick={() => router.push("/Credits/addcredit")}
>
Add Contributor
</button>
<div className="w-full flex justify-center mt-10">
<button
className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-500 transition"
onClick={() => router.push("/Credits/addcredit")}
>
Add Contributor
</button>

<button
className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-500 transition ml-4"
onClick={toggleEditIcons}
>
Edit
</button>
</div>
<button
className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-500 transition ml-4"
onClick={toggleEditIcons}
>
Edit
</button>
</div>
)}
</div>
);
Expand Down
25 changes: 14 additions & 11 deletions components/ContributorsBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,25 @@ export const ContributorsBtn = () => {
const router = useRouter();

const handleClick = async () => {
try {
const response = await fetch('/api/credits/newCollaborator', {
method: 'POST',

fetch('/api/credits/newCollaborator', {
method: 'POST',
})
.then(async (response) => {
if (!response.ok) {
throw new Error('Failed to fetch data from GitHub API');
}
})
.catch((err: any) => {
console.error('Error posting contributor:', err.message);
});
if (!response.ok) {
throw new Error('Failed to fetch data from GitHub API');
}
router.push('/Credits');
} catch (err:any) {
console.error('Error posting contributor:', err.message);
}

router.push('/Credits');
};

return (
<div>
<button type='button' onClick={handleClick} className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-gray-900 to-indigo-800 mx-3 rounded-xl inline-block">
<button type='button' onClick={handleClick} className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-gray-900 to-indigo-800 hover:from-indigo-800 hover:to-gray-900 active:from-gray-900 active:to-indigo-900 mx-3 rounded-xl inline-block">
View Credits
</button>
</div>
Expand Down
Loading