homework/hw15-gql-cathegory-pg/GQL_files/index.js

function createStore(reducer) {
    let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
    let cbs = []                     //массив подписчиков

    const getState = () => state            //функция, возвращающая переменную из замыкания
    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
        () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка

    const dispatch = action => {
        if (typeof action === 'function') { //если action - не объект, а функция
            return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
        }
        const newState = reducer(state, action) //пробуем запустить редьюсер
        if (newState !== state) { //проверяем, смог ли редьюсер обработать action
            state = newState //если смог, то обновляем state 
            for (let cb of cbs) cb() //и запускаем подписчиков
        }
    }

    return {
        getState, //добавление функции getState в результирующий объект
        dispatch,
        subscribe //добавление subscribe в объект
    }
}

function promiseReducer(state = {}, { type, name, status, payload, error }) {
    if (type === 'PROMISE') {
        return {
            ...state,
            [name]: { status, payload, error }
        }
    }
    return state
}

const actionPending = name => ({ type: 'PROMISE', status: 'PENDING', name })
const actionResolved = (name, payload) => ({ type: 'PROMISE', status: 'RESOLVED', name, payload })
const actionRejected = (name, error) => ({ type: 'PROMISE', status: 'REJECTED', name, error })

const actionPromise = (name, promise) =>
    async dispatch => {
        dispatch(actionPending(name)) // 1. {delay1000: {status: 'PENDING'}}
        try {
            let payload = await promise
            dispatch(actionResolved(name, payload))
            return payload
        }
        catch (error) {
            dispatch(actionRejected(name, error))
        }
    }

const getGQL = url =>
    (query, variables = {}) =>
        fetch(url, {
            //метод
            method: 'POST',
            headers: {
                //заголовок content-type
                "Content-Type": "application/json",
                ...(localStorage.authToken ? { "Authorization": "Bearer " + localStorage.authToken } : {})
            },
            //body с ключами query и variables 
            body: JSON.stringify({ query, variables })
        })
            .then(res => res.json())
            .then(data => {
                if (data.errors && !data.data)
                    throw new Error(JSON.stringify(data.errors))
                return data.data[Object.keys(data.data)[0]]
            })

const backURL = 'http://shop-roles.asmer.fs.a-level.com.ua'

const gql = getGQL(`${backURL}/graphql`)

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

/********************************MY STUFFF START****************************************************** */
function jwtDecode(token) {
    try {
        let decoded = token.split('.')
        decoded = decoded[1]
        decoded = atob(decoded)
        decoded = JSON.parse(decoded)
        return decoded

    } catch (e) {
        return;
    }
}

function authReducer(state, { type, token }) {
    if (!state) {
        if (!localStorage.authToken) {
            console.log('NO-TOKEN')
            return {}
        } else {
            type = 'AUTH_LOGIN'
            token = localStorage.authToken
        }
    }
    if (type === 'AUTH_LOGIN') {
        console.log('AUTH-LOGIN')
        let decoded = jwtDecode(token)
        if (decoded) {
            localStorage.authToken = token
            return { token, payload: decoded }
        }
    }
    if (type === 'AUTH_LOGOUT') {
        console.log('AUTH-LOGOUT')
        localStorage.removeItem('authToken')
        return {}
    }

    return state
}

function combineReducers(reducers) {
    return (state = {}, action) => {
        const newState = {}
        for (const [reducerName, reducer] of Object.entries(reducers)) {
            let newSubState = reducer(state[reducerName], action)

            if (newSubState !== state[reducerName]) {
                newState[reducerName] = newSubState
            }
        }

        if (Object.keys(newState).length !== 0) {
            return { ...state, ...newState }
        }

        return state
    }
}

const combinedReducer = combineReducers({ promise: promiseReducer, auth: authReducer, cart: cartReducer })
const store = createStore(combinedReducer)

const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })

