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';
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();
  }, []);

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-text">Loading</div>
        <div className="loading-dots">
          <span>.</span><span>.</span><span>.</span>
        </div>
      </div>
    );
  }

  return (
    <div>
      <Navbar />
      <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;