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

import { getManagedPolochons } from "../../actions/polochon";

import { Polochon } from "./polochon";
import { PolochonAdd } from "./add";

export const PolochonList = () => {
  const list = useSelector((state) => state.polochon.managed);
  const dispatch = useDispatch();

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

  return (
    <div className="row mb-3">
      <div className="col-12 col-md-8 offset-md-2">
        <h2>My polochons</h2>
        <hr />
        <span>
          {list.map((polochon, index) => (
            <Polochon
              key={index}
              id={polochon.id}
              name={polochon.name}
              token={polochon.token}
              url={polochon.url}
              authToken={polochon.auth_token}
              users={polochon.users}
            />
          ))}
        </span>
        <PolochonAdd />
      </div>
    </div>
  );
};