//const store = createStore(authReducer)
console.log(store.getState()) //стартовое состояние может быть с токеном
store.subscribe(() => console.log(store.getState()))

//ПЕРЕДЕЛАТЬ ОТОБРАЖЕНИЕ с поправкой на то, что теперь промисы не в корне state а в state.promise
const actionLogin = (login, password) =>
    actionPromise('login', gql(`
    query log($login:String, $password:String) {
        login(login: $login, password: $password)
      }`, { login, password }))


const actionFullLogin = (login, password) =>
    async dispatch => {
        let token = await dispatch(actionLogin(login, password))
        if (token) {
            dispatch(actionAuthLogin(token))
        }
    }

//const actionRegister //actionPromise
//const actionFullRegister = (login, password) => //actionRegister + actionFullLogin
//+ интерфейс к этому - форму логина, регистрации, может повесить это на #/login #/register 
//+ #/orders показывает ваши бывшие заказы:
//сделать actionMyOrders
//

let logBtn = document.getElementById('logBtn')
/********************************MY STUFFF END****************************************************** */

/********************************MY STUFFF CART START****************************************************** */
function cartReducer(state = {}, { type, good={}, count = 1 }) {
    //{
    //  _id1: {good, count}
    //  _id2: {good, count}
    //}
    let { _id } = good
    const types = {
        CART_ADD() { //как CHANGE, только если ключ раньше был, то достать из count и добавить
            //к count из action. Если не было, достать 0 и добавить к count из action
            return {
                ...state,
                [_id]: { good, count: (state[_id]?.count || 0) + count }
            }
        },
        CART_REMOVE() { //смочь скопировать объект и выкинуть ключ. как вариант через
            //деструктуризацию
            let { _id, ...newState } = state
            return newState
        },
        CART_CHANGE() {
            return {
                ...state, //по аналогии с promiseReducer дописать
                [_id]: { good, count }
            }
        },
        CART_CLEAR() {
            return {}
        },
    }

    if (type in types)
        return types[type]()


    return state
}
//понаписывать action
//прикрутить к товару кнопку которая делает store.dispatch(actionCartAdd(good))
const actionCartAdd = (good, count = 1) => ({ type: 'CART_ADD', good, count })
const actionCartDel = (good, count = 1) => ({ type: 'CART_REMOVE', good, count})

/********************************MY STUFFF CART END****************************************************** */
const actionRootCats = () =>
    actionPromise('rootCats', gql(`query {
        CategoryFind(query: "[{\\"parent\\":null}]"){
            _id name
        }
    }`))

const actionCatById = (_id) =>  //добавить подкатегории
    actionPromise('catById', gql(`query catById($q: String){
        CategoryFindOne(query: $q){
            _id 
            name
            subCategories {
                _id name
            } 
            goods {
                _id name price images {
                    url
                }
            }
        }
    }`, { q: JSON.stringify([{ _id }]) }))

store.dispatch(actionRootCats())

const actionGoodById = (_id) =>
    actionPromise('goodById', gql(`
        query goodById ($good:String) {
            GoodFindOne(query: $good) {
                name 
                description 
                price
                categories {
                    name
                } 
                images {
                    url
                }
            }
        }`, { good: JSON.stringify([{ _id }]) }))


store.subscribe(() => {
    const { rootCats } = store.getState().promise

    if (rootCats?.payload) {
        aside.innerHTML = ''
        for (const { _id, name } of rootCats?.payload) {
            const link = document.createElement('a')
            link.href = `#/category/${_id}`
            link.innerText = name
            aside.append(link)
        }
    }
})

