42_ft_transcendence/frontend/static/js/views/ProfilePageView.js

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

export default class extends AbstractView {
	constructor(params) {
		super(params, `${decodeURI(params.username)} - Profile`);
		this.username = decodeURI(params.username);
	}

	setTitle() {
		document.title = this.titleKey;
	}

	async postInit()
	{
		if (!this.profile)
			return 404;

		if (this.profile.id === client.me.id)
			return;

		const addFriendButton = document.getElementById('addFriendButton'),
			  removeFriendButton = document.getElementById('removeFriendButton'),
			  blockButton = document.getElementById('blockButton'),
			  unblockButton = document.getElementById('unblockButton');

		this.loadFriendshipStatus();
		if (this.profile.isBlocked)
			unblockButton.classList.remove('d-none');
		else
			blockButton.classList.remove('d-none');

		addFriendButton.onclick = _ => this.addFriend();
		removeFriendButton.onclick = _ => this.removeFriend();
		unblockButton.onclick = _ => this.unblockUser();
		blockButton.onclick = _ => this.blockUser();
	}

	loadFriendshipStatus() {
		const addFriendButton = document.getElementById('addFriendButton'),
			  removeFriendButton = document.getElementById('removeFriendButton'),
			  statusIndicator = document.getElementById('statusIndicator');

		if (this.profile.hasIncomingRequest) {
			removeFriendButton.classList.add('d-none');
			addFriendButton.classList.remove('d-none');
			addFriendButton.innerHTML = 'Accept Request';
		} else if (this.profile.hasOutgoingRequest) {
			addFriendButton.classList.add('d-none');
			removeFriendButton.classList.remove('d-none');
			removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
			removeFriendButton.innerHTML = 'Cancel Request';
		} else if (this.profile.isFriend) {
			addFriendButton.classList.add('d-none');
			removeFriendButton.classList.remove('d-none');
			removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
			removeFriendButton.innerHTML = 'Remove Friend';
		} else {
			addFriendButton.innerHTML = 'Add Friend';
			removeFriendButton.classList.add('d-none');
			addFriendButton.classList.remove('d-none');
		}

		statusIndicator.classList.remove('bg-success', 'bg-danger');
		if (this.profile.online === true)
			statusIndicator.classList.add('bg-success');
		else if (this.profile.online === false)
			statusIndicator.classList.add('bg-danger');
	}

	async getHtml() {

		this.profile = await client.profiles.getProfile(this.username);
		if (!this.profile)
			return '';

		return `
		<div>
		  <div class='mb-3' id='profileInfo'>
			<h1>${this.username}<span id='statusIndicator' style='height:0.75em; width:0.75em' class='ms-2 rounded-circle border d-inline-block'></span></h1>
			<a href=${this.profile.avatar} target='_blank'>
			<img class='img-thumbnail' src=${this.profile.avatar} style='width:auto; max-height:20vh; min-height:10vh'>
			</a>
		  </div>
		  <div>
			<button class='btn btn-sm btn-success d-none' id='addFriendButton'>Add Friend</button>
			<button class='btn btn-sm btn-danger d-none' id='removeFriendButton'>Remove Friend</button>
			<button class='btn btn-sm btn-danger d-none' id='blockButton'>Block</button>
			<button class='btn btn-sm btn-secondary d-none' id='unblockButton'>Unblock</button>
		  </div>
		</div>
		`;
	}

	async addFriend() {
		const removeFriendButton = document.getElementById('removeFriendButton');

		const response = await client._post(`/api/profiles/friends/${this.profile.id}`);
		const body = await response.json();
		console.log(body);

		if (response.ok) {
			removeFriendButton.classList.remove('d-none');
			document.getElementById('addFriendButton').classList.add('d-none');
		}
		if (response.status === 200) {
			removeFriendButton.innerHTML = 'Cancel Request';
			removeFriendButton.classList.replace('btn-danger', 'btn-secondary');
			this.profile.hasOutgoingRequest = true;
		} else if (response.status === 201) {
			removeFriendButton.innerHTML = 'Remove Friend';
			removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
			this.profile.isFriend = true;
			this.profile.hasIncomingRequest = false;
		}
	}

	async removeFriend() {
		const addFriendButton = document.getElementById('addFriendButton'),
			  statusIndicator = document.getElementById('statusIndicator');

		const response = await client._delete(`/api/profiles/friends/${this.profile.id}`);
		const body = await response.json();
		console.log(body);

		if (response.ok) {
			addFriendButton.innerHTML = 'Add Friend';
			addFriendButton.classList.remove('d-none');
			statusIndicator.classList.remove('bg-danger', 'bg-success');
			document.getElementById('removeFriendButton').classList.add('d-none');
		}
		if (response.status === 200) {
			this.profile.hasOutgoingRequest = false;
		} else if (response.status === 201) {
			this.profile.isFriend = false;
			this.profile.online = null;
		}
	}

	async blockUser() {
		const response = await client._post(`/api/profiles/block/${this.profile.id}`);
		const body = await response.json();
		console.log(body);

		if (response.ok) {
			document.getElementById('blockButton').classList.add('d-none');
			document.getElementById('unblockButton').classList.remove('d-none');
			client.me.blockedUsers.push(this.profile);
			this.profile.isBlocked = true;
		}
	}

	async unblockUser() {
		const response = await client._delete(`/api/profiles/block/${this.profile.id}`);
		const body = await response.json();
		console.log(body);

		if (response.ok) {
			document.getElementById('unblockButton').classList.add('d-none');
			document.getElementById('blockButton').classList.remove('d-none');
			client.me.blockedUsers = client.me.blockedUsers.filter(profile => profile.id !== this.profile.id);
			this.profile.isBlocked = false;
		}
	}
}