<commit_before>class Canvas extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            display: 'none',
            value: 'DOWNLOAD'
        }
    }

    componentWillMount() {
        this.props.openbtn || this.showModal();
    }

    showModal() {
        this.setState({ display: 'block' });
    }

    hideModal() {
        this.setState({ display: 'none' });
    }

    closeOnBackground(e) {
        if( e.target.id == 'modal') {
            this.hideModal();
        }
    }

    handleItemClick(e) {
        console.log(e.target.innerText)
        this.setState({
            value: e.target.innerText
        });

        var canvas = document.querySelector('#paint');
        var ctx = canvas.getContext('2d');

        var sketch = document.querySelector('#sketch');
        var sketch_style = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));

        // draw image
        var img = new Image();
        //img.src = 'http://www.almuslim.or.id/images/background-fix.png';
        this.props.actions.getImageURL(e.target.innerText);
        img.src = this.props.Imgurl;
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width,canvas.height);
        };
    }

    render() {

        var backgroundList = (
                <div id="content">
                    {
                        this.props.options.map(item => {
                            return <div onClick={this.handleItemClick.bind(this)} className="item">{item}</div>;
                        })
                    }
                </div>
            );

        return (
            <div>
                <div className="row">
                    <div className="col l7 s7 m7">
                        <div id="sketch">
                            <canvas id="paint"></canvas>
                        </div>
                    </div>

                    <div className="col m1 l3 push-m2 push-l1">
                        <form action="#">Brush Size:
                            <p className="range-field">
                                <input type="range" id="size" min="2" max="20"/>
                            </p>
                        </form>
                    </div><commit_msg>customize backgroundlist<commit_after>class Canvas extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            display: 'none',
            value: 'DOWNLOAD',
            user: JSON.parse(localStorage.getItem('amazingpixel::user'))
        }
    }

    componentWillMount() {
        this.props.openbtn || this.showModal();
    }

    showModal() {
        this.setState({ display: 'block' });
    }

    hideModal() {
        this.setState({ display: 'none' });
    }

    closeOnBackground(e) {
        if( e.target.id == 'modal') {
            this.hideModal();
        }
    }

    handleItemClick(e) {
        console.log(e.target.innerText)
        this.setState({
            value: e.target.innerText
        });

        var canvas = document.querySelector('#paint');
        var ctx = canvas.getContext('2d');

        var sketch = document.querySelector('#sketch');
        var sketch_style = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));

        // draw image
        var img = new Image();
        //img.src = 'http://www.almuslim.or.id/images/background-fix.png';
        this.props.actions.getImageURL(e.target.innerText);
        img.src = this.props.Imgurl;
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width,canvas.height);
        };
    }

    render() {

        if(this.state.user==null){
            var backgroundList = (
                <div id="content">
                    {
                        this.props.options.map(item => {
                            return <div onClick={this.handleItemClick.bind(this)} className="item">{item}</div>;
                        })
                    }
                </div>
            );
        }else{
            var personalFiles = [];
            var objs= this.props.data.userlist[this.state.user.uid];
            for (var key in objs) {
                personalFiles.push(objs[key])
            }
            backgroundList = (
                <div id="content">
                    {
                        personalFiles.map(item => {
                            return <div onClick={this.handleItemClick.bind(this)} className="item">{item}</div>;
                        })
                    }
                </div>
            );
        }



        return (
            <div>
                <div className="row">
                    <div className="col l7 s7 m7">
                        <div id="sketch">
                            <canvas id="paint"></canvas>
                        </div>
                    </div>

                    <div className="col m1 l3 push-m2 push-l1">
                        <form action="#">Brush Size:
                            <p className="range-field">
                                <input type="range" id="size" min="2" max="20"/>
                            </p>
                        </form>
                    </div>
{'fraction_non_alphanumeric': 0.13193678794560823, 'fraction_numerical': 0.004777655273796398, 'mean_word_length': 1.266972094960433, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6672918', 'n_tokens_mistral': 1469, 'n_tokens_neox': 1412, 'n_words': 244}