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 = `
Описание товара:
${description}
` 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История ваших заказов:
"; 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 = "Вы раньше еще ничего не заказывали
"; 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} уже занят, прыдумайте другой!`); } }