Initial commit

src/Components/Dash.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as BS from 'react-bootstrap'
+
+import System from './System.js'
+import Memberlist from './Memberlist.js'
+
+export default function Dash(props) {
+
+    return (<>
+            <System user submit={props.submit} setSubmit={props.setSubmit}/>
+            <Memberlist />
+            </>
+    );
+}

src/Components/Home.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as BS from 'react-bootstrap';
+
+export default function Home() {
+
+    return (
+        <BS.Jumbotron>
+            <h2>Hello, world!</h2>
+        </BS.Jumbotron>
+    );
+}

src/Components/Loading.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import  * as BS from 'react-bootstrap'
+
+export default function Loading() {
+    return (
+        <BS.Container fluid className="text-center"><BS.Spinner animation="border" /></BS.Container>
+    )
+}

src/Components/MemberCard.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import  * as BS from 'react-bootstrap'
+
+import defaultAvatar from '../default_discord_avatar.png'
+import { FaUser } from "react-icons/fa";
+
+export default function MemberCard(props) {
+
+    const { toHTML } = require('discord-markdown');
+
+    const [ desc, setDesc ] = useState("");
+    const member = props.member;
+
+    useEffect(() => {
+        if (member.description) {
+            setDesc(toHTML(member.description));
+        } else setDesc("(no description)");
+    }, [member.description]);
+
+    return (
+       <> 
+        <BS.Accordion.Toggle className="d-flex align-items-center justify-content-between" as={BS.Card.Header} eventKey={member.id}>
+            <BS.Card.Title className="float-left"><FaUser className="mr-4" /> <b>{member.name}</b> ({member.id})</BS.Card.Title>
+            { member.avatar_url ? <BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> : 
+        <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
+        </BS.Accordion.Toggle>
+        <BS.Accordion.Collapse eventKey={member.id}>
+            <BS.Card.Body>
+            <BS.Row>
+                <BS.Col xs={12} md={3}><b>ID:</b> {member.id}</BS.Col>
+                { member.display_name ? <BS.Col xs={12} md={3}><b>AKA: </b>{member.display_name}</BS.Col> : "" }
+                { member.birthday ? <BS.Col xs={12} md={3}><b>Birthday:</b> {member.birthday}</BS.Col> : "" }
+                { member.pronouns ? <BS.Col xs={12} md={3}><b>Pronouns:</b> {member.pronouns}</BS.Col> : "" }
+            </BS.Row>
+            <br/>
+            <p><b>Description:</b></p>
+            <p dangerouslySetInnerHTML={{__html: desc}}></p>
+            </BS.Card.Body>
+        </BS.Accordion.Collapse>
+        </>
+    )
+}

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>
+        </>
+        }
+        </>
+    )
+}

src/Components/Navigation.js

@@ -0,0 +1,23 @@
+import react from 'react';
+import * as BS from 'react-bootstrap'
+
+
+export default function Navigation(props) {
+
+    function logOut() {
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        props.setIsSubmit(false);
+    }
+
+    return (
+        <BS.Navbar bg="light" className="mb-3 " expand="md">
+            <BS.Navbar.Brand>
+                pk-web
+            </BS.Navbar.Brand>
+            <BS.Form inline>
+            { localStorage.getItem('token') ? <BS.Button className="float-right mr-md-2" variant="primary" onClick={logOut}>Log Out</BS.Button> : "" }
+            </BS.Form>
+        </BS.Navbar>
+    )
+}

src/Components/System.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import  * as BS from 'react-bootstrap'
+
+import { FaAddressCard } from "react-icons/fa";
+import defaultAvatar from '../default_discord_avatar.png'
+
+export default function System(props) {
+
+    const { toHTML } = require('discord-markdown');
+
+    const [ desc, setDesc ] = useState("");
+    const user = JSON.parse(localStorage.getItem("user"));
+
+    useEffect(() => {
+    if (user.description) {
+        setDesc(toHTML(user.description));
+    } else setDesc("(no description)");
+}, [user.description]);
+
+        return (
+           <BS.Card className="mb-3 mt-3 w-100" >
+               <BS.Card.Header className="d-flex align-items-center justify-content-between">
+                  <BS.Card.Title className="float-left"><FaAddressCard className="mr-3" /> {user.name}</BS.Card.Title> 
+                  { user.avatar_url ? <BS.Image src={`${user.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> : 
+               <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
+               </BS.Card.Header>
+               <BS.Card.Body>
+               <BS.Row>
+                    <BS.Col xs={12} md={4}><b>ID:</b> {user.id}</BS.Col>
+                    <BS.Col xs={12} md={4}><b>Tag:</b> {user.tag}</BS.Col>
+                    <BS.Col xs={12} md={4}><b>Timezone:</b> {user.tz}</BS.Col>
+                </BS.Row>
+                <br/>
+                <p><b>Description:</b></p>
+                <p dangerouslySetInnerHTML={{__html: desc}}></p>
+                </BS.Card.Body>
+           </BS.Card>
+        )
+}
+
+   
+
+