import React, {useState, useEffect, useRef} from 'react'
import logoDefault from './logo.svg';
import './App.scss';
import {Provider, connect} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
const jwtDecode = token => {
try {
let arrToken = token.split('.')
let base64Token = atob(arrToken[1])
return JSON.parse(base64Token)
}
catch (e) {
console.log('Лажа, Бро ' + e);
}
}
function authReducer(state, { type, token }) {
if (!state) {
if (localStorage.authToken) {
type = 'AUTH_LOGIN'
token = localStorage.authToken
} else state = {}
}
if (type === 'AUTH_LOGIN') {
localStorage.setItem('authToken', token)
let payload = jwtDecode(token)
if (typeof payload === 'object') {
return {
...state,
token,
payload
}
} else return {}
}
if (type === 'AUTH_LOGOUT') {
localStorage.removeItem('authToken')
return {}
}
return state
}
const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
function cartReducer(state = {}, { type, good = {}, count = 1 }) {
const { _id } = good
const types = {
CART_ADD() {
count = +count
if (!count) return state
return {
...state,
[_id]: {
good,
count: count + (state[_id]?.count || 0)
}
}
},
CART_CHANGE() {
count = +count
if (!count) return state
return {
...state,
[_id]: {
good,
count: count
}
}
},
CART_REMOVE() {
let { [_id]: remove, ...newState } = state
return {
...newState
}
},
CART_CLEAR() {
return {}
},
}
if (type in types) {
return types[type]()
}
return state
}
const actionCartAdd = (good, count=1) => ({type: "CART_ADD", good, count});
function promiseReducer(state = {}, { type, status, payload, error, name }) {
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))
try {
let data = await promise
dispatch(actionResolved(name, data))
return data
}
catch (error) {
dispatch(actionRejected(name, error))
}
}
const getGQL = url =>
async (query, variables = {}) => {
let obj = await fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/json",
Authorization: localStorage.authToken ? 'Bearer ' + localStorage.authToken : {},
},
body: JSON.stringify({ query, variables })
})
let a = await obj.json()
if (!a.data && a.errors)
throw new Error(JSON.stringify(a.errors))
return a.data[Object.keys(a.data)[0]]
}
const backURL = 'http://shop-roles.asmer.fs.a-level.com.ua'
const gql = getGQL(backURL + '/graphql');
const actionLogin = (login, password) => (
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 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}
_id name goods {
_id name price images {
url
}
}
}
}`, { q: JSON.stringify([{ _id }]) }))
const store = createStore(combineReducers({promise: promiseReducer,
auth: authReducer,
cart: cartReducer}),
applyMiddleware(thunk))
store.subscribe(() => console.log(store.getState()))
store.dispatch(actionRootCats())
store.dispatch(actionCatById('5dc49f4d5df9d670df48cc64'))
const Logo = ({logo=logoDefault}) =>
const Koshik = ({cart}) => {
let count = 0;
let sum = Object.entries(cart).map(([, val]) => val.count)
count = sum.reduce((a, b) => a + b, 0)
//перебрать cart, посчитать суммарный count
return (
{JSON.stringify(data, null, 4)} {Math.random() > 0.5 &&const ReduxJSON = connect(state => ({data:state}))(JSONTest) const ListItem = ({item}) =>asdfasf
}