text: import React, { Component } from "react";
  import Link from "next/link";
  
  import { withFirebase } from "../Firebase";
  import * as ROUTES from "../../constants/routes";
  
  class UserList extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loading: false,
        users: [],
      };
    }
  
    componentDidMount() {
      this.setState({ loading: true });
  
      this.unsubscribe = this.props.firebase.users().onSnapshot(snapshot => {
        let users = [];
  
        snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }));
  
        this.setState({
          users,
          loading: false,
        });
      });
    }
  
    componentWillUnmount() {
      this.unsubscribe();
    }
  
    render() {
      const { users, loading } = this.state;
  
      return (
        <div>
          <h2>Users</h2>
          {loading && <div>Loading ...</div>}
          <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>
                <span>
                  <Link
                    href={{
                      pathname: `${ROUTES.ADMIN}/${user.uid}`,
                      state: { user },
                    }}
                  >
                    <a>Details</a>
                  </Link>
                </span>
              </li>
            ))}
          </ul>
        </div>
      );
    }
  }
  
  export default withFirebase(UserList);
  