🏡 index : ~doyle/chartered.git

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>
    );
  }