|
|
@@ -0,0 +1,675 @@
|
|
|
+//debugger;
|
|
|
+
|
|
|
+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 promiseReducer(state={}, {type, name, status, payload, error}){
|
|
|
+ // {
|
|
|
+ // login: {status, payload, error}
|
|
|
+ // catById: {status, payload, error}
|
|
|
+ // }
|
|
|
+ if (type === 'PROMISE'){
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [name]:{status, payload, error}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return state
|
|
|
+}
|
|
|
+
|
|
|
+//const store = createStore(promiseReducer);
|
|
|
+
|
|
|
+function jwtDecode(token){
|
|
|
+ try {let base64Url = token.split('.')[1];
|
|
|
+ let base64 = atob(base64Url);
|
|
|
+ return JSON.parse(base64);
|
|
|
+ } catch { (err) =>
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ //раскодировать токен:
|
|
|
+ //выкусить середочку
|
|
|
+ //atob
|
|
|
+ //JSON.parse
|
|
|
+ //на любом этапе могут быть исключения
|
|
|
+}
|
|
|
+
|
|
|
+function authReducer(state, {type, token}){
|
|
|
+
|
|
|
+ if (!state){
|
|
|
+ if(localStorage.authToken){ //проверить localStorage.authToken на наличие
|
|
|
+ return {
|
|
|
+ 'type': 'AUTH_LOGIN',
|
|
|
+ 'token':localStorage.authToken,
|
|
|
+ }; //если есть - сделать так, что бы следующий if сработал
|
|
|
+ } else { return state = {}} //если нет - вернуть {}
|
|
|
+ }
|
|
|
+ if (type === 'AUTH_LOGIN'){
|
|
|
+ const bigToken = jwtDecode(token); //взять токен из action
|
|
|
+ if (bigToken) { //попытаться его jwtDecode
|
|
|
+ localStorage.setItem('authToken', token); //если удалось, то:
|
|
|
+ return {
|
|
|
+ token,
|
|
|
+ payload: bigToken,
|
|
|
+ }
|
|
|
+ } //сохранить токен в localStorage
|
|
|
+ } //вернуть объект вида {токен, payload: раскодированный токен}
|
|
|
+ if (type === 'AUTH_LOGOUT'){
|
|
|
+ localStorage.clear(); //почистить localStorage
|
|
|
+ return {}; //вернуть пустой объект
|
|
|
+ }
|
|
|
+ return state
|
|
|
+}
|
|
|
+
|
|
|
+const actionAuthLogin = token => ({type: 'AUTH_LOGIN', token})
|
|
|
+const actionAuthLogout = () => ({type: 'AUTH_LOGOUT'})
|
|
|
+
|
|
|
+//const store = createStore(authReducer)
|
|
|
+
|
|
|
+
|
|
|
+function cartReducer(state={}, {type, good = {}, count=1}){
|
|
|
+ //{
|
|
|
+ // _id1: {good, count}
|
|
|
+ // _id2: {good, count}
|
|
|
+ //}
|
|
|
+ const types = {
|
|
|
+
|
|
|
+ CART_ADD(){ //как CHANGE, только если ключ раньше был, то достать из count и добавить
|
|
|
+ const {_id} = good;
|
|
|
+ //к count из action. Если не было, достать 0 и добавить к count из action
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [_id]:{good, count:count +(state[_id]?.count || 0)}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_MINUS(){ //как CHANGE, только если ключ раньше был, то достать из count и добавить
|
|
|
+ const {_id} = good;
|
|
|
+ //к count из action. Если не было, достать 0 и добавить к count из action
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ [_id]:{good, count: (-count +(state[_id]?.count || 0)) < 1 ? 0: -count +(state[_id]?.count || 0)}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_REMOVE(){ //смочь скопировать объект и выкинуть ключ. как вариант через
|
|
|
+ //деструктуризацию
|
|
|
+ const {_id} = good;
|
|
|
+ let newState = {...state};
|
|
|
+ const arrKeys = Object.keys(newState);
|
|
|
+ for (let key of arrKeys) {
|
|
|
+ if(_id === key) {
|
|
|
+ delete newState[_id];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ... newState,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_CHANGE(){
|
|
|
+ const {_id} = good;
|
|
|
+ return {
|
|
|
+ ...state, //по аналогии с promiseReducer дописать
|
|
|
+ [_id]:{good, count}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ CART_CLEAR(){
|
|
|
+
|
|
|
+ return {
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type in types)
|
|
|
+ return types[type]()
|
|
|
+
|
|
|
+
|
|
|
+ return state
|
|
|
+}
|
|
|
+
|
|
|
+const actionCartAdd = (good, count = 1) => ({type: 'CART_ADD', good, count});
|
|
|
+const actionCartRemove = (good) =>({type: 'CART_REMOVE', good});
|
|
|
+const actionCartChange = (good, count) =>({type: 'CART_CHANGE', good, count});
|
|
|
+const actionCartClear = () => ({type: 'CART_CLEAR'})
|
|
|
+const actionCartMin = (good, count = 1) =>({type: 'CART_MINUS', good, count});
|
|
|
+
|
|
|
+
|
|
|
+//понаписывать action
|
|
|
+//прикрутить к товару кнопку которая делает store.dispatch(actionCartAdd(good))
|
|
|
+
|
|
|
+ //стартовое состояние может быть с токеном
|
|
|
+
|
|
|
+function combineReducers(reducers){ //перебрать все редьюсеры
|
|
|
+ return (state={}, action) => { //запустить каждый их них
|
|
|
+ const newState = {} //передать при этом в него ЕГО ВЕТВЬ общего state, и action как есть
|
|
|
+ for (const [reducerName, reducer] of Object.entries(reducers)){ //получить newSubState
|
|
|
+ let newSubState = reducer(state[reducerName], action); //если newSubState отличается от входящего, то записать newSubState в newState
|
|
|
+ if (newSubState !== state[reducerName]) { //после цикла, если newState не пуст, то вернуть {...state, ...newState}
|
|
|
+ newState[reducerName] = newSubState; //иначе вернуть state
|
|
|
+ }
|
|
|
+ } //{promise: {}, auth: {}}
|
|
|
+
|
|
|
+ if (Object.keys(newState).length !== 0) {
|
|
|
+ return {
|
|
|
+ ... state,
|
|
|
+ ... newState,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return state;
|
|
|
+ }
|
|
|
+}
|
|
|
+const combinedReducer = combineReducers({promise: promiseReducer, auth: authReducer, cart: cartReducer});
|
|
|
+const store = createStore(combinedReducer);
|
|
|
+console.log(store.getState())
|
|
|
+
|
|
|
+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 getGQL = url =>
|
|
|
+ (query, variables = {}) =>
|
|
|
+ fetch(url, {
|
|
|
+ //метод
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ //заголовок content-type
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} :
|
|
|
+ {})
|
|
|
+ },
|
|
|
+ //body с ключами query и variables
|
|
|
+ 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`)
|
|
|
+
|
|
|
+
|
|
|
+ //store.dispatch(actionPromise('delay1000', delay(1000)))//{promise: {delay1000: '''}, auth: {}}
|
|
|
+ //store.dispatch(actionAuthLogin(token))//{promise: {delay1000: '''}, auth: {token .....}}
|
|
|
+ //
|
|
|
+ //+ ПЕРЕДЕЛАТЬ ОТОБРАЖЕНИЕ с поправкой на то, что теперь промисы не в корне state а в state.promise
|
|
|
+
|
|
|
+const actionLogin = (login, password) =>
|
|
|
+ actionPromise('login', gql(`query authorize ($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) => //const actionRegister //actionPromise
|
|
|
+ actionPromise('register', gql(`mutation register($user:UserInput){
|
|
|
+ UserUpsert(user:$user){
|
|
|
+ _id login
|
|
|
+ }
|
|
|
+ }`, {"user":{
|
|
|
+ "login": `${login}`,
|
|
|
+ "password": `${password}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ )
|
|
|
+
|
|
|
+const actionFullRegister = (login, password) => //const actionFullRegister = (login, password) => //actionRegister + actionFullLogin
|
|
|
+ async dispatch => {
|
|
|
+ await dispatch(actionAuthLogout()); //+ интерфейс к этому - форму логина, регистрации, может повесить это на #/login #/register
|
|
|
+ let reg = await dispatch(actionRegister(login, password));
|
|
|
+ if(reg){
|
|
|
+ dispatch(actionFullLogin(login, password))
|
|
|
+ } //+ #/orders показывает ваши бывшие заказы:
|
|
|
+ } //сделать actionMyOrders
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //проверить:
|
|
|
+ //поделать store.dispatch с разными action. Скопипастить токен
|
|
|
+ //проверить перезагрузку страницы.
|
|
|
+
|
|
|
+//const store = createStore(promiseReducer)
|
|
|
+
|
|
|
+
|
|
|
+store.subscribe(() => console.log(store.getState()))
|
|
|
+
|
|
|
+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){
|
|
|
+ name subCategories {
|
|
|
+ _id
|
|
|
+ name
|
|
|
+ goods {
|
|
|
+ _id name description price images{
|
|
|
+ url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }goods {
|
|
|
+ _id name price images {
|
|
|
+ url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, {"q": JSON.stringify([{_id}])}))
|
|
|
+
|
|
|
+// store.dispatch(actionRootCats())
|
|
|
+
|
|
|
+const actionGoodById = (_id) =>
|
|
|
+ actionPromise('goodById', gql(`query goodById($goodId:String){
|
|
|
+ GoodFindOne(query:$goodId){
|
|
|
+ _id name description price images{
|
|
|
+ _id text url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, {"goodId": JSON.stringify([{_id}])}))
|
|
|
+
|
|
|
+
|
|
|
+const actionOrder = () =>
|
|
|
+ async (dispatch, getState) => {
|
|
|
+ let {cart} = store.getState()
|
|
|
+ //магия по созданию структуры вида
|
|
|
+ //let orderGoods = [{good: {_id}, count}, {good: {_id}, count} .......]
|
|
|
+ //из структуры вида
|
|
|
+ //{_id1: {good, count},
|
|
|
+ //_id2: {good, count}}
|
|
|
+ const orderGoods = Object.entries(cart).map(([_id, {good, count}]) => ({good: {_id}, count}))
|
|
|
+
|
|
|
+ await dispatch(actionPromise('order', gql(`
|
|
|
+ mutation newOrder($order:OrderInput){
|
|
|
+ OrderUpsert(order:$order)
|
|
|
+ { _id total }
|
|
|
+ }
|
|
|
+ `, {order: {orderGoods}})))
|
|
|
+}
|
|
|
+
|
|
|
+ //сделать actionMyOrders
|
|
|
+const actionMyOrders = () =>
|
|
|
+ async (dispatch, getState) => {
|
|
|
+ await dispatch(actionPromise('myOrders', gql(`query OrderFind{
|
|
|
+ OrderFind(query:"[{}]"){
|
|
|
+ orderGoods {price, count, good{name}}
|
|
|
+ }
|
|
|
+ }`)))
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+store.subscribe(() => {
|
|
|
+ const {rootCats} = store.getState().promise
|
|
|
+ if (rootCats?.payload){
|
|
|
+ aside.innerHTML = ''
|
|
|
+ for (const {_id, name} of rootCats?.payload){
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = `#/category/${_id}`
|
|
|
+ link.innerText = name
|
|
|
+ aside.append(link)
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+window.onhashchange = () => {
|
|
|
+ const [, route, _id] = location.hash.split('/');
|
|
|
+
|
|
|
+ const routes = {
|
|
|
+ order(){
|
|
|
+ store.dispatch(actionMyOrders())
|
|
|
+ },
|
|
|
+
|
|
|
+ category(){
|
|
|
+ store.dispatch(actionCatById(_id))
|
|
|
+ },
|
|
|
+ good(){
|
|
|
+ store.dispatch(actionGoodById(_id));//задиспатчить actionGoodById
|
|
|
+ console.log('ТОВАРОСТРАНИЦА')
|
|
|
+
|
|
|
+ },
|
|
|
+ cart(){
|
|
|
+ store.dispatch(actionCatById(_id))
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ login(){
|
|
|
+ document.getElementById('main').innerHTML = ""; //отрисовка тут
|
|
|
+ const formRegistration = document.createElement('form'); //по кнопке - store.dispatch(actionFullLogin(login, password))
|
|
|
+ const inputLogin = document.createElement('input');
|
|
|
+ inputLogin.placeholder = "Login";
|
|
|
+ inputLogin.style.display="block";
|
|
|
+
|
|
|
+ const inputPassword = document.createElement('input');
|
|
|
+ inputPassword.placeholder = "Password";
|
|
|
+ inputPassword.style.display="block";
|
|
|
+ inputPassword.style.marginTop = "10px";
|
|
|
+
|
|
|
+ const buttonSignIn = document.createElement('button');
|
|
|
+ buttonSignIn.innerText = "Sign in";
|
|
|
+ buttonSignIn.type = 'button';
|
|
|
+ buttonSignIn.style.marginTop = "10px";
|
|
|
+
|
|
|
+ const buttonReset = document.createElement('button');
|
|
|
+ buttonReset.type ="reset";
|
|
|
+ buttonReset.innerText =" Reset";
|
|
|
+ buttonReset.style.marginTop = "10px";
|
|
|
+ buttonReset.style.marginLeft = "10px";
|
|
|
+
|
|
|
+ main.append(formRegistration);
|
|
|
+ formRegistration.append(inputLogin);
|
|
|
+ formRegistration.append(inputPassword);
|
|
|
+ formRegistration.append(buttonSignIn);
|
|
|
+ formRegistration.append(buttonReset);
|
|
|
+
|
|
|
+ buttonSignIn.addEventListener('click', async function enterStore (event) {
|
|
|
+ await store.dispatch(actionFullLogin(inputLogin.value, inputPassword.value));
|
|
|
+ const result = store.getState().promise.login.payload;
|
|
|
+ if(result){
|
|
|
+ document.getElementById('main').innerHTML = "";
|
|
|
+ store.dispatch(actionRootCats());
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ register(){
|
|
|
+ document.getElementById('main').innerHTML = ""; //отрисовка тут
|
|
|
+ const formRegistration = document.createElement('form'); //по кнопке - store.dispatch(actionFullLogin(login, password))
|
|
|
+ const inputLogin = document.createElement('input');
|
|
|
+ inputLogin.placeholder = "Login";
|
|
|
+ inputLogin.style.display="block";
|
|
|
+
|
|
|
+ const inputPassword = document.createElement('input');
|
|
|
+ inputPassword.placeholder = "Password";
|
|
|
+ inputPassword.style.display="block";
|
|
|
+ inputPassword.style.marginTop = "10px";
|
|
|
+
|
|
|
+ const buttonSignIn = document.createElement('button');
|
|
|
+ buttonSignIn.innerText = "Sign up";
|
|
|
+ buttonSignIn.type = 'button';
|
|
|
+ buttonSignIn.style.marginTop = "10px";
|
|
|
+
|
|
|
+ const buttonReset = document.createElement('button');
|
|
|
+ buttonReset.type ="reset";
|
|
|
+ buttonReset.innerText =" Reset";
|
|
|
+ buttonReset.style.marginTop = "10px";
|
|
|
+ buttonReset.style.marginLeft = "10px";
|
|
|
+
|
|
|
+ main.append(formRegistration);
|
|
|
+ formRegistration.append(inputLogin);
|
|
|
+ formRegistration.append(inputPassword);
|
|
|
+ formRegistration.append(buttonSignIn);
|
|
|
+ formRegistration.append(buttonReset);
|
|
|
+
|
|
|
+ buttonSignIn.addEventListener('click', async function enterStore (event) {
|
|
|
+ await store.dispatch(actionFullRegister(inputLogin.value, inputPassword.value));
|
|
|
+ console.log('store.getState().promise', store.getState().promise)
|
|
|
+ const result = store.getState().promise.register.payload; console.log("result",result)
|
|
|
+ if(result){
|
|
|
+ document.getElementById('main').innerHTML = "";
|
|
|
+ store.dispatch(actionRootCats());
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ if (route in routes)
|
|
|
+ routes[route]()
|
|
|
+
|
|
|
+}
|
|
|
+window.onhashchange()
|
|
|
+
|
|
|
+store.subscribe(() => {
|
|
|
+ const {catById} = store.getState().promise
|
|
|
+ const [,route, _id] = location.hash.split('/')
|
|
|
+ if (catById?.payload && route === 'category'){
|
|
|
+ const {name, subCategories} = catById.payload;
|
|
|
+ let str = '';
|
|
|
+ if (subCategories){
|
|
|
+ for(let subCateg of subCategories){
|
|
|
+ str += `<h4><a href="#/category/${subCateg._id}"> ${subCateg.name}</a></h4>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ main.innerHTML = `<h1>${name}</h1> ${str} ` //ТУТ ДОЛЖНЫ БЫТЬ ПОДКАТЕГОРИИ
|
|
|
+ for (const good of catById.payload.goods){ //console.log('good', good)
|
|
|
+ const {_id, name, price, images} = good;
|
|
|
+ const card = document.createElement('div')
|
|
|
+ card.innerHTML = `<h2>${name}</h2>
|
|
|
+ <img src="${backURL}/${images[0].url}" />
|
|
|
+ <strong>${price}</strong>
|
|
|
+ <a href="#/good/${_id}">${name}</a>
|
|
|
+
|
|
|
+ `
|
|
|
+ main.append(card);
|
|
|
+ const buttonBuy = document.createElement('button'); //создать кнопку 'добавить в корзину' через createElement
|
|
|
+ buttonBuy.innerText = "buy";
|
|
|
+ card.append(buttonBuy); //card.append(кнопка)
|
|
|
+ buttonBuy.onclick = () => store.dispatch(actionCartAdd(good)); //на onclick повестить обработчик который store.dispatch(actionCartAdd(good))
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+store.subscribe(() => {
|
|
|
+ const {goodById} = store.getState().promise;
|
|
|
+ if(goodById) {
|
|
|
+ const [, , _id] = location.hash.split('/'); //ТУТ ДОЛЖНА БЫТЬ ПРОВЕРКА НА НАЛИЧИЕ goodById в редакс
|
|
|
+ if(goodById?.payload && location.hash == `#/good/${_id}`){ //и проверка на то, что сейчас в адресной строке адрес ВИДА #/good/АЙДИ
|
|
|
+ document.getElementById('main').innerHTML = "";
|
|
|
+ const {name, description, price, images} = goodById.payload;
|
|
|
+ const card = document.createElement('div'); //в таком случае очищаем main и рисуем информацию про товар с подробностями
|
|
|
+ card.innerHTML = `<h2>${name}</h2>
|
|
|
+ <img src="${backURL}/${images[0].url}" />
|
|
|
+ <strong>${price} $</strong>
|
|
|
+ <p>${description}</p>`
|
|
|
+
|
|
|
+ main.append(card);
|
|
|
+ const buttonBuy = document.createElement('button');
|
|
|
+ buttonBuy.innerText = "buy";
|
|
|
+ card.append(buttonBuy);
|
|
|
+ buttonBuy.onclick = () => store.dispatch(actionCartAdd(goodById.payload));
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+store.subscribe( () => {
|
|
|
+ const data = store.getState().cart;
|
|
|
+ const divTotalCard = document.createElement('div');
|
|
|
+
|
|
|
+ if( (Object.keys(data).length !== 0) && location.hash == `#/cart`){ console.log('data', data)
|
|
|
+ document.getElementById('main').innerHTML = "";
|
|
|
+ main.append(divTotalCard);
|
|
|
+ const arrKeys = Object.keys(data); console.log('arrKeys', arrKeys); console.log('data[arrKeys[i]]', data[arrKeys[0]])
|
|
|
+ let totalAmount = 0;
|
|
|
+ let countTotal = 0;
|
|
|
+ for (let i = 0; i < arrKeys.length; i++) {
|
|
|
+ let {good : {name, price, images: [{url}]}, count} = data[arrKeys[i]]; console.log('count', count)
|
|
|
+
|
|
|
+ const divCart = document.createElement('div');
|
|
|
+ divTotalCard.append(divCart);
|
|
|
+ const h3 = document.createElement('h3');
|
|
|
+ divCart.appendChild(h3).innerText = `${name}`;
|
|
|
+ const img = document.createElement('img');
|
|
|
+ img.src = `${backURL}/${url}`;
|
|
|
+ divCart.append(img);
|
|
|
+ const strong =document.createElement('strong');
|
|
|
+ strong.innerText = `Price ${price} $`;
|
|
|
+ divCart.append(strong);
|
|
|
+ const span =document.createElement('span');
|
|
|
+ span.innerText = `Count ${count}`;
|
|
|
+ span.style.display ='block';
|
|
|
+ divCart.append(span);
|
|
|
+ const buttonPlus = document.createElement('button');
|
|
|
+ buttonPlus.innerText = '+';
|
|
|
+ divCart.append(buttonPlus);
|
|
|
+ buttonPlus.onclick = () => store.dispatch(actionCartAdd(data[arrKeys[i]].good));
|
|
|
+ const buttonMinus = document.createElement('button');
|
|
|
+ buttonMinus.innerText = '-';
|
|
|
+ buttonMinus.onclick = () => store.dispatch(actionCartMin(data[arrKeys[i]].good));
|
|
|
+ divCart.append(buttonMinus);
|
|
|
+ const buttonRemove = document.createElement('button');
|
|
|
+ buttonRemove.innerText = 'X';
|
|
|
+ buttonRemove.onclick = () => store.dispatch(actionCartRemove(data[arrKeys[i]].good));
|
|
|
+ divCart.append(buttonRemove);
|
|
|
+ totalAmount += price*count;
|
|
|
+ countTotal += count;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const spanFooterCart = document.createElement('span');
|
|
|
+ spanFooterCart.style.marginTop = '15px';
|
|
|
+ spanFooterCart.style.display = 'block';
|
|
|
+ main.append(spanFooterCart);
|
|
|
+ spanFooterCart.innerHTML = ` Total amount ${totalAmount}$`;
|
|
|
+ const buttonClear = document.createElement('button');
|
|
|
+ spanFooterCart.append(buttonClear);
|
|
|
+ buttonClear.innerHTML = 'CART_CLEAR';
|
|
|
+ const buttonOrderGoods = document.createElement('button');
|
|
|
+ spanFooterCart.append(buttonOrderGoods);
|
|
|
+ buttonOrderGoods.innerText = 'ORDER_GOODS';
|
|
|
+ buttonOrderGoods.style.marginLeft = '15px';
|
|
|
+ buttonOrderGoods.onclick = () => {
|
|
|
+ store.dispatch(actionOrder());
|
|
|
+ store.dispatch(actionCartClear());
|
|
|
+
|
|
|
+ }
|
|
|
+ Object.assign(buttonClear, {
|
|
|
+ height: 120,
|
|
|
+ width: 160,
|
|
|
+ marginLeft: 20,
|
|
|
+ onclick: function () {
|
|
|
+ store.dispatch(actionCartClear());
|
|
|
+ divTotalCard.innerHTML = '';
|
|
|
+ spanFooterCart.innerHTML = '';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (countTotal === 0) {
|
|
|
+ main.innerText = 'Товаров нет';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+store.subscribe( () => {
|
|
|
+ const data = store.getState().cart;
|
|
|
+ if ((Object.keys(data).length === 0) && location.hash == `#/cart`) { console.log('Object.keys(data).length',Object.keys(data).length)
|
|
|
+ main.innerText = 'Товаров нет';
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+authLogOut.onclick = () => {
|
|
|
+ store.dispatch(actionAuthLogout());
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+store.subscribe( () => {
|
|
|
+
|
|
|
+ const data = store.getState().promise.myOrders;
|
|
|
+
|
|
|
+ if (data?.payload && location.hash == `#/order`) {
|
|
|
+ main.innerHTML = '';
|
|
|
+ const arrMyOrder = data.payload;
|
|
|
+ const table = document.createElement('table');
|
|
|
+ main.append(table);
|
|
|
+ let count =0;
|
|
|
+
|
|
|
+ for (let i = 0; i < arrMyOrder.length; i++) {
|
|
|
+ const table = document.createElement('table');
|
|
|
+ main.append(table);
|
|
|
+ let countTotal = 0;
|
|
|
+ let priceOrder = 0;
|
|
|
+ const orderGoods = arrMyOrder[i].orderGoods;
|
|
|
+ let strTable = `<tr>
|
|
|
+ <td>№ заказа</td>
|
|
|
+ <td>Название</td>
|
|
|
+ <td>Количество</td>
|
|
|
+ <td>Цена</td>
|
|
|
+ </tr>`;
|
|
|
+
|
|
|
+ for (let {price, count, good: { name}} of orderGoods){
|
|
|
+
|
|
|
+ strTable += `<tr>
|
|
|
+ <td>${i+1}</td>
|
|
|
+ <td>${name}</td>
|
|
|
+ <td>${count}</td>
|
|
|
+ <td>${price}</td>
|
|
|
+ </tr>`;
|
|
|
+ countTotal += count;
|
|
|
+ priceOrder += price * count;
|
|
|
+ }
|
|
|
+ strTable += `<tr>
|
|
|
+ <td colspan="2">Всего</td>
|
|
|
+ <td>${countTotal}</td>
|
|
|
+ <td>${priceOrder}</td>
|
|
|
+ </tr>`;
|
|
|
+ table.innerHTML = strTable;
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+store.subscribe( () => {
|
|
|
+ const data = store.getState().auth.payload?.sub.login;
|
|
|
+
|
|
|
+ if (data) {
|
|
|
+ nameUser.innerHTML = `Здравствуй ${data}`;
|
|
|
+ }
|
|
|
+})
|
