Added frond-end and needed get calls.

permissions_control_panel/src/components/grouplist/GroupList.js

@@ -0,0 +1,76 @@
+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;