homework/HW16,17_module/main.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 jwtDecode = token => {
    try {
        let [,payload] = token.split(".");
        let payloadParsed= JSON.parse(atob(payload));
        return payloadParsed;
    }
    catch(e){
        console.log(e);
    }
}

function authReducer(state, {type, token}) {
    if (state === undefined) {
        if(localStorage.authToken) {
            type = "AUTH_LOGIN";
            token = localStorage.authToken;
        } else {
            return {};
        }
    }
    if (type === 'AUTH_LOGIN') {
        let payload = jwtDecode(token);
        if (payload) {
            localStorage.authToken = token;
            return {token, payload};
        }
    }
    if (type === 'AUTH_LOGOUT') {
        localStorage.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 }
        } else {
            return state
        }
    }
}

function cartReducer(state={}, {type, good={}, count=1}) {
//каков state
//{
//  _id1: {count:1, good: {_id1, name, price, images}}
//  _id2: {count:1, good: {_id1, name, prica, images}}
//}
//
const {_id} = good;
    if (type==='CART_ADD') {
        return {
            ...state,
            [_id]:{count: (state[_id]? (state[_id].count+=count) : count), good: good}
        }
    }
    if (type==='CART_CHANGE') {
        return {
            ...state,
            [_id]:{count: count, good: good}
        }
    }
    if (type==='CART_DELETE') {
        let newState = {... state};
        delete newState[_id];
        // const {_id, ...newState} = state; 
        return {
            ...newState, 
        }
    }
    if (type==='CART_CLEAR') {
        return {}
    }


    return state;
}

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


const actionCartAdd = (good, count=1)       => ({type: 'CART_ADD', good, count});
const actionCartChange = (good, count=1)    => ({type: 'CART_CHANGE', good, count});
const actionCartDelete = (good)             => ({type: 'CART_DELETE', good});
const actionCartClear = ()                 => ({type: 'CART_CLEAR'});

const cartEl = document.getElementsByClassName("cartN")[0];
let username;
const loginEl = document.getElementsByClassName("loginQ")[0];
const logoEl = document.getElementById("logo");

// const store = createStore(promiseReducer) //не забудьте combineReducers если он у вас уже есть

store.subscribe(() => console.log(store.getState()));


const actionPending             = name => ({type:'PROMISE',name, status: 'PENDING'});
const actionFulfilled = (name,payload) => ({type:'PROMISE',name, status: 'FULFILLED', payload});
const actionRejected  = (name,error)   => ({type:'PROMISE',name, status: 'REJECTED', error});
const actionAuthLogin = (token)        => ({ type: 'AUTH_LOGIN', token });
const actionAuthLogout = ()            => ({ type: 'AUTH_LOGOUT' });
const actionPromise = (name, promise) =>
    async dispatch => {
        dispatch(actionPending(name))
        try {
            let payload = await promise
            dispatch(actionFulfilled(name, payload))
            return payload
        }
        catch(error){
            dispatch(actionRejected(name, error))
        }
    }

const getGQL = url =>
    (query, variables) => fetch(url, {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
        },
        body: JSON.stringify({query, variables})
    }).then(res => res.json())
        .then(data => {
            if (data.data){
                return Object.values(data.data)[0] 
            } 
            else throw new Error(JSON.stringify(data.errors))
        })

const backendURL = "http://shop-roles.node.ed.asmer.org.ua";

