ft_transcendence/frontend/static/js/views/Search.js

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

export default class extends AbstractView {
    constructor(params) {
        super(params, "Search");
    }

	async postInit() {

		let search = document.getElementById("form");
		search.addEventListener("input", this.users)

		this.users();

	}

	async users() {

		let search = document.getElementById("form").value;
		
		let logged = client.isAuthentificate();

		let users = await client.profiles.all();
		let list_users = document.getElementById('list_users');
		list_users.innerHTML = "";

		users.filter(user => user.username.startsWith(search) == true).forEach((user) => {
			var new_user = document.createElement("li");

			// username
			let username = document.createElement("a");
			username.href = `/profiles/${user.user_id}`;
			username.appendChild(document.createTextNode(user.username));
			new_user.appendChild(username);

			// space
			new_user.appendChild(document.createTextNode(" "));

			// chat
			let chat = document.createElement("a");
			chat.href = `/chat`
			chat.appendChild(document.createTextNode("Chat"));
			new_user.appendChild(chat);
			
			// break line
			new_user.appendChild(document.createElement("br"));

			// avatar
			var img = document.createElement("img");
			img.src = user.avatar_url;
			new_user.appendChild(img);


			list_users.appendChild(new_user);
		});
		console.log(list_users);

	}

    async getHtml() {
        return `
			<link rel="stylesheet" href="/static/css/search.css">

			<input id="form" type="text" name="message" placeholder="userbozo"/>

			<div id="users">
				<ul id="list_users">
				</ul>
			</div>

        `;
    }
}