ft_transcendence/frontend/static/js/views/ProfilePageView.js

import AbstractView from "./abstracts/AbstractView.js";
import { client } from "../index.js"

export default class extends AbstractView {
    constructor(params) {
        super(params, "Profile ");
        this.user_id = params.id;
    }

    async postInit()
    {
        this.profile = await client.profiles.getProfile(this.user_id);
		this.info = document.getElementById("info");

		// Username
        let username = document.createElement("a");
		username.id = "username";
        username.appendChild(document.createTextNode(this.profile.username));
		this.info.appendChild(username);

		this.info.appendChild(document.createElement("br"));

		// Avatar
        let avatar = document.createElement("img");
		avatar.id = "avatar";
        avatar.src = this.profile.avatar_url;
		this.info.appendChild(avatar);

		await this.blockButton();
    }

	async blockButton() {
		// Block option
		if (client.me.user_id != this.user_id) {
			let block = document.getElementById("block") || document.createElement("a");
			block.id = "block";
			block.innerText = "";
			block.onclick = async () => {
				if (!this.profile.isBlocked)
					await client.profiles.block(this.user_id);
				else
					await client.profiles.deblock(this.user_id);
				this.profile = await client.profiles.getProfile(this.user_id);
				this.blockButton();
			};
			if (this.profile.isBlocked)
				block.appendChild(document.createTextNode("Deblock"));
			else
				block.appendChild(document.createTextNode("Block"));
			this.info.appendChild(block);
		}
	}

    async getHtml() {
        return `
            <link rel="stylesheet" href="/static/css/profile.css">
			<div id="info"> 

			</div>
        `;
    }
}