76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
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; |