text: import React, { useEffect, useRef, useState } from "react";
  import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
  import CelebAPI from "../../api/CelebAPI";
  import { Button } from "react-bootstrap";
  import { Link } from "react-router-dom";
  import MyList from "../../component/list/MyList";
  import { useHistory } from "react-router";
  
  var products = [
    {
      id: 1,
      name: "Item name 1",
      price: 100,
    },
    {
      id: 2,
      name: "Item name 2",
      price: 100,
    },
  ];
  
  const CelebList = () => {
    const [celebs, setCelebs] = useState([]);
    const history = useHistory();
    async function onDelete(selected) {
      await CelebAPI.delete(selected);
      window.location.reload();
    }
  
    function onSelect(id) {
      history.push("/celeb/" + id);
    }
  
    useEffect(() => {
      fetch();
    }, []);
  
    return (
      <>
        <MyList items={celebs} onDelete={onDelete} onSelect={onSelect} createLink={"/celeb/create"}>
          <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true} width="100">
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField="name" dataSort={true} width="200">
            Celeb Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField="followCnt" dataSort={true} width="100">
            팔로잉 수{" "}
          </TableHeaderColumn>
        </MyList>
      </>
    );
  
    function fetch() {
      CelebAPI.list()
        .then((result) => {
          setCelebs(result.data);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };
  
  export default CelebList;
  