window.onhashchange = () => {
    const [, route, _id] = location.hash.split('/')

    const routes = {
        category() {
            store.dispatch(actionCatById(_id))
        },
        good() {
            store.dispatch(actionGoodById(_id))
        },
        login() {
            let navBar = document.getElementById('navBar')
            navBar.style.visibility = 'hidden'

            let pass, log
            aside.innerHTML = ''
            main.innerHTML = `
                <div style="border: 5px solid purple; padding: 10px; background-color: black;">
                    <button id="returnBtnLogin" style="font-size: small;">&#8656 назад</button>
                    <input  id="logInp" style="font-size: small; display:block; margin:10px" type="text" placeholder="login"/>
                    <input  id="passInp" style="font-size: small; display:block; margin:10px" type="text" placeholder="password"/>
                    <small id="errBox" style="display: block; width:fit-content; color: red; margin: 0 auto;"></small>
                    <button id="submitBtn" style="font-size: small; display:block; margin:0 auto">LOGIN</button>
                </div>
            `
            let returnBtn = document.getElementById('returnBtnLogin')
            let logInp = document.getElementById('logInp')
            let passInp = document.getElementById('passInp')
            let submitBtn = document.getElementById('submitBtn')

            passInp.oninput = (e) => { pass = e.target.value }

            logInp.oninput = (e) => { log = e.target.value }

            returnBtn.onclick = () => {
                navBar.style.visibility = 'visible'
                history.back()
            }

            submitBtn.onclick = () => {
                store.dispatch(actionFullLogin(log, pass))
            }
        },
        cart() {
            const {cart} = store.getState()
            aside.innerHTML = ''
            main.innerHTML = `
                <button onclick="history.back()" style="font-size: smaller;">&#8656 назад</button>
                <h2>Корзина</h2>
                <h4>Общая цена заказов:<span id="fullPrice"></span></h4>
                <button id="clearCartBtn" style="background-color: firebrick; color: white; font-size: smaller;">Очистить корзину</button>
                <br>
            `
            let clearCartBtn = document.getElementById('clearCartBtn')
            clearCartBtn.onclick = () => {
                //clear cart action
            }

            let fullPrice = 0
            for(let item in cart) {
                let orderPrice = cart[item].good.price * cart[item].count
                let card = document.createElement('div')
                fullPrice += orderPrice
                let delOrderBtn = document.createElement('button')
                delOrderBtn.style.backgroundColor = "firebrick"
                delOrderBtn.style.color = "white"
                delOrderBtn.style.fontSize = "smaller"
                delOrderBtn.style.float = "right"
                delOrderBtn.innerText = "Удалить заказ [x]"
                card.append(delOrderBtn)

                delOrderBtn.onclick = () => {
                    console.log('nuaaaaaa', cart[item].good)
                    store.dispatch(actionCartDel(cart[item].good))

                }

                card.insertAdjacentHTML('beforeend', `
                    <br>
                    <h2>${cart[item].good.name}</h2>
                    <div style="border:5px solid mediumvioletred; background-color: black; color: white; padding: 0px 5px;">
                        <h4>Кол-во: ${cart[item].count}</h4>
                        <h4>Стоимость заказа: ${orderPrice}</h4>
                    </div>
                    <br>
                    <img style="border: 1px dashed grey;" src="${backURL}/${cart[item].good.images[0].url}" />
                    <br>
                    <strong>Цена за ед. товара: ${cart[item].good.price}</strong>
                    <br>
                    <a href="#/good/${cart[item].good._id}">На страницу товара</a>
                    <br>
                `)
                
                card.style.backgroundColor = "whitesmoke"
                card.style.border = "1px solid black"
                card.style.margin = "10px"
                card.style.padding = "10px"
                main.append(card)
            }
            console.log('full prise', fullPrice)
            let fullPriceSpan = document.getElementById('fullPrice')
            fullPriceSpan.innerText = `${fullPrice}`
        }
    }
    if (route in routes)
        routes[route]()
}
window.onhashchange()


