text: import React, { Component } from 'react';
  import { compose } from 'recompose';
  import { withFirebase } from '../Firebase';
  import { withAuthorization, withEmailVerification } from '../Session';
  import * as ROLES from '../../constants/roles';
  import { Admin, Resource, ListGuesser } from 'react-admin';
  
  const config = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  };
  
  // const trackedResources = [
  //   { name: 'users', isPublic: true }
  // ];
  
  // const dataProvider = RestProvider(config, { trackedResources });
  
  
  class AdminPage extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loading: false,
        users: [],
      };
    }
  
    componentDidMount() {
      this.setState({ loading: true });
      this.props.firebase.users().on('value', snapshot => {
        const usersObject = snapshot.val();
        
        const usersList = Object.keys(usersObject).map(key => ({
          ...usersObject[key],
          uid: key,
        }));
        
  
        this.setState({
          users: usersList,
          loading: false,
        });
      });
    }
  
    componentWillUnmount() {
      this.props.firebase.users().off();
    }
    
    
  
    render() {
      const { users, loading } = this.state;
      return (
        <div>
          <h1>Admin</h1>
          <p>
            The Admin Page is accessible by every signed in admin user.
          </p>
          {loading && <div>Loading ...</div>}
          <UserList users={users} />
          
          <Admin dataProvider={users}>
            {/* <Resource name="users" list={ListGuesser} /> */}
          </Admin> 
        
        </div>
      );
    }
  }
  
  const UserList = ({ users }) => (
    <ul>
      {users.map(user => (
        <li key={user.uid}>
          <span>
            <strong>ID:</strong> {user.uid}
          </span>
          <span>
            <strong>E-Mail:</strong> {user.email}
          </span>
          <span>
            <strong>Username:</strong> {user.username}
          </span>
        </li>
      ))}
    </ul>
  );
  
  const condition = authUser =>
    authUser && !!authUser.roles[ROLES.ADMIN];
  
  export default compose(
    withEmailVerification,
    withAuthorization(condition),
    withFirebase,
  )(AdminPage);