absolute banger

client/src/App.js

@@ -25,10 +25,11 @@ const User = ({user}) => {
 const Restricted = ({user}) => {
     
     if (!user) return '';
+    const { upload, admin } = user.permissions;
     return (
         <div className='flex-container'>
-            {user.admin ? <NavLink className='navlink' to='/panel' >Panel</NavLink> : ''}
-            <NavLink className='navlink' to='/upload' >Upload</NavLink>
+            {admin ? <NavLink className='navlink' to='/panel' >Panel</NavLink> : ''}
+            {upload || admin ? <NavLink className='navlink' to='/upload' >Upload</NavLink>: '' }
             <User user={user} />
         </div>
     );

client/src/css/Panel.css

@@ -1,4 +1,5 @@
 .panel {
     height: inherit;
     width: inherit;
+    flex-direction: column;
 }

client/src/pages/Panel.js

@@ -1,15 +1,34 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import '../css/Panel.css';
 
+const User = ({user}) => {
+
+    return (
+        <div className='user flex-container'>
+            {user.tag}
+        </div>
+    );
+
+};
+
 const Panel = () => {
 
+    const [users, setUsers] = useState([]);
+
     useEffect(() => {
+
+        (async () => {
+            const response = await fetch('/api/users');
+            if (response.status !== 200) return;
+            const users = await response.json();
+            setUsers(users);
+        })();
         
     }, []);
     
     return (
-        <div className='panel'>
-            asd
+        <div className='panel flex-container'>
+            {users.length ? users.map(user => <User key={user.id} user={user}/>):'No users'}
         </div>
     );