const gql = getGQL(backendURL + '/graphql')

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){
          subCategories{
            name _id goods {
              _id
             name
            }
           }
            _id name goods {
                _id name price images {
                    url
                }
            }
        }
    }`, { q: JSON.stringify([{ _id }]) }));


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


const orderHistory = () =>
    actionPromise(
      'history',
      gql(` query OrderFind{
        OrderFind(query:"[{}]"){
            _id total createdAt orderGoods{
                count good{
                    _id name price images{
                      url
                    }
                }
                owner{
                    _id login 
                }
            }
        }
    }
  `));

  const actionLogin = (login, password) =>
  actionPromise(
    'login',
    gql(
      `query log($login: String, $password: String) {
        login(login: $login, password: $password)
      }`,
      { login: login, password: password }
    )
  );

const actionFullLogin = (login, password) => async (dispatch) => {
  let token = await dispatch(actionLogin(login, password));
  console.log(token);
  if (token) {
    dispatch(actionAuthLogin(token));
  }
  alerting();
};

const actionRegister = (login, password) =>
  actionPromise(
    'register',
    gql(
      `mutation register ($login:String, $password:String){
  UserUpsert(user:{login:$login, password:$password}){
	_id login
 }
}`,
      { login: login, password: password }
    )
  );

const actionOrder = () => async (dispatch, getState) => {
let { cart } = getState();
const orderGoods = Object.entries(cart).map(([_id, { count }]) => ({ good: { _id }, count, }));

let result = await dispatch(
    actionPromise(
    'order',
    gql(
        `
                    mutation newOrder($order:OrderInput){
                    OrderUpsert(order:$order)
                        { _id total 	}
                    }
            `,
        { order: { orderGoods } }
    )
    )
);
if (result?._id) {
    dispatch(actionCartClear());
    document.location.hash = "#/cart/";
    alert("Поздравляем, вы оформили заказ!");
}
};


const actionFullRegister = (login, password) => async (dispatch) => {
  let id = await dispatch(actionRegister(login, password));
//   console.log(id);
  alertingReg(id, login);
  if (id) {
    dispatch(actionFullLogin(login, password));
  }
};

store.dispatch(actionRootCats());

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(){
            // console.log("good")
            //задиспатчить actionGoodById
            // console.log('ТОВАРОСТРАНИЦА')
            store.dispatch(actionGoodById(_id));
        },
        login(){
            main.innerHTML = `<h2>Для осуществления заказов:<br>если вы зарегистрированы,
            введите логин и пароль и нажмите Войти;<br>если не зарегистрированы - нужно зарегистрироваться</h2>`;
            const formEl = document.createElement("div");
            const p1el = document.createElement("p");
            const p2el = document.createElement("p");
            const p3el = document.createElement("p");
            const br1El = document.createElement("br");
            const br2El = document.createElement("br");
            const br3El = document.createElement("br");
            const input1El = document.createElement("input");
            const input2El = document.createElement("input");
            const buttonLogEl = document.createElement("button");
            const buttonRegEl = document.createElement("button");
            const buttonLogOutEl = document.createElement("button");
            p1el.innerText = "Введите логин:";
            p2el.innerText = "Введите пароль:";
            input1El.id = "inputLogin";
            input2El.id = "inputPassword";
            input2El.type = "password";
            buttonLogEl.innerText = "Войти";
            buttonRegEl.innerText = "Зарегистрироваться";
            buttonLogOutEl.innerText = "Выйти";
            if(username) {
                buttonLogEl.disabled = true;
                buttonRegEl.disabled = true;
            }
            buttonLogEl.onclick = () => {
                store.dispatch(actionFullLogin(input1El.value, input2El.value));
                // if (username) location.hash = "#/goods";
            }
            buttonRegEl.onclick = () => {
                store.dispatch(actionFullRegister(input1El.value, input2El.value));
            }
            buttonLogOutEl.onclick = () => {
                store.dispatch(actionAuthLogout());
                username = "";
                document.location.hash = "#/login/";
            }
            formEl.append(p1el,input1El,p2el,input2El,br1El,br2El,buttonLogEl,buttonLogOutEl,buttonRegEl);
            main.append(formEl);
            //по кнопке - store.dispatch(actionFullLogin(login, password))
        },
        register(){
            //отрисовка тут
            //по кнопке - store.dispatch(actionFullRegister(login, password))
        },
        dashboard(){
            store.dispatch(orderHistory());

        },
        cart(){
            const cart = store.getState().cart;
            if(Object.entries(cart).length>0) {
                main.innerHTML = `<h2>Содержимое вашей корзины</h2>`;
                const {cart} = store.getState();
                let totalScore = 0;
                let totalCount = 0;
                const tableCartEl = document.createElement("table");
                const trEl = document.createElement("tr");
                const td1El = document.createElement("td");
                const td2El = document.createElement("td");
                const td3El = document.createElement("td");
                const td4El = document.createElement("td");
                const td5El = document.createElement("td");
                td1El.innerText = "Удалить";
                td2El.innerText = "Наименование товара";
                td3El.innerText = "Цена";
                td4El.innerText = "Количество";
                td5El.innerText = "Изменить";
                trEl.append(td1El,td2El,td3El,td4El,td5El);
                tableCartEl.append(trEl);
    
                if (Object.entries(cart).length>0) {
                    for (let [key, value] of Object.entries(cart)) {
                        const {count, good} = value;
                        const {name, _id, price} = good;
                        const buttonDel = document.createElement("button");
                        const buttonMinus = document.createElement("button");
                        const buttonPlus = document.createElement("button");
                        buttonMinus.innerText = "-";
                        buttonPlus.innerText = "+";
                        buttonDel.innerText = "Удалить";


                        buttonMinus.onclick = () => {
                            if(count==1) {
                                store.dispatch(actionCartDelete({_id, name, price}));
                            } else {
                            store.dispatch(actionCartChange({_id, name, price}, count-1));
                            }
                            document.location.hash = `#/cart/${_id}/${count}`
                        }
                        buttonPlus.onclick = () => {
                            store.dispatch(actionCartChange({_id, name, price}, count+1));
                            document.location.hash = `#/cart/${_id}/${count}`
                        }
                        buttonDel.onclick = () => {
                            store.dispatch(actionCartDelete({_id, name, price}));
                            document.location.hash = `#/cart/${_id}`;
                        }
    
                        const trEl = document.createElement("tr");
                        const td1El = document.createElement("td");
                        const td2El = document.createElement("td");
                        const td3El = document.createElement("td");
                        const td4El = document.createElement("td");
                        const td5El = document.createElement("td");
                        td1El.append(buttonDel);
                        td2El.innerText = name;
                        td3El.innerText = price;
                        td4El.innerText = count;
                        td5El.append(buttonMinus,buttonPlus);
                        trEl.append(td1El,td2El,td3El,td4El,td5El);
                        tableCartEl.append(trEl);
    
                        totalScore+=price*count;
                        totalCount+=count;
                        
                    }
                    const trEl = document.createElement("tr");
                    const td1El = document.createElement("td");
                    const td2El = document.createElement("td");
                    const td3El = document.createElement("td");
                    const td4El = document.createElement("td");
                    const td5El = document.createElement("td");
                    td1El.innerText = "";
                    td2El.innerText = "";
                    td3El.innerText = totalScore;
                    td4El.innerText = totalCount;
                    td5El.innerText = "";
                    trEl.append(td1El,td2El,td3El,td4El,td5El);
                    tableCartEl.append(trEl);
                
                }
                
                main.append(tableCartEl);
    
                const buttonCartClear = document.createElement("button");
                const buttonSend = document.createElement("button");
                const buttonHistory = document.createElement("button");
                buttonSend.innerText = "Отправить заказ";
                buttonCartClear.innerText = "Очистить корзину";
                buttonHistory.innerText = "История заказов";
                buttonSend.onclick = () => {
                    store.dispatch(actionOrder());
                    
                }
                buttonCartClear.onclick = () => {
                    store.dispatch(actionCartClear());
                    document.location.hash = "#/cart/";
                }
                buttonHistory.onclick = () => {
                    document.location.hash = "#/dashboard";
                }

                main.append(buttonSend,buttonCartClear, buttonHistory);
            } else {
                main.innerHTML = `<h2>Ваша корзина пуста...</h2><a href="#/dashboard">история заказов</a>`;
            }

        },
    }
    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} = catById.payload 
        main.innerHTML = `<h1>${name}</h1>`

    if (catById.payload.subCategories) {
        for (const {_id, name} of catById.payload.subCategories){
            const card      = document.createElement('div')
            card.innerHTML = `<a href="#/category/${_id}"><h2>${name}</h2></a>`;
            main.append(card);
        }
    }
    for (const {_id, name, price, images} of catById.payload.goods){
        const card      = document.createElement('div')
        card.innerHTML = `<h2>${name}</h2>
                            <img src="${backendURL}/${images[0].url}" /><br>
                            <strong>Цена: ${price} грн</strong><br>
                            <button onclick="store.dispatch(actionCartAdd({_id: '${_id}',
                                        name: '${name}', price: '${price}'}))">Купить</button>
                            <a href="#/good/${_id}">описание товара</a>`
        main.append(card)
    }

    }
})

