Js.Homework/async/main.js

//Chat
/*
{
    let inputNick = document.createElement('input')
    inputNick.placeholder = 'Your nick'

    let inputMessage = document.createElement('input')
    inputMessage.placeholder = 'Your message'
    
    let button = document.createElement('button')
    button.innerText = 'SEND'
    
    let divBox = document.createElement('div')
    divBox.style.width = '50%'
    divBox.style.height = '100%'
    divBox.style.border = '2px solid'

    document.body.append(inputNick,inputMessage,button,divBox)

    let nextMessageId = 0
    let nickValue,messageValue

    function nickHandler() {
        nickValue = inputNick.value
    }

    inputNick.addEventListener('input', nickHandler)

    function messageHandler (){
        messageValue = inputMessage.value
    }

    inputMessage.addEventListener('input', messageHandler)

    async function sendMessage (nick,message){
        let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "addMessage", nick: nick, message: message}) 
        
        let numberOfMessages = messages.nextMessageId

        if(nextMessageId < numberOfMessages){
            nextMessageId = numberOfMessages
        }
        else {
            nextMessageId = null
        }

        return messages
    }

    //stage 2

    async function getMessages(){
        let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "getMessage", nextMessageId: 0}) 
        numberOfMessages = messages.nextMessageId
        
        for (let element in messages.data){
            let divMessage = document.createElement('div')
            divBox.append(divMessage)

            let timestamp = new Date(messages.data[element].timestamp).toLocaleString()
            divMessage.innerHTML = `${messages.data[el].nick} : ${messages.data[el].message}  at ${timestamp}`
        }
        return messages.data
    }

    //stage 3 
    async function getNewMessages(){
        let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "getMessages", nextMessageId: 0}) 
        let numberOfMessages = messages.nextMessageId

        if(nextMessageId < numberOfMessages){
            nextMessageId = numberOfMessages
        }
        else {
            nextMessageId = null
        }
        
        for (let element in messages.data){
            let divMessage = document.createElement('div')
            divBox.prepend(divMessage)

            let timestamp = new Date(messages.data[element].timestamp).toLocaleString()
            divMessage.innerHTML = `${messages.data[element].nick} : ${messages.data[element].message}  at ${timestamp}`
            divMessage.style.color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
        }
        return messages.data
    }

    //stage 4
    setInterval(getNewMessages(),4000)

    //stage 5
    button.addEventListener('click',buttonHandler)

     function buttonHandler(){
        sendAndCheck(nickValue, messageValue)
     }

    async function sendAndCheck(nick, message){
        await Promise.all([sendMessage(nick,message),getMessages()])
    }

   

    async function checkLoop (){
        function delay(ms){ 
            function executor(fulfill,reject){  
                setTimeout(() => fulfill(ms), ms)  
            }
            return new Promise(executor) 
        }

        while(true){
            await delay(3000).then(()=> getNewMessages())
        }
    }
    checkLoop()

    //stage 6

    function jsonPost (url,data){
        return new Promise((resolve,reject) => {
            fetch(url,{method: 'POST',body: JSON.stringify(data)})
            .then(responce =>responce.json())
            .then(responce => resolve(responce),()=> reject(new Error('JSONPost failed')))
        })
    }

}
*/

//SWAPI Links
{
    async function swapiLinks(url){
        let data = await fetchMyLink(url)
        console.log(data)
        let result = {}
        let arr = []

        for(let key in data){
            if(Array.isArray(data[key])){
                arr.push(Promise.all(data.key.map(fetchMyLink)).then(res => result[key]= res))
            } 
            else if (typeof(data[key]) === 'string' && (data[key].includes('https://swapi.dev/api/'))){
                arr.push(fetchMyLink(data[key]).then(res => result[key] = res))
            }
            else result[key] = data[key]
        }
        return Promise.all(arr).then(()=>result)
    }

    async function fetchMyLink(link){
        let result = await fetch(link).then(res => res.json)
        return result
    }

    swapiLinks("https://swapi.dev/api/people/20/")
    .then(yodaWithLinks => console.log(JSON.stringify(yodaWithLinks, null, 4)))
}
//domEventPromise
{
    let knopka = document.createElement('button')
    knopka.innerText = "click"
    document.body.append(knopka)

    function domEventPromise(element, eventName){
        function executor(resolve){
            function clickEvent(event){
                resolve(event)
                element.removeEventListener(eventName,clickEvent)
               
            }
            element.addEventListener(eventName,clickEvent)
        }
        return new Promise(executor)
    }
    
    
    domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
}