import React, { useState, useEffect } from "react";
import { sortBy } from "../../utils/sortBy";

export default function Table(props) {
  // This part feels Janky,
  //should I just pass data and setData from the parent function's useState instead?
  const { data } = props;
  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    setRowData(data); //setData()
  }, [data]);

  function clickSort(key) {
    setRowData([...rowData].sort(sortBy(key))); //setData()
  }

  const table = rowData.map((row, index) => {
    return <div key={index}>{row.name}</div>;
  });

  return (
    <div>
      <button onClick={() => clickSort("name")}>Click to sort by Name</button>
      <button onClick={() => clickSort("id")}>Click to sort by ID</button>
      {table}
    </div>
  );
}