store.subscribe(() => {
    const { catById } = store.getState().promise
    const [, route, _id] = location.hash.split('/')

    if (catById?.payload && route === 'category') {
        const { name, subCategories } = catById.payload
        main.innerHTML = `<h1>${name}</h1>`

        if (subCategories) {
            console.log('here', subCategories)
            let subCats = document.createElement('div')
            for (let item of subCategories) {
                let link = document.createElement('a')
                link.innerHTML = `${item.name} &#9166`
                link.href = `#/category/${item._id}`
                link.style.margin = '10px'
                link.style.padding = '5px'
                link.style.backgroundColor = 'black'
                link.style.color = 'white'
                subCats.append(link)
            }
            main.append(subCats)
        }
        main.style.padding = "10px"

        if (catById.payload.goods) {
            for (const good of catById.payload.goods) {
                const card = document.createElement('div')
                card.innerHTML = `
                    <h2>${good.name}</h2>
                    <img style="border: 1px dashed grey;" src="${backURL}/${good.images[0].url}" />
                    <br>
                    <strong>Price: ${good.price}</strong>
                    <br>
                    <a href="#/good/${good._id}">На страницу товара</a>
                    <br>
                `
                card.style.backgroundColor = "whitesmoke"
                card.style.border = "1px solid black"
                card.style.margin = "10px"
                card.style.padding = "10px"
                main.append(card)

                let cartButton = document.createElement('button')
                cartButton.innerText = 'Добавить в корзину'
                cartButton.style.fontSize = 'smaller'
                cartButton.style.marginTop = '10px'
                cartButton.style.backgroundColor = 'gold'
                card.append(cartButton)

                cartButton.onclick = () => {
                    console.log('nuaaaaaa', good)
                    store.dispatch(actionCartAdd(good))
                }
            }
        }
    }
})

store.subscribe(() => {
    const { goodById } = store.getState().promise
    const [, route, _id] = location.hash.split('/')

    if (goodById?.payload && route === 'good') {
        const { name, categories, images, price, description } = goodById.payload

        main.innerHTML = `
            <div class="card">
                <button onclick="history.back()" style="font-size: smaller;">&#8656 назад</button>
                <h1>${name}</h1>
                <h4>${categories[0].name}<h4>
                <br>
                <img style="border: 1px dashed grey;" src="${backURL}/${images[0].url}" />
                <br>
                <strong>Price: ${price}</strong>
                <p>${description}</p>
            </div>
        `
        main.style.padding = "10px"
    }
})

store.subscribe(() => {
    const {payload} = store.getState().auth
    const [, route, _id] = location.hash.split('/')
    
    let logBtn = document.getElementById('logBtn')
    let logLink = document.getElementById('logLink')
    let nameField = document.getElementById('nameField')
    if(!payload) {
        nameField.innerText = ''
        logBtn.style.backgroundColor = 'mediumaquamarine'
        logLink.innerText = 'Войти'

    } else if(payload && route === 'login') {
        console.log('loginPayload', payload)
        main.innerHTML = `
            <h2>Вы успешно вошли под логином пользователя '${payload.sub.login}'<h2>
            <button id="returnBtn">&#8656 Венуться к просмотру</button>
        `

        let retBtn = document.getElementById('returnBtn')
        retBtn.onclick = () => {
            let navBar = document.getElementById('navBar')
            navBar.style.visibility = 'visible'
            history.back()
        }

    } else {
        nameField.innerText = payload.sub.login
        logBtn.style.backgroundColor = 'firebrick'
        logBtn.innerHTML = 'Выйти'
        logBtn.onclick = () => {
            nameField.innerText = ''
            logBtn.style.backgroundColor = 'mediumaquamarine'
            logBtn.innerHTML = `<a href="#/login" style="color: white; text-decoration: none;" id="logLink">Войти</a>`
            actionAuthLogout()
        }
        
    }
})

store.subscribe(()=> {
    const {cart} = store.getState()
    let items = 0
    for(let item in cart) {
        items += cart[item].count
    }
    let itemCount = document.getElementById('itemCount')
    itemCount.innerText = items
})

window.onload = () => {
    location.href = "#/category/5dc49f4d5df9d670df48cc64"
}