61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
'use client';
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { databases } from "../lib/appwrite";
|
|
import { databaseId, membersCollectionId } from "../lib/appwrite";
|
|
import { getCurrentUserWithRole } from "../utils/auth";
|
|
|
|
export default function MemberList() {
|
|
const [members, setMembers] = useState([]);
|
|
const [user, setUser] = useState(null);
|
|
|
|
useEffect(() => {
|
|
getCurrentUserWithRole().then(setUser);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const getMembers = async () => {
|
|
try {
|
|
const res = await databases.listDocuments(
|
|
databaseId,
|
|
membersCollectionId
|
|
);
|
|
setMembers(res.documents); // <-- Add this line
|
|
} catch (err) {
|
|
console.error("Error fetching members:", err);
|
|
}
|
|
};
|
|
|
|
getMembers();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-semibold mb-4">All Members</h2>
|
|
<table className="w-full border">
|
|
<thead>
|
|
<tr className="bg-gray-100">
|
|
<th className="p-2 text-left">Name</th>
|
|
<th className="p-2">Phone</th>
|
|
<th className="p-2">Join Date</th>
|
|
<th className="p-2">Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{members.map((m) => (
|
|
<tr key={m.$id} className="border-t">
|
|
<td className="p-2">{m.name}</td>
|
|
<td className="p-2">{m.phone}</td>
|
|
<td className="p-2">{m.joinDate}</td>
|
|
<td className="p-2">{m.role}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Render role only if user is loaded */}
|
|
{user ? <p className="mt-4">Role: {user.role}</p> : <p>Loading role...</p>}
|
|
</div>
|
|
);
|
|
}
|