Initial commit

This commit is contained in:
Spectralitree 2020-12-09 09:15:55 +01:00
parent 000cc732a6
commit fe13aaa9e2
18 changed files with 15953 additions and 40 deletions

1
.eslintcache Normal file
View File

@ -0,0 +1 @@
[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"10"},{"size":296,"mtime":1607424711608,"results":"11","hashOfConfig":"12"},{"size":87,"mtime":1607422561580,"results":"13","hashOfConfig":"12"},{"size":3416,"mtime":1607467147275,"results":"14","hashOfConfig":"12"},{"size":336,"mtime":1607466411435,"results":"15","hashOfConfig":"12"},{"size":73,"mtime":1607380663280,"results":"16","hashOfConfig":"12"},{"size":231,"mtime":1607464297342,"results":"17","hashOfConfig":"12"},{"size":671,"mtime":1607467074202,"results":"18","hashOfConfig":"12"},{"size":1694,"mtime":1607466250269,"results":"19","hashOfConfig":"12"},{"size":2160,"mtime":1607468731560,"results":"20","hashOfConfig":"12"},{"size":1894,"mtime":1607468928885,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1rd8s2n",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",["42"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js",["43"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",["44"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",["45"],{"ruleId":"46","severity":1,"message":"47","line":2,"column":13,"nodeType":"48","messageId":"49","endLine":2,"endColumn":15},{"ruleId":"46","severity":1,"message":"50","line":1,"column":8,"nodeType":"48","messageId":"49","endLine":1,"endColumn":13},{"ruleId":"51","severity":1,"message":"52","line":18,"column":4,"nodeType":"53","endLine":18,"endColumn":22,"suggestions":"54"},{"ruleId":"51","severity":1,"message":"52","line":18,"column":8,"nodeType":"53","endLine":18,"endColumn":28,"suggestions":"55"},"no-unused-vars","'BS' is defined but never used.","Identifier","unusedVar","'react' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'toHTML'. Either include it or remove the dependency array.","ArrayExpression",["56"],["57"],{"desc":"58","fix":"59"},{"desc":"60","fix":"61"},"Update the dependencies array to be: [toHTML, user.description]",{"range":"62","text":"63"},"Update the dependencies array to be: [member.description, toHTML]",{"range":"64","text":"65"},[550,568],"[toHTML, user.description]",[541,561],"[member.description, toHTML]"]

View File

@ -68,3 +68,4 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
### `yarn build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
"# pk-web"

15612
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,5 @@
{
"homepage": "http://spectralitree.github.io/pk-web",
"name": "pk-web",
"version": "0.1.0",
"private": true,
@ -12,6 +13,8 @@
"web-vitals": "^0.2.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
@ -34,5 +37,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}

View File

@ -2,19 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="public/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@ -24,7 +23,14 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>pk-web</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -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;

14
src/Components/Dash.js Normal file
View File

@ -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 />
</>
);
}

11
src/Components/Home.js Normal file
View File

@ -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>
);
}

View File

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

View File

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

View File

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

View File

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

43
src/Components/System.js Normal file
View File

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

View File

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

2
src/History.js Normal file
View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -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();

View File

@ -3342,14 +3342,9 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001035:
version "1.0.30001035"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==
caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001164:
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001164:
version "1.0.30001165"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz"
integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
capture-exit@^2.0.0: