path: root/panel/src/pages/Roles.jsx

import React, { useState, useEffect } from 'react';
import { db, auth } from '../firebase';
import { collection, getDocs } from 'firebase/firestore';
import { httpsCallable } from 'firebase/functions';

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 className="container">
      <h4>Manage Roles</h4>
      <div>
        {users.map((user, index) => (
          <div key={index} className="mb-3">
            <p>{user.email}</p>
            <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary mr-2">Make Admin</button>
            <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary">Make User</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Roles;