import React, {Component} from 'react';
import './GroupList.css';

class GroupList extends Component {
    constructor (props) {
        super (props);
        this.state = {
            groups: []
        }
    }
    componentDidMount () {
        fetch('http://localhost:3000/listgroupusers')
        .then (response => response.json())
        .then( response => { 
            //Changing received data to suitable form
            let group=[
                {
                groupname: response[0].groupname,
                users: [response[0].username]
                }
            ];
            let j=0;
            for (let i=1; i<response.length; i++) {
                if(response[i].groupname.toLowerCase()===response[i-1].groupname.toLowerCase()) {
                    group[j].users.push(response[i].username);
                }
                else {
                    group.push({
                        groupname: response[i].groupname,
                        users: [response[i].username]
                    });
                    j++;
                }
            }
            this.setState( {groups: group});
        })
        .catch (err => console.log(err));
    }
    //Function that changes received data to list items 
    makeItems = (group, selectGroup) => {
       return (
            <ul className="list ph3 ph5-ns pv4 whbg scroll">
                 {group.map( (item, index) => 
                    <li key={index} className="db mr2">
                        <a href="#0" key={index*10} 
                        onClick={()=> selectGroup(item.groupname)}
                        className="f6 f5-ns b db pa2 link dim mid-gray not-und">
                            <s key={index*100}>{item.groupname}</s>
                            {item.users.map( (user, index2) => {
                                if(user.length!==0) {
                                    return <s key={index2}>, {user}</s>
                                }
                                else {
                                    return '';
                                }
                             }
                            )}
                        </a>
                    </li>
                 )}
            </ul>
            );
    }
    
    render () {
        const {selectGroup} = this.props;
        return (
            <div className="dib">
                <h3 className="wht">List of Groups with all Users</h3>
                {this.makeItems(this.state.groups, selectGroup)}
            </div>
         );
    }
}

export default GroupList;