import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserDashboard = () => {
  const [userRole, setUserRole] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchRoleData = async () => {
      const token = localStorage.getItem('token');
      const response = await axios.get('/api/user/role', {
        headers: { Authorization: `Bearer ${token}` },
      });
      setUserRole(response.data.role);
    };
    fetchRoleData();
  }, []);

  useEffect(() => {
    if (userRole) {
      const fetchData = async () => {
        const response = await axios.get(`/api/data/${userRole}`);
        setData(response.data);
      };
      fetchData();
    }
  }, [userRole]);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

export default UserDashboard;

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component has been mounted!');
  }

  render() {
    return <div>Hello World!</div>;
  }
}