store.subscribe(() => {
const {goodById} = store.getState().promise;
const [,route, _id] = location.hash.split('/');
    //ТУТ ДОЛЖНА БЫТЬ ПРОВЕРКА НА НАЛИЧИЕ goodById в редакс
    //и проверка на то, что сейчас в адресной строке адрес ВИДА #/good/АЙДИ
    //в таком случае очищаем main и рисуем информацию про товар с подробностями
    if (goodById?.payload && route === 'good'){
        const {_id, name, price, description, images} = goodById.payload; 
        main.innerHTML = `<h2>${name}</h2>`;
        const card      = document.createElement('div');
        card.innerHTML = `<img src="${backendURL}/${images[0].url}" /><br>
                              <strong>Цена: ${price} грн</strong><br>
                              <button onclick="store.dispatch(actionCartAdd({_id: '${_id}',
                                            name: '${name}', price: '${price}'}))">Купить</button>
                                <p>Описание товара:</p>
                                <p>${description}</p>
                                `
        main.append(card);
    }
})

store.subscribe(() => {
const {cart} = store.getState();
// console.log(cart);
let numInCart = 0;
if (Object.entries(cart).length>0) {
    for (let [key, value] of Object.entries(cart)) {
        const {count} = value;
        numInCart+=count;
    }
}
cartEl.innerText=numInCart;
    //достаем всю корзину
    //считаем общее количество всех позиций (3 айфона + 7 пицц = 10)
    //выводим число в кошик на странице через его HTML id
});

