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
|
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';
import './Roles.css';
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();
}, []);
return (
<div>
<div className="roles">
<Navbar className="roles" />
</div>
<div className="roles-container">
<h1>Manage Roles</h1>
<div className="roles-list">
{users.map((user, index) => (
<div key={index} className="role-item">
<p className="user-email">{user.email}</p>
<div className="role-actions">
<button onClick={() => handleRoleChange(user.email, 'admin')} className="btn admin-btn">Make Admin</button>
<button onClick={() => handleRoleChange(user.email, 'user')} className="btn user-btn">Make User</button>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default Roles;
|
