Add public profiles

2020-12-14 22:25:35 +01:00
parent b5e7c51e5f
commit f501bdc2be
6 changed files with 375 additions and 20 deletions
--- a/src/Components/Profile.js
+++ b/src/Components/Profile.js
@@ -1,15 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import * as BS from 'react-bootstrap';
-import { FaStar } from "react-icons/fa";
+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 () {
-    return (
-        <BS.Card>
-            <BS.Card.Header>
-            <BS.Card.Title><FaStar className="mr-3" />Profile</BS.Card.Title>
-            </BS.Card.Header>
-            <BS.Card.Body>
-                WIP. Public profiles coming soon here!
-            </BS.Card.Body>
-        </BS.Card>
-    )
+
+    const { sysID } = useParams();
+    const [ system, setSystem ] = useState('');
+    const [ name, setName ] = useState('');
+    const [ tag, setTag ] = useState("");
+    const [ timezone, setTimezone ] = useState("");
+    const [ desc, setDesc ] = 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.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 (<>{ 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={`${system.avatar_url}`} style={{width: 500, 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} /> </> } 
+    
+    </>
+   )
 }