import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import { User } from "./user";

import { getUsers } from "../../actions/admins";
import { getPolochons } from "../../actions/polochon";

export const UserList = () => {
  const dispatch = useDispatch();
  const userIds = useSelector((state) => Array.from(state.admin.users.keys()));

  useEffect(() => {
    dispatch(getUsers());
    dispatch(getPolochons());
  }, [dispatch]);

  if (userIds.length === 0) {
    return null;
  }

  return (
    <div className="table-responsive my-2">
      <table className="table table-striped">
        <thead className="table-secondary">
          <tr>
            <th>Name</th>
            <th>Activated</th>
            <th>Admin</th>
            <th>Polochon URL</th>
            <th>Polochon token</th>
            <th>Polochon activated</th>
            <th>Last seen</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {userIds.map((id) => (
            <User key={id} id={id} />
          ))}
        </tbody>
      </table>
    </div>
  );
};