GraphictoriaWeb/web/resources/js/pages/User.js

66 lines
1.8 KiB
JavaScript

// © XlXi 2021
// Graphictoria 5
import axios from 'axios';
import React, { useEffect, useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import Config from '../config.js';
import SetTitle from "../Helpers/Title.js";
import Loader from '../Components/Loader.js';
import { GenericErrorModal } from './Errors.js';
import { Card, CardTitle } from '../Layouts/Card.js';
var url = Config.BaseUrl.replace('http://', '');
var protocol = Config.Protocol;
const User = (props) => {
const [state, setState] = useState(true);
const [user, setUser] = useState();
const metaUser = props.user;
const userId = useParams().id;
const history = useHistory();
const fetchUser = async () => {
const body = new FormData();
body.append('userId', userId);
body.append('decision', `fetchedUser`);
axios.post(`${protocol}apis.${url}/fetch/user`, body).then(async(data)=>{
const res = data.data;
if (!res) {history.push(`/`);}
SetTitle(`${res.data.username}`);
await setUser(res.data);
return;
});
}
useEffect(async()=>{
await fetchUser();
setState(false);
}, []);
return (
!user
?
<Loader />
:
<div className={`row`}>
<div className={`col`}>
<Card className={`justify-content-center`} padding={true}>
<CardTitle>{user.username}</CardTitle>
<p>[Avatar.]</p>
</Card>
</div>
<div className={`col justify-content-center`}>
<p>"{user.about? user.about : `${user.username} doesn't have an about section!`}" - {user.username}</p>
</div>
</div>
);
}
export default User;