123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525 |
- 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))
- )
- 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 jwtDecode(token) {
- try {
- return JSON.parse(atob(token.split('.')[1]))
- }
- catch (e) {
- }
- }
- function authReducer(state = {}, { type, token }) {
- if (type === "AUTH_LOGIN") {
- const payload = jwtDecode(token)
- if (payload) {
- return {
- token, payload
- }
- }
- }
- if (type === "AUTH_LOGOUT") {
- return {}
- }
- return state
- }
- const actionAuthLogin = (token) =>
- (dispatch, getState) => {
- const oldState = getState()
- dispatch({ type: "AUTH_LOGIN", token })
- const newState = getState()
- if (oldState !== newState) {
- localStorage.setItem('authToken', token);
- }
- }
- const actionAuthLogout = () =>
- dispatch => {
- dispatch({ type: "AUTH_LOGOUT" })
- localStorage.removeItem('authToken')
- }
- function promiseReducer(state = {}, { type, name, status, payload, error }) {
- ////?????
- //ОДИН ПРОМИС:
- //состояние: PENDING/FULFILLED/REJECTED
- //результат
- //ошибка:
- //{status, payload, error}
- //{
- // name1:{status, payload, error}
- // name2:{status, payload, error}
- // name3:{status, payload, error}
- //}
- if (type === 'PROMISE') {
- //if (name == 'login' && status == 'FULFILLED') {
- // store.dispatch(actionAuthLogin(payload.data.login))
- // state = store.getState();
- //}
- return {
- ...state,
- [name]: { status, payload, error }
- }
- }
- return state;
- }
- const actionPending = (name) => ({ type: 'PROMISE', status: 'PENDING', name })
- const actionFulfilled = (name, payload) => ({ type: 'PROMISE', status: 'FULFILLED', name, payload })
- const actionRejected = (name, error) => ({ type: 'PROMISE', status: 'REJECTED', name, error })
- const actionPromise = (name, promise) =>
- async (dispatch) => {
- try {
- dispatch(actionPending(name))
- let payload = await promise
- dispatch(actionFulfilled(name, payload))
- if (name === 'login') {
- store.dispatch(actionAuthLogin(payload.data.login))
- }
- return payload
- }
- catch (e) {
- console.log(e);
- dispatch(actionRejected(name, e))
- }
- }
- function cartReducer(state = {}, { type, count = 1, good }) {
- // type CART_ADD CART_REMOVE CAT_CLEAR CART_DEC
- // {
- // id1: {count: 1, good{name, price, images, id}, total: price}
- // }
- if (type === "CART_ADD") {
- return {
- ...state,
- [good._id]: { count: count + (state[good._id]?.count || 0), good }
- }
- }
- if (type === "CART_CLEAR") {
- return {}
- }
- if (type === "CART_REMOVE") {
- let newState = { ...state }
- delete newState[good._id]
- return newState
- }
- if (type === "CART_DELETE") {
- if (state[good._id].count > 1) {
- return {
- ...state, [good._id]: { count: -count + (state[good._id]?.count || 0), good },
- };
- }
- }
- return state
- }
- const cartAdd = (good, count = 1) => ({ type: 'CART_ADD', good, count })
- const cartClear = () => ({ type: 'CART_CLEAR' })
- const cartRemove = (good) => ({ type: 'CART_REMOVE', good })
- const cartDelete = (good) => ({ type: 'CART_DELETE', good })
- /* store.dispatch({type: "CART_ADD", good: {_id: "чипсы"}}) ПРОБНЫЙ СТОР!!! */
- const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms))
- function combineReducers(reducers) {
- function combinedReducer(combinedState = {}, action) {
- const newCombinedState = {}
- for (const [reducerName, reducer] of Object.entries(reducers)) {
- const newSubState = reducer(combinedState[reducerName], action)
- if (newSubState !== combinedState[reducerName]) {
- newCombinedState[reducerName] = newSubState
- }
- }
- if (Object.keys(newCombinedState).length === 0) {
- return combinedState
- }
- return { ...combinedState, ...newCombinedState }
- }
- return combinedReducer
- }
- const store = createStore(
- combineReducers({ auth: authReducer, promise: promiseReducer, cart: cartReducer })
- ) //не забудьте combineReducers если он у вас уже есть
- const enterLogin = document.getElementById('enterLogin')
- const outLogin = document.getElementById('outLogin')
- const enterLogout = document.getElementById('enterLogout')
- const loginContainer = document.getElementById('mainLoginContainer')
- const enterCart = document.getElementById('enterCart')
- const cartContainer = document.getElementById('cartContainer')
- const leaveCart = document.getElementById('closeCart')
- const cartProductsContainer = document.getElementById('cartProductsContainer')
- const enterRegister = document.getElementById('enterRegister')
- const registerContainer = document.getElementById('registerContainer')
- const hideLogin = document.getElementById('hideLogin')
- const outRegister = document.getElementById('outRegister')
- if (localStorage.authToken) {
- store.dispatch(actionAuthLogin(localStorage.authToken))
- enterLogin.style.display = 'none';
- enterCart.style.display = 'block'
- enterLogout.style.display = 'block';
- }
- //const store = createStore(combineReducers({promise: promiseReducer, auth: authReducer, cart: cartReducer}))
- store.subscribe(() => console.log(store.getState()))
- const gql = (url, query, variables) => fetch(url, {
- method: 'POST',
- headers: {
- "Content-Type": "application/json",
- Accept: "application/json",
- },
- body: JSON.stringify({ query, variables })
- }).then(res => res.json())
- const backendURL = 'http://shop-roles.node.ed.asmer.org.ua'
- const graphQLBackendUrl = `${backendURL}/graphql`
- const actionRootCats = () =>
- actionPromise('rootCats', gql(graphQLBackendUrl, `query {
- CategoryFind(query: "[{\\"parent\\":null}]"){
- _id name
- }
- }`))
- const actionCatById = (_id) => //добавить подкатегории
- actionPromise('catById', gql(graphQLBackendUrl, `query categoryById($q: String){
- CategoryFindOne(query: $q){
- _id name goods {
- _id name price images {
- url
- }
- }
- }
- }`, { q: JSON.stringify([{ _id }]) }))
- const actionGoodById = (_id) =>
- actionPromise('goodById', gql(graphQLBackendUrl, `query goodById($q: String){
- GoodFindOne(query: $q){
- _id name description price
- }
- }`, { q: JSON.stringify([{ _id }]) }))
- const actionLogin = (login, password) =>
- actionPromise('login', gql(graphQLBackendUrl,
- `query log($login: String, $password: String){
- login(login:$login, password: $password)
- }`
- , { login, password }))
- const actionRegister = (login, password) =>
- actionPromise(
- "register",
- gql(graphQLBackendUrl,
- `mutation register($login: String, $password: String) {
- UserUpsert(user: {login: $login, password: $password}) {
- _id
- login
- }
- }`,
- { login: login, password: password }
- )
- )
- store.dispatch(actionRootCats())
- /* const actionEnterLogin = () */
- enterLogin.onclick = () => {
- return loginContainer.style.display = 'block'
- }
- outLogin.onclick = () => {
- return loginContainer.style.display = 'none'
- }
- enterLogout.onclick = () => {
- store.dispatch(actionAuthLogout())
- }
- enterRegister.onclick = () => {
- return hideLogin.style.display = 'none', registerContainer.style.display = 'block'
- }
- outRegister.onclick = () => {
- return hideLogin.style.display = 'block', registerContainer.style.display = 'none'
- }
- const updateCartInfo = () => {
- cartProductsContainer.innerHTML = '';
- cartContainer.style.display = 'block';
- const cart = store.getState().cart;
- const ul = document.createElement('ul')
- cartProductsContainer.append(ul)
- const clearFromCartButton = document.createElement('button')
- clearFromCartButton.innerHTML = "Очистить"
- clearFromCartButton.onclick = () => { store.dispatch(cartClear()) }
- cartProductsContainer.append(clearFromCartButton)
- const buyGoods = document.createElement('button')
- buyGoods.innerHTML = "Купить"
- buyGoods.onclick = () => { store.dispatch(cartClear()), alert('Спасибо за покупку!') }
- cartProductsContainer.append(buyGoods)
- for (const [key, value] of Object.entries(cart)) {
- const li = document.createElement('li')
- const a = document.createElement('a')
- const removeFromCartButton = document.createElement('button')
- removeFromCartButton.innerText = "-"
- removeFromCartButton.onclick = () => { store.dispatch(cartRemove(value.good)) }
- a.innerHTML = value.good.name;
- ul.append(li)
- li.append(a)
- if (value.good.images) {
- for (let i = 0; i < value.good.images.length; i++) {
- const imgElement = document.createElement('img')
- imgElement.src = `${backendURL}/${value.good.images[i].url}`;
- imgElement.style.height = '100px';
- imgElement.style.width = '200px';
- li.append(imgElement)
- }
- }
- ul.append(removeFromCartButton)
- if (value.count > 1) {
- const deleteFromCartButton = document.createElement('button')
- deleteFromCartButton.innerHTML = "-1"
- deleteFromCartButton.onclick = () => { store.dispatch(cartDelete(value.good)) }
- ul.append(deleteFromCartButton)
- }
- const allCountElement = document.createElement('p');
- allCountElement.innerHTML = `Total: ${value.count}`;
- ul.append(allCountElement)
- }
- };
- enterCart.onclick = () => {
- updateCartInfo();
- }
- leaveCart.onclick = () => {
- cartProductsContainer.innerHTML = '';
- cartContainer.style.display = 'none';
- }
- const loginBtn = document.getElementById('loginBtn')
- loginBtn.onclick = handleLogin
- function handleLogin() {
- let userName = document.getElementById('inputUserName')
- let userPassword = document.getElementById('inputPassword')
- store.dispatch(actionLogin(userName.value, userPassword.value));
- outLogin.click();
- }
- const registerBtn = document.getElementById('registerBtn');
- registerBtn.onclick = handleRegister
- function handleRegister() {
- let userName = document.getElementById('inputUserNameRegister')
- let userPassword = document.getElementById('inputPasswordRegister')
- store.dispatch(actionRegister(userName.value, userPassword.value));
- return hideLogin.style.display = 'block', registerContainer.style.display = 'none'
- outLogin.click();
- }
- /* store.dispatch(actionLogin('levshin95', '123123')) */
- store.subscribe(() => {
- if (cartContainer.style.display === 'block' && store.getState().cart) {
- updateCartInfo();
- }
- })
- store.subscribe(() => {
- const rootCats = store.getState().promise.rootCats?.payload?.data.CategoryFind
- if (!rootCats) {
- aside.innerHTML = '<img src="Loading_icon.gif">'
- } else {
- aside.innerHTML = ''
- const ul = document.createElement('ul')
- aside.append(ul)
- for (let { _id, name } of rootCats) {
- const li = document.createElement('li')
- const a = document.createElement('a')
- a.href = "#/category/" + _id
- a.innerHTML = name
- ul.append(li)
- li.append(a)
- }
- }
- })
- const displayCategory = function () {
- const catById = store.getState().promise.catById?.payload?.data.CategoryFindOne
- const [, route] = location.hash.split('/')
- if (catById && route === 'category') {
- const { name, goods, _id } = catById
- categories.innerHTML = `<h1>${name}</h1>`
- const ul = document.createElement('ul')
- categories.append(ul)
- for (let good of goods) {
- const li = document.createElement('li')
- const a = document.createElement('a')
- a.href = "#/good/" + good._id
- a.innerHTML = good.name
- ul.append(li)
- li.append(a)
- if (good.images) {
- for (let i = 0; i < good.images.length; i++) {
- const imgElement = document.createElement('img')
- imgElement.src = `${backendURL}/${good.images[i].url}`;
- imgElement.style.height = '100px';
- imgElement.style.width = '200px';
- li.append(imgElement)
- }
- }
- const authToken = store.getState().auth?.token;
- if (authToken) {
- const addToCartButton = document.createElement('button')
- addToCartButton.innerText = "+"
- addToCartButton.onclick = () => { store.dispatch(cartAdd(good, 1)) }
- ul.append(addToCartButton)
- }
- }
- }
- }
- store.subscribe(() => {
- const authToken = store.getState().auth?.token;
- if (!authToken) {
- enterLogout.style.display = 'none';
- enterCart.style.display = 'none';
- enterLogin.style.display = 'block';
- displayCategory();
- } else {
- enterLogin.style.display = 'none';
- enterCart.style.display = 'block';
- enterLogout.style.display = 'block';
- displayCategory();
- /* alert(`Hello, ${store.getState().auth?.payload?.sub?.login}`); */
- }
- })
- store.subscribe(() => {
- displayCategory();
- })
- store.subscribe(() => {
- const goodById = store.getState().promise.goodById?.payload?.data.GoodFindOne
- const [, route] = location.hash.split('/')
- if (goodById && route === 'good') {
- const { name, description, _id, price, images } = goodById
- categories.innerHTML = `<h1>${name}</h1>`
- const strongPrice = document.createElement('b')
- const div = document.createElement('div')
- categories.appendChild(div)
- categories.appendChild(strongPrice)
- categories.appendChild(strongPrice)
- div.innerText = description
- strongPrice.innerHTML = price
- }
- })
- store.subscribe(() => { })
- /* store.subscribe(() => {
- const goodById = store.getState().promise.goodById?.payload?.data.CategoryFindOne
- const [,route] = location.hash.split('/')
- if (catById && route === 'good') {
- const {name, goods, _id} = catById
- categories.innerHTML = `<h1>${name}</h1>`
- // нарисовать картинки, описание, цену и т.д.
- }
- }) */
- window.onhashchange = () => {
- const [, route, _id] = location.hash.split('/')
- console.log(route, _id)
- const routes = {
- category() {
- store.dispatch(actionCatById(_id))
- },
- good() {
- store.dispatch(actionGoodById(_id))
- },
- login() {
- console.log('Тут надо нарисовать форму логина. по нажатию кнопки в ней - задиспатчить actionFullLogin')
- },
- register() {
- console.log('Тут надо нарисовать форму логина/регистрации. по нажатию кнопки в ней - задиспатчить actionFullRegister')
- }
- }
- if (route in routes) {
- routes[route]()
- }
- }
- window.onhashchange()
|