store.subscribe(() => {
    const {auth} = store.getState();
    // const [,route,] = location.hash.split('/');
    if(Object.keys(auth).length!==0) {
        username = auth?.payload.sub.login;
    }
    if(localStorage.authToken) {
        // console.log("login");
        loginEl.innerText = "";
        logoEl.innerHTML = `\n                <h1>${username}, добро пожаловать в интернет магазин NotРОЗЕТКА</h1>\n            `
    } else {
        // console.log("logout");
        loginEl.innerText = "?";
        logoEl.innerHTML = `\n                <h1>Добро пожаловать в интернет магазин</h1>\n            `  
    }
});

//store.dispatch(actionPromise('delay1000', delay(1000)))
//store.dispatch(actionPromise('delay2000', delay(2000)))
//store.dispatch(actionPromise('failedfetch', fetch('https://swapi.dev/api/people/1/')
  //.then(res => res.json())))

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

    if (history?.payload && route === 'dashboard'){  

        main.innerHTML = "<p><b>История ваших заказов:</b></p>";
        const card      = document.createElement('div'); 
        
        for(let [key,value] of Object.entries(history.payload)) {
            const {_id, createdAt, total, orderGoods} = value;
            const p1El = document.createElement("p");
            const dateOfOrder = new Date(+createdAt);
            p1El.innerHTML = `${dateOfOrder.toLocaleDateString()} ${dateOfOrder.toLocaleTimeString()}
                            Заказ ID: ${_id} от , c ${orderGoods.length} товарами на сумму ${total} грн`;
            card.append(p1El); 
        }
        
        if (Object.keys(history.payload).length==0) {
            const p1El = document.createElement("p");
            p1El.innerHTML = "<p>Вы раньше еще ничего не заказывали</p>";
            card.append(p1El);
        }
        main.append(card);

    }
    
});

function alerting() {
    const {auth} = store.getState();
    if(Object.keys(auth).length!==0) {
        username = auth?.payload.sub.login;
    }
    if(username) {
        alert(`${username}, вы успешно зашли на сайт!`);
        document.location.hash = "#/category/5dc49f4d5df9d670df48cc64";
        
    } else {
        alert("Вы ввели неправильно логин или пароль!");
    }
}

function alertingReg(id, login) {
    if(id) {
        alert(`Вы успешно зарегистрировались с логином ${login}`);
    } else {
        alert(`Логин ${login} уже занят, придумайте другой!`);
    }
}