1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import React, { useState, useEffect } from 'react';
import { db, auth } from '../firebase';
import { collection, getDocs } from 'firebase/firestore';
import { httpsCallable } from 'firebase/functions';
import Navbar from '../components/Navbar';
const Roles = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const fetchUsers = async () => {
const querySnapshot = await getDocs(collection(db, 'users'));
const usersData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setUsers(usersData);
setLoading(false);
};
const handleRoleChange = async (email, newRole) => {
const addUserRole = httpsCallable(auth, 'addUserRole');
try {
await addUserRole({ email: email, role: newRole });
fetchUsers();
} catch (error) {
console.error('Error updating role:', error);
}
};
useEffect(() => {
fetchUsers();
}, []);
if (loading) {
return <p>Loading...</p>;
}
return (
<div>
<Navbar />
<div className="container mt-5">
<h4>Manage Roles</h4>
<div className="list-group">
{users.map((user, index) => (
<div key={index} className="list-group-item d-flex justify-content-between align-items-center">
<p className="mb-0">{user.email}</p>
<div>
<button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button>
<button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default Roles;
|
