112 lines
4.2 KiB
JavaScript
112 lines
4.2 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 '../Components/Card.js';
|
|
|
|
var url = Config.BaseUrl.replace('http://', '');
|
|
var protocol = Config.Protocol;
|
|
|
|
const User = (props) => {
|
|
|
|
const [validity, setValidity] = useState({error: false, message: ``, inputs: []});
|
|
const [state, setState] = useState(true);
|
|
const [user, setUser] = useState();
|
|
const [isFriend, setFriend] = useState(false);
|
|
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.get(`${protocol}apis.${url}/fetch/user/${userId}`, body).then(async(data)=>{
|
|
const res = data.data;
|
|
if (!res) {history.push(`/`);}
|
|
SetTitle(`${res.data.username}`);
|
|
setFriend(res.data.isFriend);
|
|
await setUser(res.data);
|
|
return;
|
|
});
|
|
}
|
|
|
|
const addFriend = async (decision) => {
|
|
const body = new FormData();
|
|
body.append('decision', decision);
|
|
setState(true);
|
|
axios.post(`${protocol}apis.${url}/api/add/user/${userId}`, body).then(async(data)=>{
|
|
const res = data.data;
|
|
if (res.badInputs.length >= 1) {
|
|
setValidity({error: true, message:res.message, inputs: res.badInputs});
|
|
setTimeout(()=>{setValidity({...validity, error: false, inputs: res.badInputs});}, 4000);
|
|
setFeedState({...feedState, loading: false});
|
|
setState(false);
|
|
return;
|
|
}
|
|
await setFriend(res.data);
|
|
setState(false);
|
|
return;
|
|
});
|
|
}
|
|
|
|
useEffect(async()=>{
|
|
await fetchUser();
|
|
setState(false);
|
|
}, []);
|
|
|
|
return (
|
|
!user || state
|
|
?
|
|
<Loader />
|
|
:
|
|
<div className={`row`}>
|
|
{validity.error?
|
|
<div className={`px-5 mb-10`}>
|
|
<div className={`error-dialog`}>
|
|
<p className={`mb-0`}>{validity.message}</p>
|
|
</div>
|
|
</div>
|
|
: null}
|
|
<div className={`col`}>
|
|
<Card className={`justify-content-center`} padding={true}>
|
|
<CardTitle>{user.username}</CardTitle>
|
|
<img src='/images/testing/avatar.png' className='img-fluid gt-charimg' />
|
|
<hr/>
|
|
<div className={`flex flex-column justify-content-center align-items-center`}>
|
|
{
|
|
!metaUser? null :
|
|
userId == metaUser.id? <Link className={`btn btn-primary w-fit-content`} to={`/auth/settings`}>Settings</Link> :
|
|
isFriend && isFriend == `pending`?
|
|
<button className={`btn btn-dark disabled w-fit-content`}>Pending...</button>
|
|
: isFriend && isFriend == `needToAccept`?
|
|
<button className={`btn btn-success w-fit-content`} onClick={(e)=>{addFriend(`accept`);}}>Accept Friend Request</button>
|
|
: isFriend?
|
|
<button className={`btn btn-danger w-fit-content`} onClick={(e)=>{addFriend(`remove`);}}>Remove Friend</button>
|
|
:
|
|
<button className={`btn btn-success w-fit-content`} onClick={(e)=>{addFriend(`add`);}}>Add Friend</button>
|
|
}
|
|
</div>
|
|
<hr/>
|
|
<p>"{user.about? user.about : `${user.username} doesn't have an about section!`}" - {user.username}</p>
|
|
</Card>
|
|
</div>
|
|
<div className={`col justify-content-center`}>
|
|
<p>Something else idk.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default User;
|