Initial commit

src/Components/Memberlist.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import  * as BS from 'react-bootstrap'
+
+import MemberCard from './MemberCard.js'
+import Loading from "./Loading.js";
+import API_URL from "../Constants/constants.js";
+
+export default function Memberlist() {
+    
+    const user = JSON.parse(localStorage.getItem('user'));
+    const userId = user.id;
+
+    const [isLoading, setIsLoading ] = useState(false);
+    const [isError, setIsError ] = useState(false);
+    const [members, setMembers ] = useState([]);
+    const [value, setValue] = useState('')
+
+
+    useEffect(() => {
+        setIsLoading(true);
+        setIsError(false);
+
+         fetch(`${API_URL}s/${userId}/members`,{
+        method: 'get',
+        headers: {
+          'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+        }}).then ( res => res.json()
+        ).then (data => { 
+          setMembers(data);
+          setIsLoading(false);
+      })
+        .catch (error => { 
+            console.log(error);
+            setIsError(true);
+            setIsLoading(false);
+        })
+    }, [userId])
+    
+
+    const memberList = members.filter(member => {
+        if (!value) return true;
+        if (member.name.toLowerCase().includes(value.toLowerCase())) {
+          return true;
+        }
+        return false;
+      }).sort((a, b) => a.name.localeCompare(b.name)).map((member) => <BS.Card key={member.id}>
+        <MemberCard 
+        member={member}
+        />
+    </BS.Card>
+    );
+
+    return (
+        <>
+        { isLoading ? <Loading /> : isError ? 
+        <BS.Alert variant="danger">Error fetching members.</BS.Alert> :
+        <>
+        <BS.Row className="justify-content-md-center">
+        <BS.Col xs={12} md={4}>
+        <BS.Form inline>
+            <BS.Form.Control className="w-100" value={value} onChange={e => setValue(e.target.value)} placeholder="Search"/>
+        </BS.Form>
+        </BS.Col>
+        </BS.Row>
+        <BS.Accordion className="mb-3 mt-3 w-100" defaultActiveKey="0">
+            {memberList}
+        </BS.Accordion>
+        </>
+        }
+        </>
+    )
+}