import React = require("react");
import { useParams } from "react-router-dom";
import { useAuth } from "../useAuth";
import { RoundedPicture, useAuthenticatedRequest } from "../util";
import Nav from "../sections/Nav";
import ErrorPage from "./ErrorPage";
import ReactPlaceholder from "react-placeholder/lib";
import { Envelope, HouseDoor } from "react-bootstrap-icons";
interface Response {
uuid: string;
username: string;
name?: string;
nick?: string;
email?: string;
external_profile_url?: string;
picture_url?: string;
}
export default function User() {
const auth = useAuth();
const { uuid } = useParams();
const { response: user, error } = useAuthenticatedRequest<Response>({
auth,
endpoint: "users/info/" + uuid,
});
if (error) {
return <ErrorPage message={error} />;
}
const ready = !!user;
console.log(user);
return (
<div className="text-white">
<Nav />
<div className="container mt-4 pb-4">
<div className="row align-items-stretch">
<div className="col-12 col-md-6 mb-3">
<div className="card border-0 shadow-sm text-black h-100">
<div className="card-body">
<div className="d-flex flex-row align-items-center">
<RoundedPicture
src={user?.picture_url}
height="96px"
width="96px"
/>
<div className="px-2">
<h1 className="text-primary my-0">
<ReactPlaceholder showLoadingAnimation type="text" rows={1} ready={ready} style={{ width: "12rem" }}>
{user?.nick || user?.name || user?.username}
</ReactPlaceholder>
</h1>
</div>
</div>
</div>
</div>
</div>
<div className="col-12 col-md-6 mb-3">
<div className="card border-0 shadow-sm text-black h-100">
<div className="card-body">
<h5>Aliases</h5>
{user?.nick ? <>{user?.nick}<br /></> : <></>}
{user?.name ? <>{user?.name}<br /></> : <></>}
{user?.username ? <>{user?.username}<br /></> : <></>}
</div>
</div>
</div>
</div>
<div className="row align-items-stretch">
<div className="col-12">
<div className="card border-0 shadow-sm text-black h-100">
<div className="card-body">
<div><HouseDoor /> <a href={user?.external_profile_url} target="_blank">{user?.external_profile_url}</a></div>
<div><Envelope /> <a href={`mailto:${user?.email}`}>{user?.email}</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}