99 lines
3.9 KiB
JavaScript
99 lines
3.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useRouteMatch } from 'react-router-dom';
|
|
import { useParams } from 'react-router-dom';
|
|
import * as BS from 'react-bootstrap';
|
|
import Popup from 'reactjs-popup';
|
|
import Twemoji from 'react-twemoji';
|
|
|
|
import { FaAddressCard } from "react-icons/fa";
|
|
import defaultAvatar from '../default_discord_avatar.png'
|
|
import Loading from "./Loading.js";
|
|
import API_URL from "../Constants/constants.js";
|
|
import ProfileList from "./ProfileList.js";
|
|
|
|
export default function Profile () {
|
|
|
|
const match = useRouteMatch("/pk-webs/profile/:sysID/:memberID");
|
|
|
|
const { sysID } = useParams();
|
|
const [ system, setSystem ] = useState('');
|
|
const [ name, setName ] = useState('');
|
|
const [ tag, setTag ] = useState("");
|
|
const [ timezone, setTimezone ] = useState("");
|
|
const [ desc, setDesc ] = useState("");
|
|
const [ avatar, setAvatar ] = useState('');
|
|
|
|
const [ isLoading, setIsLoading ] = useState(true);
|
|
const [ isError, setIsError ] = useState(false);
|
|
|
|
useEffect (() => {
|
|
fetch(`${API_URL}s/${sysID}`,{
|
|
method: 'GET'
|
|
}).then ( res => res.json()
|
|
).then (data => {
|
|
setSystem(data);
|
|
setIsLoading(false);
|
|
})
|
|
.catch (error => {
|
|
console.log(error);
|
|
setIsError(true);
|
|
setIsLoading(false);
|
|
})
|
|
}, [sysID])
|
|
|
|
useEffect(() => {
|
|
const { toHTML } = require('../Functions/discord-parser.js');
|
|
|
|
if (system.name) {
|
|
setName(system.name);
|
|
} else setName('');
|
|
|
|
if (system.avatar_url) {
|
|
var avatarsmall = system.avatar_url.replace('&format=jpeg', '');
|
|
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
|
|
} else setAvatar('')
|
|
|
|
if (system.tag) {
|
|
setTag(system.tag);
|
|
} else setTag('');
|
|
|
|
if (system.tz) {
|
|
setTimezone(system.tz);
|
|
} else setTimezone('');
|
|
|
|
if (system.description) {
|
|
setDesc(toHTML(system.description));
|
|
} else setDesc("(no description)");
|
|
}, [system.description, system.tag, system.avatar_url, system.tz, system.name]);
|
|
|
|
return (match ? <ProfileList sysID={sysID} /> :
|
|
<>{ isLoading ? <Loading /> : isError ? <BS.Alert variant="danger">Something went wrong, either the system doesn't exist, or there was an error fetching data.</BS.Alert> :
|
|
<><BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
|
|
<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-4 float-left" /> {name} ({system.id})</BS.Card.Title>
|
|
{ system.avatar_url ? <Popup trigger={<BS.Image src={`${system.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
|
|
{close => (
|
|
<div className="text-center w-100 m-0" onClick={() => close()}>
|
|
<BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail />
|
|
</div>
|
|
)}
|
|
</Popup> :
|
|
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
|
|
</BS.Card.Header>
|
|
<BS.Card.Body>
|
|
<BS.Row>
|
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {system.id}</BS.Col>
|
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {tag}</BS.Col>
|
|
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {timezone}</BS.Col>
|
|
</BS.Row>
|
|
<p><b>Description:</b></p>
|
|
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
|
|
</BS.Card.Body>
|
|
</BS.Card>
|
|
|
|
<ProfileList sysID={sysID} /> </> }
|
|
|
|
</>
|
|
)
|
|
} |