Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>authReducer</title>
	<style>
        #mainContainer{
			display:flex;
		}
		#aside{
			width: 30%;
		}
		#aside > a{
			display: block;
		}

		img{
			width:300px;
		}
		main{
			padding-left: 20px;
		}
		table{
			border:1px solid black;
		}
		td{
			text-align: center;
			border:1px solid black;
		}
    </style>
</head>
<body>

	<header>
            <div id="formId"></div>
            <div id="ownCab"></div>
        </header>
        <div id='mainContainer'>
            <aside id='aside'>
                Категории
            </aside>
            <main id='main'>
                Контент
            </main>
        </div>

        

	<input type="submit" value="click 1" id="btn1">
	<input type="submit" value="click 2" id="btn2">

	<script>
		
function createStore(reducer){
    let state       = reducer(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'){ 
            return action(dispatch, getState) 
        }
        const newState = reducer(state, action) 
        if (newState !== state){
            state = newState 
            for (let cb of cbs)  cb()
        }
    } 
    return {
        getState, 
        dispatch,
        subscribe 
    }
}

//----------------------------------------------------------------
		//написать jwtDecode = token =>({})
		const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2MWE0ZTA1MmM3NTBjMTJiYTZiYTQwMjkiLCJsb2dpbiI6InZsYWRCcmF1bjQiLCJhY2wiOlsiNjFhNGUwNTJjNzUwYzEyYmE2YmE0MDI5IiwidXNlciJdfSwiaWF0IjoxNjM4NTM5NTUzfQ.oPRus9nGS1rg69eKu8rK-tMi4V-hN5HXE0NOzAc5K4k";

		//выкусить из токена серединку 
		//сделать base64 декод (atob)
		//с результатом сделать JSON.parse
		const jwtDecode = token =>{
			try{
				let mid=token.split('.');
				let tok=mid[1];
				let tokenDecode=atob(tok);
				let finalTok=JSON.parse(tokenDecode);
				return finalTok;
			}catch(e){
				console.log(e);
			}
		}
		console.log(jwtDecode(token));

//------------------------------------------------------------
	function authReducer(state={},{type, token}){
		if(!state){
			if(localStorage.authToken){
				type="AUTH_LOGIN";
				token=localStorage.authToken;
			}else{
				return {};
			}
		}
		if(type==='AUTH_LOGIN'){
			//сохранить в localStorage token
			//вернуть {token, payload: jwtDecode}
			//если payload не обьект, то вернуть {}
			//вернуть {token, payload}
			localStorage.authToken=token;
			let payload=jwtDecode(token);
			if(typeof payload==='object'){
				return {
					token,
					payload
				}
			}else{
				return {};
			}
		}
		if(type==='AUTH_LOGOUT'){
			//удалить из localStorage token и вернуть {}
			delete localStorage.authToken;
			return {};
		}
		return state
	}

	const actionAuthLogin = token => ({type:'AUTH_LOGIN', token})
	const actionAuthLogout = () => ({type:'AUTH_LOGOUT'})

//---------------------------------------------------------------
	function combineReducers(reducers){
		return (state={},action)=>{
			let newState={};
			
			for(const [reducerName, reducer] of Object.entries(reducers)){
				let newSubState=reducer(state[reducerName],action);
				if(newSubState!==state[reducerName]){
					newState[reducerName]=newSubState;
				}
			}
			if(0 !==Object.keys(newState).length){
				return{
					...state,
					...newState
				}
			}else{
				return state;
			}
			//перебрать все редьюсеры
				//запустить каждый из них
				//передать при этом в него его Ветвь общего state и экшен как есть
				//получить newSubState
				//если newSubState отлиается от входящего, то записать newSubState в newState 
			//после цикла, если newState не пуст, то вернуть {...state, ...newState}
			//иначе вернуть old state
		}
	}

//-------------------------------------------------------------------------------
	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 payload = await promise
	      dispatch(actionResolved(name, payload))
	      return payload
	    }
	    catch (error) {
	      dispatch(actionRejected(name, error))
	    }
	  }

//------------------------------------------------------------------------------------------
	const combinedReducer= combineReducers({promise:promiseReducer,auth:authReducer});
	const store=createStore(combinedReducer)
	console.log(store.getState());
	//const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
	//store.dispatch(actionPromise('delay1000',delay(1000)))//{promise:{delay1000:''},auth:{}}
	//store.dispatch(actionAuthLogin(token))//{promise:{delay1000:''},auth:{token...}}
	

	/*let store=createStore(authReducer);
	store.subscribe(() => console.log(store.getState()));*/

	btn1.onclick = () => store.dispatch(actionAuthLogin(token));
	btn2.onclick = () => store.dispatch(actionAuthLogout());

	/*const actionLogin = (login,password) =>
		actionPromise('catById', gql('ЗАПРОС НА ЛОГИН', {login, password}))

	const actionFullLogin=(login, password) =>
		async dispatch=>{
			let token=await dispatch(actionLogin(login, password))
			if(token){
				dispatch(actionLogin(actionAuthLogin(token)))
			}
		}*/

