|
@@ -1,288 +0,0 @@
|
|
|
-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 jwtDecode(token){
|
|
|
- try {
|
|
|
- return JSON.parse(atob(token.split('.')[1]))
|
|
|
- }
|
|
|
- catch(e){
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function authReducer(state={}, {type, token}){
|
|
|
- //{
|
|
|
- // token, payload
|
|
|
- //}
|
|
|
-
|
|
|
- if (type === 'AUTH_LOGIN'){
|
|
|
- //пытаемся токен раскодировать
|
|
|
- const payload = jwtDecode(token)
|
|
|
- if (payload){ //и если получилось
|
|
|
- return {
|
|
|
- token, payload //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.authToken = token
|
|
|
- }
|
|
|
-
|
|
|
-const actionAuthLogout = () =>
|
|
|
- dispatch => {
|
|
|
- dispatch({type: 'AUTH_LOGOUT'})
|
|
|
- localStorage.removeItem('authToken')
|
|
|
- }
|
|
|
-
|
|
|
-const actionGoodById = _id =>
|
|
|
- actionPromise('goodById', gql(backendURL,`query goodByID($id: String) {
|
|
|
- GoodFindOne(query: $id) {
|
|
|
- _id
|
|
|
- name
|
|
|
- description
|
|
|
- price
|
|
|
- images {
|
|
|
- url
|
|
|
- }
|
|
|
- owner {
|
|
|
- nick
|
|
|
- avatar {
|
|
|
- url
|
|
|
- text
|
|
|
- }
|
|
|
- }
|
|
|
- categories {
|
|
|
- name
|
|
|
- subCategories {
|
|
|
- name
|
|
|
- goods {
|
|
|
- name
|
|
|
- price
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}`, {"id": JSON.stringify([{_id}])}))
|
|
|
-
|
|
|
-
|
|
|
-function promiseReducer(state = {}, { type, name, status, payload, error }) {
|
|
|
- if (type === "PROMISE") {
|
|
|
- return {
|
|
|
- ...state, //.......скопировать старый state
|
|
|
- [name]: { status, payload, error }, //....... перекрыть в нем один 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))
|
|
|
- return payload
|
|
|
- }
|
|
|
- catch(e){
|
|
|
- dispatch(actionRejected(name, e))
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
-
|
|
|
-
|
|
|
-function combineReducers(reducers){ //пачку редьюсеров как объект {auth: authReducer, promise: promiseReducer}
|
|
|
- function combinedReducer(combinedState={}, action){ //combinedState - типа {auth: {...}, promise: {....}}
|
|
|
- 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 //нам возвращают один редьюсер, который имеет стейт вида {auth: {...стейт authReducer-а}, promise: {...стейт promiseReducer-а}}
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const store = createStore(combineReducers({auth: authReducer, promise: promiseReducer})) //не забудьте combineReducers если он у вас уже есть
|
|
|
-if (localStorage.authToken){
|
|
|
- store.dispatch(actionAuthLogin(localStorage.authToken))
|
|
|
-}
|
|
|
-//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 url = 'http://shop-roles.node.ed.asmer.org.ua'
|
|
|
-const backendURL = 'http://shop-roles.node.ed.asmer.org.ua/graphql'
|
|
|
-
|
|
|
-const actionRootCats = () =>
|
|
|
- actionPromise('rootCats', gql(backendURL, `query {
|
|
|
- CategoryFind(query: "[{\\"parent\\":null}]"){
|
|
|
- _id name
|
|
|
- }
|
|
|
- }`))
|
|
|
-const actionCatById = (_id) => //добавить подкатегории
|
|
|
- actionPromise('catById', gql(backendURL, `query catById($q: String){
|
|
|
- CategoryFindOne(query: $q){
|
|
|
- _id name goods {
|
|
|
- _id name price images {
|
|
|
- url
|
|
|
- }
|
|
|
- }
|
|
|
- subCategories {
|
|
|
- name
|
|
|
- _id
|
|
|
- }
|
|
|
- }
|
|
|
- }`, {q: JSON.stringify([{_id}])}))
|
|
|
-
|
|
|
-
|
|
|
-const actionLogin = (login, password) =>
|
|
|
- actionPromise('login', gql(backendURL,`query log($login:String, $password:String){
|
|
|
- login(login:$login, password:$password)
|
|
|
- }`, {login, password}))
|
|
|
-
|
|
|
-store.dispatch(actionRootCats())
|
|
|
-store.dispatch(actionLogin('test456', '123123'))
|
|
|
-
|
|
|
-//show root categories aside
|
|
|
-store.subscribe( () => {
|
|
|
- const rootCats = store.getState().promise.rootCats?.payload?.data.CategoryFind
|
|
|
- if (rootCats){
|
|
|
- aside.innerHTML = ''
|
|
|
- for (let {_id, name} of rootCats){
|
|
|
- const a = document.createElement('a')
|
|
|
- a.href = `#/category/${_id}`
|
|
|
- a.innerHTML = name
|
|
|
- aside.append(a)
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// store.subscribe(() => {
|
|
|
-// const catById = store.getState().catById?.payload?.data.CategoryFindOne
|
|
|
-// })
|
|
|
-
|
|
|
-//cards showing
|
|
|
-store.subscribe( () => {
|
|
|
- let {catById} = store.getState().promise;
|
|
|
- const [,route, _id] = location.hash.split('/')
|
|
|
-let subCats = catById.payload?.data.CategoryFindOne.subCategories
|
|
|
-
|
|
|
- if(catById?.status === 'PENDING') { // if pending, show loading gif
|
|
|
- main.innerHTML = `<img src="Loading_icon.gif">`
|
|
|
- } else if(catById?.payload && route === 'category'){ // if pending stopped
|
|
|
- main.innerHTML = ''
|
|
|
- const {name, id, goods} = catById.payload?.data.CategoryFindOne
|
|
|
- main.innerHTML = `<h1>${name}</h1>`
|
|
|
-
|
|
|
- if(subCats.length > 0) {
|
|
|
- for(let sub of subCats) {
|
|
|
- console.log(sub)
|
|
|
- let subCat = document.createElement('a')
|
|
|
- subCat.text = sub.name
|
|
|
- subCat.href = `#/category/${sub._id}`
|
|
|
- main.append(subCat)
|
|
|
- }
|
|
|
- }
|
|
|
- // ask about showing subcats
|
|
|
- console.log(store.getState().promise)
|
|
|
- for(let good of goods) {
|
|
|
- let {name, price, images} = good
|
|
|
- let card = document.createElement('div')
|
|
|
- card.className = 'card'
|
|
|
- let cardBody = document.createElement('div')
|
|
|
- let title = document.createElement('p')
|
|
|
- title.className = 'title'
|
|
|
- let img = document.createElement('img')
|
|
|
- let desc = document.createElement('p')
|
|
|
- let cardPrice = document.createElement('p')
|
|
|
- title.innerHTML = name;
|
|
|
- // img.src = `${url}/${images[0].url}` //ACTIVATE THIS CODE AFTER FINISHING
|
|
|
- cardPrice.innerHTML = `${price} UAH`
|
|
|
- cardBody.append(title, desc, cardPrice) //ADD IMG
|
|
|
- card.append(cardBody)
|
|
|
- main.append(card);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-});
|
|
|
-//SHOW GOOD
|
|
|
-store.subscribe(() => {
|
|
|
- // console.log(store.getState().promise)
|
|
|
- let {goodById} = store.getState().promise
|
|
|
-})
|
|
|
-
|
|
|
-window.onhashchange = () => {
|
|
|
- const [,route, _id] = location.hash.split('/')
|
|
|
- const routes = {
|
|
|
- category(){
|
|
|
- store.dispatch(actionCatById(_id))
|
|
|
- },
|
|
|
- good(){
|
|
|
- store.dispatch(actionGoodById(_id));
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(route)
|
|
|
- if (route in routes) {
|
|
|
- routes[route]()
|
|
|
- }
|
|
|
- routes.good()
|
|
|
- console.log(route)
|
|
|
-}
|
|
|
-
|
|
|
-window.onhashchange()
|
|
|
-
|