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})
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=undefined, password=undefined) =>
    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')
logBtn.onclick = () => {
    location.href = "#/login"
    store.dispatch(actionLogin())
}
/********************************MY STUFFF 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() {

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

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()">&#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 { login } = store.getState().promise
    const [, route, _id] = location.hash.split('/')
    
    let passInp, logInp
    if(!login?.payload && route === 'login') {
        console.log('hire');
        aside.innerHTML = ''
        main.innerHTML = `
            <div style="border: 1px solid black; padding: 10px">
                <button id="returnBtnLogin">&#8656 назад</button>
                <input  id="logInp" style="display:block; margin:10px" type="text" placeholder="login"/>
                <input  id="passInp" style="display:block; margin:10px" type="text" placeholder="password"/>
                <button style="display:block; margin:0 auto">LOGIN</button>
            </div>
        `
        let returnBtn = document.getElementById('returnBtnLogin')
        logInp = document.getElementById('logInp')
        passInp = document.getElementById('passInp')

        returnBtn.onclick = () => {
            logBtn.disabled = false
            history.back()
        }
        logBtn.disabled = true
    }
})

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