//----------------------------------------------------------------------------------
// const actionRegister // actionPromise
// const actionFullLogin = (login, pasword) => //actionRegister + actionFullLogin
// + интерфейс к этому - форму логина, регистрации, может повесить это на #/login #/register
// + #/orders показывает Ваши бывшие заказы 
// сделать actionMyOrders

//-----------------------------------------------------------------------------------
    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.errors && !data.data)
			throw new Error(JSON.stringify(data.errors))
		return data.data[Object.keys(data.data)[0]]
	})

	const backURL='http://shop-roles.asmer.fs.a-level.com.ua'
	const gql=getGQL(backURL+'/graphql')

//------------------------------------------Actions------------------------------------------------
	const actionLogin = (login, password) => 
	  actionPromise('login', gql(`query login($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))
	      if(token) {
	          dispatch(actionAuthLogin(token))
	      }
	  }

	const actionRegister = (login, password) => 
	  actionPromise('register', gql(`mutation registration($login: String, $password:String) {
	    UserUpsert(user: {login: $login, 
	              password:$password, 
	              nick: $login}){
	      _id login
	    }
	  }`, {login: login, password: password})
	)

	const actionFullRegister = (login, password) => 
	  async dispatch => {
	      let log = await dispatch(actionRegister(login, password))
	      if (log) {
	        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) {
	    _id name goods{
	      _id name price description images {
	        url
	      }
	    }
	    subCategories {
	      name _id goods {
	        _id name description
	      }
	    }
	  }
	}`, { q: JSON.stringify([{ _id }]) }))

	const actionGoodById = (_id) =>
	  actionPromise('goodById', gql(`query goodById($q: String){
	        GoodFindOne(query: $q){
	            _id name description price images{
	                url
	            }
	        }
	    }`, { q: JSON.stringify([{ _id }]) }))

	store.dispatch(actionRootCats())

//--------------------front-------------------------------------------------
	store.subscribe(() => {
	  	const {promise} = store.getState()
	  	console.log('------------')
	  	console.log(promise)
	  	if (promise?.rootCats?.payload) {
	    	aside.innerHTML = ''
	    	for (const { _id, name } of promise?.rootCats?.payload) {
	      		const link = document.createElement('a')
	      		link.href = `#/category/${_id}`
	      		link.innerText = name
	      		aside.append(link)
	    	}
	  	}
	})

	store.subscribe(() => {
	  	const { promise } = store.getState()
	  	const [, route, _id] = location.hash.split('/')
	  	if (promise?.catById?.payload && route === 'category') {
	    	const { name } = promise.catById.payload
	    	main.innerHTML = `<h1>${name}</h1>`
	    	if (promise.catById.payload?.subCategories) {
	      		for (let {_id, name} of promise.catById.payload.subCategories) {
	        		const podCat = document.createElement('a')
	        		podCat.className = 'sub_cat'
	        		podCat.href = `#/category/${_id}`
	        		podCat.textContent = name
	       	 		main.append(podCat)
	      		}
	    	}
	    	for (const { _id, name, price, images } of promise.catById.payload.goods) {
	      		const card = document.createElement('div')
	      		card.innerHTML = `<h2>${name}</h2>
				            <img src="${backURL}/${images[0].url}"/>
				                <div>
				                    <b>Стоимость:</b> <b><sub>${price}UAH</sub></b>
				                    <br><a href=#/good/${_id}>Страница товара</a>
				                </div>`
	      		main.append(card)
	    	}
	  	}
	})
//-------------------opis tovara-------------------------------
	store.subscribe(() => {
	  	const {promise} = store.getState()
	 	const [, route, _id] = location.hash.split('/')
	  	if (promise?.goodById?.payload && route === 'good' && location.href.includes(`#/good/${_id}`)) {
	    	main.innerHTML = ``
	    	let {_id, name, price, images, description} = promise.goodById.payload
	      		let item = document.createElement('div')
	      		item.className = 'good_item'
	     		item.innerHTML =`<h2>${name}</h2>
				    <img src="${backURL}/${images[0].url}"/>
				    <div>
				       <p><b>Стоимость:</b> <b><sub>${price} UAH</sub></b></strong></p>
				       <p><b>Описание:</b> <sub>${description}</sub></p>
				    </div>`
	      	main.append(item)
	  	}
	})

