react-trello icon indicating copy to clipboard operation
react-trello copied to clipboard

Axios and Cards bug

Open natdev opened this issue 5 years ago • 0 comments

Describe the bug

Hi im using your component to display a board from an API, this API use Github API to get the board data. So i can display columns but cards appear only when i move columns and when i try to move cards i get this error message: Uncaught TypeError: Cannot read property 'laneId' of null.

Please i need your help

https://developer.github.com/v3/projects/columns/ https://developer.github.com/v3/projects/cards/

To Reproduce

import React,{Component} from "react";
import Board from 'react-trello'
import axios from "axios";

export default class Kanban extends Component {

    constructor(props) {
        super(props);
        this.state = {
            board: {lanes:[]}
        }


    }



    componentDidMount() {
            this.get_column()

        }


        get_column = () =>{

            let user_id = localStorage.getItem('UserId');
            // console.log(res.data);
            if(this.props.match) {
                const {match: {params}} = this.props;
                /* console.log(params.id);*/

                axios.get('http://localhost:8000/'+ user_id +'/projects/'+ params.id+'/projects', {headers: {'Authorization': `${localStorage.getItem('UserToken')}`}}).then( (response) => {
                    const data_elem = [];
                    response.data.map( (elem) =>{
                        //console.log(elem.id);

                        axios.get('http://localhost:8000/'+ user_id +'/projects/columns/'+elem.id+'/cards', {headers: {'Authorization': `${localStorage.getItem('UserToken')}`}}).then((res) => {
                            // console.log(res.data);
                            if(res.data.length > 0){
                                elem['cards'] = res.data;
                            }

                        });

                        data_elem.push(elem);

                    });


                    if(data_elem.length > 0){
                        this.setState({board:{lanes: data_elem}})
                    }

                });



            }
        }




    render() {

        if(this.state.board.lanes.length > 0 ) {console.log(this.state.board)}

        return (<div>

            {this.state.board.lanes.length > 0 ? <Board data={this.state.board} draggable/>: <p>Loading...</p>}
        </div>)
    }
}


natdev avatar Jul 27 '20 14:07 natdev