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;

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

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

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

	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}</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');
			client.me.outgoingFriendRequests.push(this.profile);
			this.profile.hasOutgoingRequest = true;
		} else if (response.status === 201) {
			removeFriendButton.innerHTML = 'Remove Friend';
			removeFriendButton.classList.replace('btn-secondary', 'btn-danger');
			this.profile.friend = true;
			this.profile.hasIncomingRequest = false;
			client.me.incomingFriendRequests = client.me.incomingFriendRequests.filter(profile => profile.id !== this.profile.id);
			client.me.friendList.push(this.profile);
		}
	}

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

		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');
			document.getElementById('removeFriendButton').classList.add('d-none');
		}
		if (response.status === 200) {
			this.profile.hasOutgoingRequest = false;
			client.me.outgoingFriendRequests = client.me.outgoingFriendRequests.filter(profile => profile.id !== this.profile.id);
		} else if (response.status === 201) {
			this.profile.isFriend = false;
			client.me.friendList = client.me.friendList.client.me.incomingFriendRequests = filter(friend => friend.id !== this.profile.id);
		}
	}

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