{"size": 1925, "ext": "js", "max_stars_repo_path": "src/components/boards/activeBoard/ShowActiveBoard.js", "max_stars_repo_name": "cvhu/simple-trello", "max_stars_repo_stars_event_min_datetime": "2017-12-02T00:47:26.000Z", "max_stars_repo_stars_event_max_datetime": "2019-06-21T07:24:25.000Z", "max_issues_repo_path": "src/components/boards/activeBoard/ShowActiveBoard.js", "max_issues_repo_name": "cvhu/simple-trello", "max_issues_repo_issues_event_min_datetime": "2020-07-20T01:45:50.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T23:18:24.000Z", "max_forks_repo_path": "src/components/boards/activeBoard/ShowActiveBoard.js", "max_forks_repo_name": "cvhu/simple-trello", "max_forks_repo_forks_event_min_datetime": "2017-12-02T01:11:32.000Z", "max_forks_repo_forks_event_max_datetime": "2019-04-30T14:05:42.000Z"}
{"max_stars_count": 260, "max_issues_count": 6, "max_forks_count": 119, "avg_line_length": 26.7361111111, "max_line_length": 78, "alphanum_fraction": 0.5958441558}
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import selectActiveBoard from '~Actions/SelectActiveBoard';
import enableListEditMode from '~Actions/ToggleListEditMode';
import submitList from '~Actions/SubmitList';
import ActiveBoardTitle from './ActiveBoardTitle';
import ListWrapper from './lists/ListWrapper';
import CreateNewList from './lists/CreateNewList';
import ListEditingMode from './lists/ListEditingMode';
import ListItemsContainer from './lists/ListItemsContainer';

class ShowActiveBoard extends Component {

    static propTypes = {
        selectActiveBoard: PropTypes.func.isRequired,
    }

    componentDidMount() {
        const {
            match,
            selectActiveBoard,
        } = this.props;
        selectActiveBoard(match.params.id);
    }

    getTitle = () => {
        return this.props.activeBoard.title;
    }

    handleListSubmit = values => {
        this.props.submitList(values.listItem);
    }

    render() {

        const { activeBoard, enableListEditMode } = this.props;
        if (activeBoard.isFetching) {
            return (
                <div>loading...</div>
            )
        }

        return (
            <div>
                <ActiveBoardTitle>
                    {this.getTitle()}
                </ActiveBoardTitle>
                <ListWrapper>
                    <ListItemsContainer />
                    { activeBoard.isEditingList
                        ? <ListEditingMode onSubmit={this.handleListSubmit} />
                        : <CreateNewList addList={enableListEditMode} />
                    }
                </ListWrapper>


            </div>
        )
    }
}

function mapStateToProps({ activeBoard }) {
    return {
        activeBoard
    }
}

export default connect(mapStateToProps,
    { selectActiveBoard, enableListEditMode, submitList }
)(ShowActiveBoard);