//-----------------Orders------------------------------------------------
	const ActionMyOrders = () =>
	actionPromise('orderfind', gql(`query orderfind{
	    OrderFindOne(query:"[{}]"){
	    	_id createdAt total orderGoods{
	      		_id createdAt price count good{
	        		_id name description images{
	          			_id url
	        		}
	      		}
	    	}
	  	}
	}`))

	store.subscribe(() => {
	  	const {promise} = store.getState()
	  	const [,route, _id] = location.hash.split('/')
	 	if (promise?.orderfind?.payload && route === 'orders'){
	      	let counT = 0
	      	main.innerHTML = ''
	      	const {total, orderGoods} = promise.orderfind.payload
	      	let title = document.createElement('h2')
	      	title.textContent = 'Ваши заказы';
	      	title.className = 'title'
	      	let table = document.createElement('table')
	      	let tr = document.createElement('thead')
	      	tr.innerHTML = `<th>Дата заказа</th><th>Название</th><th>Количество</th><th>Цена</th>`
	      	table.append(tr)
	      	for (let {createdAt, count, good, price} of orderGoods){
	          	counT += count;
	          	let date = new Date(+createdAt).toLocaleDateString();
	          	let tr = document.createElement('tr')
	          	tr.innerHTML = `<td>${date}</td>
	          		<td><figure><img src="${backURL}/${good.images[0].url}"><figcaption>${good.name}</figcaption></figure></td>
	          		<td>${count}</td><td>${price}</td>`
	          	table.append(tr)
	      	}
	      	let tr2 = document.createElement('tr')
	      	tr2.innerHTML = `<th>Всего товаров в заказе: ${counT}</th><th>Общая сумма заказа: ${total}</th>`
	      	table.append(tr2)
	      	main.append(title, table)
	  	}else if(!promise?.orderfind?.payload && route === 'orders'){
	      	main.innerHTML = ''
	      	let title = document.createElement('h2')
	      	title.textContent = 'Вы еще не сделали заказ';
	      	main.append(title)
	  	}
	})

//-------------------Login-------------------------------------------------
	store.subscribe(() => {
	  	const {auth} = store.getState()
	  	const {payload} = auth
	  	if (payload?.sub ) {
	      	ownCab.innerHTML = ''
	      	ownCab.style.marginTop=10+'px'
	      	ownCab.style.border=5+'px solid blue'
	      	ownCab.style.width=17+'%'
	      	const {id, login}  = payload.sub
	      	const userName = document.createElement('div')
	      	userName.innerHTML = `Hello, ${login}`
	      	const userOrders = document.createElement('a')
	      	userOrders.innerText = 'Your Orders'
	      	userOrders.style.marginRight=10+'px'
	      	userOrders.href = `#/orders/`
	      	let logout = document.createElement('button')
	      	logout.textContent = 'Exit'
	      	logout.onclick = () => {
	          	formId.innerHTML = ''
	          	store.dispatch(actionAuthLogout());
	      	}
	      	ownCab.append(userName, userOrders, logout)
	  	}else{
	    	ownCab.innerHTML = ''
	  	}
	})

	store.subscribe(() => {
	  	const {auth} = store.getState()
	  	if (!auth?.payload){
	      	formId.innerHTML = '';
	      	let loginBtn = document.createElement('a');
	      	loginBtn.style.border=1+'px solid green'
	      	let regBtn = document.createElement('a');
	      	formId.append(loginBtn, regBtn)
	      	loginBtn.textContent = 'LogIn'
	      	regBtn.style.marginLeft=10+'px'
	      	regBtn.style.border=1+'px solid yellow'
	      	regBtn.textContent = 'Registration'
	      	loginBtn.onclick = () => {
	          	loginBtn.style.display = 'none'
	          	regBtn.style.display= 'none'
	          	let form = document.createElement('form')
	          	let login = document.createElement('input')
	          	login.type = 'text'
	          	login.placeholder = 'Login'
	          	let password = document.createElement('input')
	          	password.placeholder = 'Password'
	          	password.type = 'password'
	          	let button = document.createElement('a')
	          	button.textContent = 'Enter'
	          	button.onclick = () => {
	              	if (login.value !== '' && password.value !== '') {
	                  	button.href = `#/login/${login.value}*${password.value}`
	              	}
	          	}
	          	form.append(login, password, button)
	          	formId.append(form)         
	      	}
	      	regBtn.onclick = () => {
	          	loginBtn.style.display = 'none'
	          	regBtn.style.display= 'none'
	          	let form = document.createElement('form')
	          	let login = document.createElement('input')
	          	login.type = 'text'
	          	login.placeholder = 'Login'
	          	let password = document.createElement('input')
	          	password.placeholder = 'Password'
	          	password.type = 'password'
	          	let button = document.createElement('a')
	          	button.textContent = 'Registration'
	          	button.onclick = () => {
	              	if (login.value !== '' && password.value !== '') {
	                  	button.href = `#/register/${login.value}*${password.value}`
	              	}
	          	}
	          	form.append(login, password, button)
	          	formId.append(form)
	      	}
	  	}
	})

//-----------------------------------------------------------------------
	window.onhashchange = () => {
	  const [, route, _id] = location.hash.split('/')

	  const routes = {
	    category() {
	      store.dispatch(actionCatById(_id))
	    },
	    good() {
	      store.dispatch(actionGoodById(_id)) 
	      //задиспатчить actionGoodById
	      console.log('ТОВАРОСТРАНИЦА')
	    },
	    login(){
	      let data = _id.split('*')
	      store.dispatch(actionFullLogin(data[0], data[1]))
	    },
	    register(){
	      let data = _id.split('*')
	      store.dispatch(actionFullRegister(data[0], data[1]))
	    },
	    orders(){
	      store.dispatch(ActionMyOrders())
	    }
	  }
	  if (route in routes)
	    routes[route]()
	}
	window.onhashchange()
	</script>
</body>
</html>