Initial commit

src/App.js

@@ -1,25 +1,103 @@
-import logo from './logo.svg';
-import './App.css';
+import React, {useEffect, useState} from 'react';
+import { Router, Switch, Route, Redirect } from 'react-router-dom';
+import  * as BS from 'react-bootstrap'
+import { useForm } from "react-hook-form";
+import * as fetch from 'node-fetch';
+
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { FaLock } from "react-icons/fa";
+
+import Dash from './Components/Dash.js'
+import history from "./History.js";
+import Loading from "./Components/Loading.js";
+import Navigation from "./Components/Navigation.js";
+
+import API_URL from "./Constants/constants.js";
+
+export default function App() {
+
+  const [isLoading, setIsLoading ] = useState(false);
+  const [isSubmit, setIsSubmit ] = useState(false);
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  const { register, handleSubmit } = useForm();
+
+  useEffect(() => {
+    if (localStorage.getItem('token')) {
+      logIn();
+    }
+  }, [])
+
+  const onSubmit = data => {
+    localStorage.setItem('token', data.pkToken);
+    logIn();
+  };
+
+ function logIn() {
+     setIsInvalid(false);
+     setIsLoading(true);
+     
+      fetch(`${API_URL}s/`,{
+        method: 'get',
+        headers: {
+          'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
+        }}).then ( res => res.json()
+        ).then (data => { 
+          localStorage.setItem('user', JSON.stringify(data));
+          setIsSubmit(true);
+          setIsLoading(false);
+          history.push("/dash");
+      })
+        .catch (error => { 
+          console.log(error);
+          setIsInvalid(true);
+          localStorage.removeItem('token');
+          localStorage.removeItem('user');
+          setIsLoading(false);
+        })
+      };
+  
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Router history={history}>
+        <Navigation isSubmit={isSubmit} setIsSubmit={setIsSubmit} />
+          <BS.Container>
+            <Switch>
+            <Route path="/dash" >
+              { !localStorage.getItem('token') || isInvalid ? <Redirect to="/"/> : <Dash/>
+              }
+              </Route>
+              <Route exact path="/">
+                { isLoading ? <Loading /> :
+            <BS.Card className="mb-3 mt-3">
+            <BS.Card.Header className="d-flex align-items-center justify-content-between">
+              <BS.Card.Title><FaLock className="mr-3" />Login</BS.Card.Title>
+            </BS.Card.Header>
+            <BS.Card.Body>
+            <BS.Form onSubmit={handleSubmit(onSubmit)}>
+              { isSubmit && !localStorage.getItem('user') ? <BS.Alert variant="danger">Something went wrong, please try again.</BS.Alert> : ""}
+              { isInvalid ? <BS.Alert variant="danger">Invalid token.</BS.Alert> : "" }
+            <BS.Form.Row>
+                <BS.Col xs={10}>
+                    <BS.Form.Label>Enter your token here. You can get your token by using <b>"pk;token"</b>.</BS.Form.Label>
+                </BS.Col>
+            </BS.Form.Row>
+            <BS.Form.Row>
+              <BS.Col xs={10}>
+                <BS.Form.Control required name="pkToken" type="text" ref={register} placeholder="token" />
+              </BS.Col>
+              <BS.Col>
+                <BS.Button variant="primary" type="submit" block >Submit</BS.Button>
+              </BS.Col>
+            </BS.Form.Row>
+          </BS.Form>
+          </BS.Card.Body>
+          </BS.Card>
+          }
+              </Route>
+            </Switch>
+          </BS.Container>
+      </Router>
   );
 }
-
-export default App;

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

src/Constants/constants.js

@@ -0,0 +1,3 @@
+const API_URL = "https://api.pluralkit.me/v1/";
+
+export default API_URL

src/History.js

@@ -0,0 +1,2 @@
+import { createBrowserHistory } from "history";
+export default createBrowserHistory();

src/index.js

@@ -1,17 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Router } from "react-router-dom";
+import history from "./History.js";
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Router history={history}>
     <App />
-  </React.StrictMode>,
+  </Router>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();