text: import React, { Component } from "react";
  import axios from "axios";
  
  import PortfolioSidebarList from "../portfolio/portfolio-sidebar-list";
  import PortfolioForm from "../portfolio/portfolio-form"
  
  export default class PortfolioManager extends Component {
    constructor() {
      super();
  
      this.state = {
        portfolioItems: [],
        portfolioToEdit: {}
      };
    }
  
    clearPortfolioToEdit = () => {
      this.setState({
        portfolioToEdit: {}
      })
    }
  
    handleDeleteClick = portfolioItem => {
      axios.delete(
        `https://api.devcamp.space/portfolio/portfolio_items/${portfolioItem.id}`, 
        { withCredentials: true }
      ).then(response => {
        this.setState({
          portfolioItems: this.state.portfolioItems.filter(item => {
            return item.id !== portfolioItem.id
          })
        })
  
        return response.data
        
      }).catch("handleDeleteError", error)
    }
  
    handleEditFormSubmission = () => {
      this.getPortfolioItems()
    }
  
    handleNewFormSubmission = portfolioItem => {
      this.setState({
        portfolioItems:[portfolioItem].concat(this.state.portfolioItems)
      })
    }
  
    handleEditClick = portfolioItem => {
      this.setState({
        portfolioToEdit: portfolioItem
      })
    }
  
    handleFormSubmissionError = error => {
      console.log("handSubmissionError", error)
    }
  
    getPortfolioItems() {
      axios
        .get("https://gustavosalas.devcamp.space/portfolio/portfolio_items", {
          withCredentials: true
        })
        .then(response => {
          this.setState({
            portfolioItems: [...response.data.portfolio_items]
          });
        })
        .catch(error => {
          console.log("error in getPortfolioItems", error);
        });
    }
  
    componentDidMount() {
      this.getPortfolioItems();
    }
  
    render() {
      return (
        <div className="portfolio-manager-wrapper">
          <div className="left-column">
            <PortfolioForm
              handleNewFormSubmission={this.handleNewFormSubmission}
              handleEditFormSubmission={this.handleEditFormSubmission}
              handleFormSubmissionError={this.handleFormSubmissionError}
              clearPortfolioToEdit={this.clearPortfolioToEdit}
              portfolioToEdit={this.state.portfolioToEdit}
            />
          </div>
  
          <div className="right-column">
            <PortfolioSidebarList 
              handleDeleteClick={this.handleDeleteClick}
              data={this.state.portfolioItems} 
              handleEditClick={this.handleEditClick}
            />
          </div>
        </div>
      );
    }
  }