added api csv parser

src/components/userlist/index.jsx

@@ -1,40 +1,42 @@
-import { Component } from "preact";
+import { h } from "preact";
+import { useState } from "preact/hooks";
 
 
 
-class UserList extends Component {
+function UserList({userlist}) {
+    const [list, setuserlist] = useState(userlist);
 
-
-    deleteUser(user){
-        alert(`delete: ${user.uid}`);
+    const deleteUser=(user)=>{
+        let temp = [...list];
+        temp.splice(temp.indexOf(user),1);
+        setuserlist(temp);
     }
-    editUser(user){
+    const editUser=(user)=>{
         alert(`edit: ${user.uid}`);
     }
-    displayUser(user,key){
+    const displayUser=(user)=>{
         return (
-            <div key={key} class="user-list-item">
+            <div key={`user${user.line}`} class="user-list-item">
                 <div class="user-attributes">
-                    <span><b>UID:</b> {user.uid}</span> <span>(<b>Aktiv</b>)</span><br />
+                    <span><b>UID:</b> {user.uid}</span> <span>(<b>{user.enabled?'Aktiv':'Inaktiv'}</b>)</span><br />
                     <span><b>Vorname:</b> {user.first_name}</span><br />
                     <span><b>Nachname:</b> {user.last_name}</span><br />
-                    <span><b>RFID:</b> {user.rfid}</span>
-                    <span><b>PIN:</b> {user.pin}</span>
+                    <span><b>RFID:</b> {user.rfid_uid}</span>
+                    <span><b>PIN:</b> {user.user_pin}</span>
                 </div>
                 <div class="btn-group">
-                    <button class="btn-trash" onClick={()=>this.deleteUser(user)}>Löschen</button>
-                    <button class="btn-edit" onClick={()=>this.editUser(user)}>Bearbeiten</button>
+                    <button class="btn-trash" onClick={()=>deleteUser(user)}>Löschen</button>
+                    <button class="btn-edit" onClick={()=>editUser(user)}>Bearbeiten</button>
                 </div>
             </div>);
     }
     
-    state = {};
-    render() {
+
         return (
             <>
-            {this.props.userlist&&this.props.userlist.map((user,i)=>this.displayUser(user,i))}
+            {list&&list.map((user)=>displayUser(user))}
             </>
         );
-    }
+    
 }
 export default UserList