import React, { useState, useEffect } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import UserDataCard from '../components/UserHistory/UserDataCard';
import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
import SearchButton from "../components/UserHistory/SearchButton";

const UserHistory = () => {
  const [userId, setUserId] = useState(7575);
  const [userData, setUserData] = useState({});
  const [rentData, setRentData] = useState([]);

  useEffect(() => {
    // TODO: componentDidMount > 쿼리 검사하기
  },[]);

  useEffect(() => {
    fetch(`http://1.201.143.67:5901/user/${userId}`)
      .then(r => r.json())
      .then(d => {
        console.log('userData',d.data[0])
        if(d.data && d.data.length) setUserData(d.data[0]);

        fetch(`http://1.201.143.67:5901/user/rent/${userId}`)
          .then(r => r.json())
          .then(d => {
            console.log('rentData',d.data);
            if(d.data && d.data.length) setRentData(d.data);
          })
      })
      .catch(err => console.log(err));  },[userId]);

  return (
    <div className="content">
      <Grid fluid>
        <Row>
          <Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}>
            <SearchButton/>
          </Col>
        </Row>
        <Row>
          <Col md={12}>
            <UserDataCard userId={userId} userData={userData}/>
          </Col>
          <Col md={12}>
            <UserHistoryCard userId={userId} rentData={rentData}/>
          </Col>
        </Row>
      </Grid>
    </div>
  );
};

export default UserHistory;