Homework/js/22_react/shop/src/App.js

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'

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 state
  }
  if (type === 'AUTH_LOGOUT') {
      localStorage.removeItem('authToken')
      return {}
  }
  return state
}

const jwtDecode = token => {
  try {
      let arrToken = token.split('.')
      let base64Token = atob(arrToken[1])
      return JSON.parse(base64Token)
  }
  catch (e) {
      console.log('Лажа, Бро ' + e);
  }
}
const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token })
const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })



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


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) => ({type: 'CART_ADD', good, count})
const actionCartChange = (good, count) => ({type: 'CART_CHANGE', good, count})
const actionCartRemove = (good) => ({type: 'CART_REMOVE', good})
const actionCartClear = () => ({type: 'CART_CLEAR'})



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 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 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 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}) => (
  <a href='#' className="Logo">
      <img src={logo} />
  </a>
)

const Koshik = ({cart}) => {
  let count = 0;
  console.log(cart)
  let sum = Object.entries(cart).map(([, val]) => val.count)
  count = sum.reduce((a, b) => a + b, 0)
  return (
      <div className='Koshik'>{count}</div>
  )
}

const CKoshik = connect(({cart}) => ({cart}))(Koshik)


const Header = ({logo=logoDefault}) => (
  <header>
      <CKoshik />
      <Logo logo={logo} />
  </header>
)


const defaultRootCats = [
  {_id: '5dc49f4d5df9d670df48cc64', name: 'Airconditions'},
  {_id: '5dc458985df9d670df48cc47', name: '     Smartphones'},
  {_id: '5dc4b2553f23b553bf354101', name: 'Крупная бытовая техника'},
  {_id: '5dcac1b56d09c45440d14cf8', name: 'Макароны'},
  {_id: '5dcac6cf6d09c45440d14cfd', name: 'Drinks'},
  {_id: '5dcacaeb6d09c45440d14d04', name: 'Салаты'},
  {_id: '61715b92ef4e1b3e3b67703c', name: 'Приятный бонус'},
]

const RootCategory = ({cat:{_id, name}={}}) => (
  <li>
    <a href={`#/category/${_id}`}>{name}</a>
  </li>
)

const RootCategories = ({cats=defaultRootCats}) => (
  <ul className='RootCategories'>
    {cats.map(cat => <RootCategory cat={cat}/>)}
  </ul>
)

const CRootCategories = connect(state => ({cats: state.promise.rootCats?.payload || []}))(RootCategories)


const Aside = ({}) => (
  <aside>
      <CRootCategories/>
  </aside>
)

const Content = ({children}) => (
<div className='Content'>
    {children}
</div>
)

const SubCategories = ({cats}) => (
<></>
)

const GoodCard = ({good:{_id, name, price, images}={}, onCartAdd}) =>
<div className='GoodCard'>
    <h2>{name}</h2>
    {images && images[0] && images[0].url && <img src={backURL + '/' + images[0].url} />}
    <strong>{price}</strong>
    <button onClick={() => onCartAdd({_id, name, price, images})}>+</button>
</div>

const CGoodCard = connect(null, {onCartAdd: actionCartAdd})(GoodCard)

const Category = ({cat:{_id, name, goods, subCategories}}) => (
  <div className="Category">
    <h1>{name}</h1>
    {subCategories && <SubCategories cats={subCategories}/>}
    {(goods || []).map(good => <CGoodCard good={good}/>)}
  </div>
)

const CCategory = connect(state => ({cat: state.promise.catById?.payload || []}))(Category)


const Main = ({}) => (
  <main>
      <Aside />
      <Content>
        <CCategory/>
      </Content>
  </main>
)

const Footer = ({logo=logoDefault}) => (
  <footer>
      <Logo logo={logo} />
  </footer>
)



const JSONTest = ({data}) => (
  <pre>
    {JSON.stringify(data, null, 4)}
    {Math.random() > 0.5 ? <h1>qqqqqq</h1> : <h2>qq</h2>}
    {Math.random() > 0.5 && <h1>zzzz</h1>}
  </pre>
)

const ReduxJSON = connect(state => ({data: state}))(JSONTest)


const ListItem = ({item}) => (
  <li>{item}</li>
)


const List = ({data=["пиво", "чипсы", "сиги",]}) => (
  <ul>
    {/* {[  <ListItem item={data[0]}/>,
        <ListItem item={data[1]}/>,
        <ListItem item={data[2]}/>  
    ]} */}
    {data.map(item => <ListItem item={item}/>)}
  </ul>
)




function App() {
  return (
    <Provider store={store}> 
      <div className="App">
        <Header />
        <Main />
        {/* <List /> */}
        {/* <JSONTest data={[1,2,{a:5}]} /> */}
        {/* <ReduxJSON /> */}
        <Footer />
      </div>
    </Provider>
  );
}

export default App;