{"size": 2379, "ext": "js", "max_stars_repo_path": "client/src/pages/Settings/Interest.js", "max_stars_repo_name": "nicholas-romano/Happenings", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/pages/Settings/Interest.js", "max_issues_repo_name": "nicholas-romano/Happenings", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/pages/Settings/Interest.js", "max_forks_repo_name": "nicholas-romano/Happenings", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 43.2545454545, "max_line_length": 130, "alphanum_fraction": 0.2929802438}
import React from 'react';

const Interest = props => {

    const {
        newInterest,
        interestList,
        deleteInterest,
        addToInterests
    } = props;

    return (
                <div className="columns">
                    <div className="column is-one-fifth">
                        <label className="label">Add Interest:</label>
                    </div>
                    <div className="columns is-four-fifths">
                        <div className="column is-four-fifths">
                            <div>
                                <input className="input" 
                                    type="text"
                                    placeholder="Add Interest"
                                    ref={newInterest}
                                />
                            </div>
                            <div className="list">
                                { (interestList.length > 0 ) ?
                                    <ul>
                                        {
                                            interestList.map((interest, index) => {
                                                index += 1;
                                                return (<li key={index}>{index}. {interest} 
                                                            <button className="delete-icon" onClick={() => deleteInterest(index)}>
                                                                <span className="fas fa-minus-circle"></span>
                                                            </button>
                                                        </li>)
                                            })
                                        }
                                    </ul>
                                : <p className="empty">Your interest list is empty.</p>
                                }
                                
                            </div>
                        </div>
                        <div className="column is-one-fifth">
                            <button onClick={() => addToInterests()} className="button is-link">
                                <span className="fas fa-plus"></span>
                            </button>
                        </div>
                    </div>
                </div>
    )
}

export default Interest;