|
@@ -1,22 +1,22 @@
|
|
|
-function createStore(reducer){
|
|
|
- let state = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
|
|
|
- let cbs = [] //массив подписчиков
|
|
|
-
|
|
|
- const getState = () => state //функция, возвращающая переменную из замыкания
|
|
|
+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 - не объект, а функция
|
|
|
+ () => 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
|
|
|
+ if (newState !== state) { //проверяем, смог ли редьюсер обработать action
|
|
|
state = newState //если смог, то обновляем state
|
|
|
- for (let cb of cbs) cb() //и запускаем подписчиков
|
|
|
+ for (let cb of cbs) cb() //и запускаем подписчиков
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
return {
|
|
|
getState, //добавление функции getState в результирующий объект
|
|
|
dispatch,
|
|
@@ -24,11 +24,11 @@ function createStore(reducer){
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function promiseReducer(state={}, {type, name, status, payload, error}){
|
|
|
- if (type === 'PROMISE'){
|
|
|
+function promiseReducer(state = {}, { type, name, status, payload, error }) {
|
|
|
+ if (type === 'PROMISE') {
|
|
|
return {
|
|
|
...state,
|
|
|
- [name]:{status, payload, error}
|
|
|
+ [name]: { status, payload, error }
|
|
|
}
|
|
|
}
|
|
|
return state
|
|
@@ -36,18 +36,18 @@ function promiseReducer(state={}, {type, name, status, payload, error}){
|
|
|
|
|
|
const jwtDecode = token => {
|
|
|
try {
|
|
|
- let [,payload] = token.split(".");
|
|
|
- let payloadParsed= JSON.parse(atob(payload));
|
|
|
+ let [, payload] = token.split(".");
|
|
|
+ let payloadParsed = JSON.parse(atob(payload));
|
|
|
return payloadParsed;
|
|
|
}
|
|
|
- catch(e){
|
|
|
+ catch (e) {
|
|
|
console.log(e);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function authReducer(state, {type, token}) {
|
|
|
+function authReducer(state, { type, token }) {
|
|
|
if (state === undefined) {
|
|
|
- if(localStorage.authToken) {
|
|
|
+ if (localStorage.authToken) {
|
|
|
type = "AUTH_LOGIN";
|
|
|
token = localStorage.authToken;
|
|
|
} else {
|
|
@@ -58,11 +58,11 @@ function authReducer(state, {type, token}) {
|
|
|
let payload = jwtDecode(token);
|
|
|
if (payload) {
|
|
|
localStorage.authToken = token;
|
|
|
- return {token, payload};
|
|
|
+ return { token, payload };
|
|
|
}
|
|
|
}
|
|
|
if (type === 'AUTH_LOGOUT') {
|
|
|
- localStorage.authToken="";
|
|
|
+ localStorage.authToken = "";
|
|
|
return {};
|
|
|
}
|
|
|
return state;
|
|
@@ -87,35 +87,35 @@ function combineReducers(reducers) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function cartReducer(state={}, {type, good={}, count=1}) {
|
|
|
-//каков state
|
|
|
-//{
|
|
|
-// _id1: {count:1, good: {_id1, name, price, images}}
|
|
|
-// _id2: {count:1, good: {_id1, name, prica, images}}
|
|
|
-//}
|
|
|
-//
|
|
|
-const {_id} = good;
|
|
|
- if (type==='CART_ADD') {
|
|
|
+function cartReducer(state = {}, { type, good = {}, count = 1 }) {
|
|
|
+ //каков state
|
|
|
+ //{
|
|
|
+ // _id1: {count:1, good: {_id1, name, price, images}}
|
|
|
+ // _id2: {count:1, good: {_id1, name, prica, images}}
|
|
|
+ //}
|
|
|
+ //
|
|
|
+ const { _id } = good;
|
|
|
+ if (type === 'CART_ADD') {
|
|
|
return {
|
|
|
...state,
|
|
|
- [_id]:{count: (state[_id]? (state[_id].count+=count) : count), good: good}
|
|
|
+ [_id]: { count: (state[_id] ? (state[_id].count += count) : count), good: good }
|
|
|
}
|
|
|
}
|
|
|
- if (type==='CART_CHANGE') {
|
|
|
+ if (type === 'CART_CHANGE') {
|
|
|
return {
|
|
|
...state,
|
|
|
- [_id]:{count: count, good: good}
|
|
|
+ [_id]: { count: count, good: good }
|
|
|
}
|
|
|
}
|
|
|
- if (type==='CART_DELETE') {
|
|
|
- let newState = {... state};
|
|
|
+ if (type === 'CART_DELETE') {
|
|
|
+ let newState = { ...state };
|
|
|
delete newState[_id];
|
|
|
// const {_id, ...newState} = state;
|
|
|
return {
|
|
|
- ...newState,
|
|
|
+ ...newState,
|
|
|
}
|
|
|
}
|
|
|
- if (type==='CART_CLEAR') {
|
|
|
+ if (type === 'CART_CLEAR') {
|
|
|
return {}
|
|
|
}
|
|
|
|
|
@@ -123,14 +123,16 @@ const {_id} = good;
|
|
|
return state;
|
|
|
}
|
|
|
|
|
|
-const store = createStore(combineReducers({promise: promiseReducer,
|
|
|
- auth: authReducer, cart: cartReducer}));
|
|
|
+const store = createStore(combineReducers({
|
|
|
+ promise: promiseReducer,
|
|
|
+ auth: authReducer, cart: cartReducer
|
|
|
+}));
|
|
|
|
|
|
|
|
|
-const actionCartAdd = (good, count=1) => ({type: 'CART_ADD', good, count});
|
|
|
-const actionCartChange = (good, count=1) => ({type: 'CART_CHANGE', good, count});
|
|
|
-const actionCartDelete = (good) => ({type: 'CART_DELETE', good});
|
|
|
-const actionCartClear = () => ({type: 'CART_CLEAR'});
|
|
|
+const actionCartAdd = (good, count = 1) => ({ type: 'CART_ADD', good, count });
|
|
|
+const actionCartChange = (good, count = 1) => ({ type: 'CART_CHANGE', good, count });
|
|
|
+const actionCartDelete = (good) => ({ type: 'CART_DELETE', good });
|
|
|
+const actionCartClear = () => ({ type: 'CART_CLEAR' });
|
|
|
|
|
|
const cartEl = document.getElementsByClassName("cartN")[0];
|
|
|
let username;
|
|
@@ -142,11 +144,11 @@ const logoEl = document.getElementById("logo");
|
|
|
store.subscribe(() => console.log(store.getState()));
|
|
|
|
|
|
|
|
|
-const actionPending = name => ({type:'PROMISE',name, status: 'PENDING'});
|
|
|
-const actionFulfilled = (name,payload) => ({type:'PROMISE',name, status: 'FULFILLED', payload});
|
|
|
-const actionRejected = (name,error) => ({type:'PROMISE',name, status: 'REJECTED', error});
|
|
|
-const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token });
|
|
|
-const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' });
|
|
|
+const actionPending = name => ({ type: 'PROMISE', name, status: 'PENDING' });
|
|
|
+const actionFulfilled = (name, payload) => ({ type: 'PROMISE', name, status: 'FULFILLED', payload });
|
|
|
+const actionRejected = (name, error) => ({ type: 'PROMISE', name, status: 'REJECTED', error });
|
|
|
+const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token });
|
|
|
+const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' });
|
|
|
const actionPromise = (name, promise) =>
|
|
|
async dispatch => {
|
|
|
dispatch(actionPending(name))
|
|
@@ -155,7 +157,7 @@ const actionPromise = (name, promise) =>
|
|
|
dispatch(actionFulfilled(name, payload))
|
|
|
return payload
|
|
|
}
|
|
|
- catch(error){
|
|
|
+ catch (error) {
|
|
|
dispatch(actionRejected(name, error))
|
|
|
}
|
|
|
}
|
|
@@ -165,14 +167,14 @@ const getGQL = url =>
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
"Content-Type": "application/json",
|
|
|
- ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
|
|
|
+ ...(localStorage.authToken ? { "Authorization": "Bearer " + localStorage.authToken } : {})
|
|
|
},
|
|
|
- body: JSON.stringify({query, variables})
|
|
|
+ body: JSON.stringify({ query, variables })
|
|
|
}).then(res => res.json())
|
|
|
.then(data => {
|
|
|
- if (data.data){
|
|
|
- return Object.values(data.data)[0]
|
|
|
- }
|
|
|
+ if (data.data) {
|
|
|
+ return Object.values(data.data)[0]
|
|
|
+ }
|
|
|
else throw new Error(JSON.stringify(data.errors))
|
|
|
})
|
|
|
|
|
@@ -180,25 +182,25 @@ const backendURL = "http://shop-roles.node.ed.asmer.org.ua";
|
|
|
|
|
|
const gql = getGQL(backendURL + '/graphql')
|
|
|
|
|
|
-const actionRootCats = () =>
|
|
|
+const actionRootCats = () =>
|
|
|
actionPromise('rootCats', gql(`query {
|
|
|
CategoryFind(query: "[{\\"parent\\":null}]"){
|
|
|
_id name
|
|
|
}
|
|
|
}`))
|
|
|
|
|
|
-const actionCatById = ( _id ) =>
|
|
|
+const actionCatById = (_id) =>
|
|
|
actionPromise(
|
|
|
- 'catById',
|
|
|
- gql(
|
|
|
- `query catById($q: String){
|
|
|
+ 'catById',
|
|
|
+ gql(
|
|
|
+ `query catById($q: String){
|
|
|
CategoryFindOne(query: $q){
|
|
|
- subCategories{
|
|
|
+ subCategories{
|
|
|
name _id goods {
|
|
|
- _id
|
|
|
- name
|
|
|
+ _id
|
|
|
+ name
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
_id name goods {
|
|
|
_id name price images {
|
|
|
url
|
|
@@ -219,18 +221,18 @@ const actionGoodById = (_id) =>
|
|
|
name
|
|
|
}
|
|
|
}
|
|
|
- }`, {q: JSON.stringify([{_id}])}));
|
|
|
+ }`, { q: JSON.stringify([{ _id }]) }));
|
|
|
|
|
|
|
|
|
const orderHistory = () =>
|
|
|
actionPromise(
|
|
|
- 'history',
|
|
|
- gql(` query OrderFind{
|
|
|
+ 'history',
|
|
|
+ gql(` query OrderFind{
|
|
|
OrderFind(query:"[{}]"){
|
|
|
_id total createdAt orderGoods{
|
|
|
count good{
|
|
|
_id name price images{
|
|
|
- url
|
|
|
+ url
|
|
|
}
|
|
|
}
|
|
|
owner{
|
|
@@ -239,86 +241,86 @@ const orderHistory = () =>
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- `));
|
|
|
+ `));
|
|
|
|
|
|
- const actionLogin = (login, password) =>
|
|
|
- actionPromise(
|
|
|
- 'login',
|
|
|
- gql(
|
|
|
- `query log($login: String, $password: String) {
|
|
|
+const actionLogin = (login, password) =>
|
|
|
+ actionPromise(
|
|
|
+ 'login',
|
|
|
+ gql(
|
|
|
+ `query log($login: String, $password: String) {
|
|
|
login(login: $login, password: $password)
|
|
|
- }`,
|
|
|
- { login: login, password: password }
|
|
|
- )
|
|
|
- );
|
|
|
+ }`,
|
|
|
+ { login: login, password: password }
|
|
|
+ )
|
|
|
+ );
|
|
|
|
|
|
const actionFullLogin = (login, password) => async (dispatch) => {
|
|
|
- let token = await dispatch(actionLogin(login, password));
|
|
|
- console.log(token);
|
|
|
- if (token) {
|
|
|
- dispatch(actionAuthLogin(token));
|
|
|
- }
|
|
|
- alerting();
|
|
|
+ let token = await dispatch(actionLogin(login, password));
|
|
|
+ console.log(token);
|
|
|
+ if (token) {
|
|
|
+ dispatch(actionAuthLogin(token));
|
|
|
+ }
|
|
|
+ alerting();
|
|
|
};
|
|
|
|
|
|
const actionRegister = (login, password) =>
|
|
|
- actionPromise(
|
|
|
- 'register',
|
|
|
- gql(
|
|
|
- `mutation register ($login:String, $password:String){
|
|
|
- UserUpsert(user:{login:$login, password:$password}){
|
|
|
+ actionPromise(
|
|
|
+ 'register',
|
|
|
+ gql(
|
|
|
+ `mutation register ($login:String, $password:String){
|
|
|
+ UserUpsert(user:{login:$login, password:$password}){
|
|
|
_id login
|
|
|
- }
|
|
|
+ }
|
|
|
}`,
|
|
|
- { login: login, password: password }
|
|
|
- )
|
|
|
- );
|
|
|
+ { login: login, password: password }
|
|
|
+ )
|
|
|
+ );
|
|
|
|
|
|
const actionOrder = () => async (dispatch, getState) => {
|
|
|
-let { cart } = getState();
|
|
|
-const orderGoods = Object.entries(cart).map(([_id, { count }]) => ({ good: { _id }, count, }));
|
|
|
-
|
|
|
-let result = await dispatch(
|
|
|
- actionPromise(
|
|
|
- 'order',
|
|
|
- gql(
|
|
|
- `
|
|
|
+ let { cart } = getState();
|
|
|
+ const orderGoods = Object.entries(cart).map(([_id, { count }]) => ({ good: { _id }, count, }));
|
|
|
+
|
|
|
+ let result = await dispatch(
|
|
|
+ actionPromise(
|
|
|
+ 'order',
|
|
|
+ gql(
|
|
|
+ `
|
|
|
mutation newOrder($order:OrderInput){
|
|
|
OrderUpsert(order:$order)
|
|
|
{ _id total }
|
|
|
}
|
|
|
`,
|
|
|
- { order: { orderGoods } }
|
|
|
- )
|
|
|
- )
|
|
|
-);
|
|
|
-if (result?._id) {
|
|
|
- dispatch(actionCartClear());
|
|
|
- document.location.hash = "#/cart/";
|
|
|
- alert("Поздравляем, вы оформили заказ!");
|
|
|
-}
|
|
|
+ { order: { orderGoods } }
|
|
|
+ )
|
|
|
+ )
|
|
|
+ );
|
|
|
+ if (result?._id) {
|
|
|
+ dispatch(actionCartClear());
|
|
|
+ document.location.hash = "#/cart/";
|
|
|
+ alert("Поздравляем, вы оформили заказ!");
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
|
|
|
const actionFullRegister = (login, password) => async (dispatch) => {
|
|
|
- let id = await dispatch(actionRegister(login, password));
|
|
|
-// console.log(id);
|
|
|
- alertingReg(id, login);
|
|
|
- if (id) {
|
|
|
- dispatch(actionFullLogin(login, password));
|
|
|
- }
|
|
|
+ let id = await dispatch(actionRegister(login, password));
|
|
|
+ // console.log(id);
|
|
|
+ alertingReg(id, login);
|
|
|
+ if (id) {
|
|
|
+ dispatch(actionFullLogin(login, password));
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
store.dispatch(actionRootCats());
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
- const {rootCats} = store.getState().promise
|
|
|
- if (rootCats?.payload){
|
|
|
+ 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
|
|
|
+ for (const { _id, name } of rootCats?.payload) {
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = `#/category/${_id}`
|
|
|
+ link.innerText = name
|
|
|
aside.append(link)
|
|
|
}
|
|
|
}
|
|
@@ -328,16 +330,16 @@ window.onhashchange = () => {
|
|
|
const [, route, _id] = location.hash.split('/')
|
|
|
|
|
|
const routes = {
|
|
|
- category(){
|
|
|
+ category() {
|
|
|
store.dispatch(actionCatById(_id));
|
|
|
},
|
|
|
- good(){
|
|
|
+ good() {
|
|
|
// console.log("good")
|
|
|
//задиспатчить actionGoodById
|
|
|
// console.log('ТОВАРОСТРАНИЦА')
|
|
|
store.dispatch(actionGoodById(_id));
|
|
|
},
|
|
|
- login(){
|
|
|
+ login() {
|
|
|
main.innerHTML = `<h2>Для осуществления заказов:<br>если вы зарегистрированы,
|
|
|
введите логин и пароль и нажмите Войти;<br>если не зарегистрированы - нужно зарегистрироваться</h2>`;
|
|
|
const formEl = document.createElement("div");
|
|
@@ -360,7 +362,7 @@ window.onhashchange = () => {
|
|
|
buttonLogEl.innerText = "Войти";
|
|
|
buttonRegEl.innerText = "Зарегистрироваться";
|
|
|
buttonLogOutEl.innerText = "Выйти";
|
|
|
- if(username) {
|
|
|
+ if (username) {
|
|
|
buttonLogEl.disabled = true;
|
|
|
buttonRegEl.disabled = true;
|
|
|
}
|
|
@@ -376,23 +378,23 @@ window.onhashchange = () => {
|
|
|
username = "";
|
|
|
document.location.hash = "#/login/";
|
|
|
}
|
|
|
- formEl.append(p1el,input1El,p2el,input2El,br1El,br2El,buttonLogEl,buttonLogOutEl,buttonRegEl);
|
|
|
+ formEl.append(p1el, input1El, p2el, input2El, br1El, br2El, buttonLogEl, buttonLogOutEl, buttonRegEl);
|
|
|
main.append(formEl);
|
|
|
//по кнопке - store.dispatch(actionFullLogin(login, password))
|
|
|
},
|
|
|
- register(){
|
|
|
+ register() {
|
|
|
//отрисовка тут
|
|
|
//по кнопке - store.dispatch(actionFullRegister(login, password))
|
|
|
},
|
|
|
- dashboard(){
|
|
|
+ dashboard() {
|
|
|
store.dispatch(orderHistory());
|
|
|
|
|
|
},
|
|
|
- cart(){
|
|
|
+ cart() {
|
|
|
const cart = store.getState().cart;
|
|
|
- if(Object.entries(cart).length>0) {
|
|
|
+ if (Object.entries(cart).length > 0) {
|
|
|
main.innerHTML = `<h2>Содержимое вашей корзины</h2>`;
|
|
|
- const {cart} = store.getState();
|
|
|
+ const { cart } = store.getState();
|
|
|
let totalScore = 0;
|
|
|
let totalCount = 0;
|
|
|
const tableCartEl = document.createElement("table");
|
|
@@ -407,13 +409,13 @@ window.onhashchange = () => {
|
|
|
td3El.innerText = "Цена";
|
|
|
td4El.innerText = "Количество";
|
|
|
td5El.innerText = "Изменить";
|
|
|
- trEl.append(td1El,td2El,td3El,td4El,td5El);
|
|
|
+ trEl.append(td1El, td2El, td3El, td4El, td5El);
|
|
|
tableCartEl.append(trEl);
|
|
|
-
|
|
|
- if (Object.entries(cart).length>0) {
|
|
|
+
|
|
|
+ if (Object.entries(cart).length > 0) {
|
|
|
for (let [key, value] of Object.entries(cart)) {
|
|
|
- const {count, good} = value;
|
|
|
- const {name, _id, price} = good;
|
|
|
+ const { count, good } = value;
|
|
|
+ const { name, _id, price } = good;
|
|
|
const buttonDel = document.createElement("button");
|
|
|
const buttonMinus = document.createElement("button");
|
|
|
const buttonPlus = document.createElement("button");
|
|
@@ -423,22 +425,22 @@ window.onhashchange = () => {
|
|
|
|
|
|
|
|
|
buttonMinus.onclick = () => {
|
|
|
- if(count==1) {
|
|
|
- store.dispatch(actionCartDelete({_id, name, price}));
|
|
|
+ if (count == 1) {
|
|
|
+ store.dispatch(actionCartDelete({ _id, name, price }));
|
|
|
} else {
|
|
|
- store.dispatch(actionCartChange({_id, name, price}, count-1));
|
|
|
+ store.dispatch(actionCartChange({ _id, name, price }, count - 1));
|
|
|
}
|
|
|
document.location.hash = `#/cart/${_id}/${count}`
|
|
|
}
|
|
|
buttonPlus.onclick = () => {
|
|
|
- store.dispatch(actionCartChange({_id, name, price}, count+1));
|
|
|
+ store.dispatch(actionCartChange({ _id, name, price }, count + 1));
|
|
|
document.location.hash = `#/cart/${_id}/${count}`
|
|
|
}
|
|
|
buttonDel.onclick = () => {
|
|
|
- store.dispatch(actionCartDelete({_id, name, price}));
|
|
|
+ store.dispatch(actionCartDelete({ _id, name, price }));
|
|
|
document.location.hash = `#/cart/${_id}`;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const trEl = document.createElement("tr");
|
|
|
const td1El = document.createElement("td");
|
|
|
const td2El = document.createElement("td");
|
|
@@ -449,13 +451,13 @@ window.onhashchange = () => {
|
|
|
td2El.innerText = name;
|
|
|
td3El.innerText = price;
|
|
|
td4El.innerText = count;
|
|
|
- td5El.append(buttonMinus,buttonPlus);
|
|
|
- trEl.append(td1El,td2El,td3El,td4El,td5El);
|
|
|
+ td5El.append(buttonMinus, buttonPlus);
|
|
|
+ trEl.append(td1El, td2El, td3El, td4El, td5El);
|
|
|
tableCartEl.append(trEl);
|
|
|
-
|
|
|
- totalScore+=price*count;
|
|
|
- totalCount+=count;
|
|
|
-
|
|
|
+
|
|
|
+ totalScore += price * count;
|
|
|
+ totalCount += count;
|
|
|
+
|
|
|
}
|
|
|
const trEl = document.createElement("tr");
|
|
|
const td1El = document.createElement("td");
|
|
@@ -468,13 +470,13 @@ window.onhashchange = () => {
|
|
|
td3El.innerText = totalScore;
|
|
|
td4El.innerText = totalCount;
|
|
|
td5El.innerText = "";
|
|
|
- trEl.append(td1El,td2El,td3El,td4El,td5El);
|
|
|
+ trEl.append(td1El, td2El, td3El, td4El, td5El);
|
|
|
tableCartEl.append(trEl);
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
main.append(tableCartEl);
|
|
|
-
|
|
|
+
|
|
|
const buttonCartClear = document.createElement("button");
|
|
|
const buttonSend = document.createElement("button");
|
|
|
const buttonHistory = document.createElement("button");
|
|
@@ -483,7 +485,7 @@ window.onhashchange = () => {
|
|
|
buttonHistory.innerText = "История заказов";
|
|
|
buttonSend.onclick = () => {
|
|
|
store.dispatch(actionOrder());
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
buttonCartClear.onclick = () => {
|
|
|
store.dispatch(actionCartClear());
|
|
@@ -493,7 +495,7 @@ window.onhashchange = () => {
|
|
|
document.location.hash = "#/dashboard";
|
|
|
}
|
|
|
|
|
|
- main.append(buttonSend,buttonCartClear, buttonHistory);
|
|
|
+ main.append(buttonSend, buttonCartClear, buttonHistory);
|
|
|
} else {
|
|
|
main.innerHTML = `<h2>Ваша корзина пуста...</h2><a href="#/dashboard">история заказов</a>`;
|
|
|
}
|
|
@@ -507,46 +509,46 @@ window.onhashchange()
|
|
|
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
- const {catById} = store.getState().promise;
|
|
|
- const [,route, _id] = location.hash.split('/');
|
|
|
- if (catById?.payload && route === 'category'){
|
|
|
- const {name} = catById.payload
|
|
|
+ const { catById } = store.getState().promise;
|
|
|
+ const [, route, _id] = location.hash.split('/');
|
|
|
+ if (catById?.payload && route === 'category') {
|
|
|
+ const { name } = catById.payload
|
|
|
main.innerHTML = `<h1>${name}</h1>`
|
|
|
|
|
|
- if (catById.payload.subCategories) {
|
|
|
- for (const {_id, name} of catById.payload.subCategories){
|
|
|
- const card = document.createElement('div')
|
|
|
- card.innerHTML = `<a href="#/category/${_id}"><h2>${name}</h2></a>`;
|
|
|
- main.append(card);
|
|
|
+ if (catById.payload.subCategories) {
|
|
|
+ for (const { _id, name } of catById.payload.subCategories) {
|
|
|
+ const card = document.createElement('div')
|
|
|
+ card.innerHTML = `<a href="#/category/${_id}"><h2>${name}</h2></a>`;
|
|
|
+ main.append(card);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- for (const {_id, name, price, images} of catById.payload.goods){
|
|
|
- const card = document.createElement('div')
|
|
|
- card.innerHTML = `<h2>${name}</h2>
|
|
|
+ for (const { _id, name, price, images } of catById.payload.goods) {
|
|
|
+ const card = document.createElement('div')
|
|
|
+ card.innerHTML = `<h2>${name}</h2>
|
|
|
<img src="${backendURL}/${images[0].url}" /><br>
|
|
|
<strong>Цена: ${price} грн</strong><br>
|
|
|
<button onclick="store.dispatch(actionCartAdd({_id: '${_id}',
|
|
|
name: '${name}', price: '${price}'}))">Купить</button>
|
|
|
<a href="#/good/${_id}">описание товара</a>`
|
|
|
- main.append(card)
|
|
|
- }
|
|
|
+ main.append(card)
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
-const {goodById} = store.getState().promise;
|
|
|
-const [,route, _id] = location.hash.split('/');
|
|
|
+ const { goodById } = store.getState().promise;
|
|
|
+ const [, route, _id] = location.hash.split('/');
|
|
|
//ТУТ ДОЛЖНА БЫТЬ ПРОВЕРКА НА НАЛИЧИЕ goodById в редакс
|
|
|
//и проверка на то, что сейчас в адресной строке адрес ВИДА #/good/АЙДИ
|
|
|
//в таком случае очищаем main и рисуем информацию про товар с подробностями
|
|
|
- if (goodById?.payload && route === 'good'){
|
|
|
- const {_id, name, price, description, images} = goodById.payload;
|
|
|
+ if (goodById?.payload && route === 'good') {
|
|
|
+ const { _id, name, price, description, images } = goodById.payload;
|
|
|
main.innerHTML = `<h2>${name}</h2>`;
|
|
|
- const card = document.createElement('div');
|
|
|
+ const card = document.createElement('div');
|
|
|
card.innerHTML = `<img src="${backendURL}/${images[0].url}" /><br>
|
|
|
- <strong>Цена: ${price} грн</strong><br>
|
|
|
- <button onclick="store.dispatch(actionCartAdd({_id: '${_id}',
|
|
|
+ <strong>Цена: ${price} грн</strong><br>
|
|
|
+ <button onclick="store.dispatch(actionCartAdd({_id: '${_id}',
|
|
|
name: '${name}', price: '${price}'}))">Купить</button>
|
|
|
<p>Описание товара:</p>
|
|
|
<p>${description}</p>
|
|
@@ -556,62 +558,62 @@ const [,route, _id] = location.hash.split('/');
|
|
|
})
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
-const {cart} = store.getState();
|
|
|
-// console.log(cart);
|
|
|
-let numInCart = 0;
|
|
|
-if (Object.entries(cart).length>0) {
|
|
|
- for (let [key, value] of Object.entries(cart)) {
|
|
|
- const {count} = value;
|
|
|
- numInCart+=count;
|
|
|
+ const { cart } = store.getState();
|
|
|
+ // console.log(cart);
|
|
|
+ let numInCart = 0;
|
|
|
+ if (Object.entries(cart).length > 0) {
|
|
|
+ for (let [key, value] of Object.entries(cart)) {
|
|
|
+ const { count } = value;
|
|
|
+ numInCart += count;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-cartEl.innerText=numInCart;
|
|
|
+ cartEl.innerText = numInCart;
|
|
|
//достаем всю корзину
|
|
|
//считаем общее количество всех позиций (3 айфона + 7 пицц = 10)
|
|
|
//выводим число в кошик на странице через его HTML id
|
|
|
});
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
- const {auth} = store.getState();
|
|
|
+ const { auth } = store.getState();
|
|
|
// const [,route,] = location.hash.split('/');
|
|
|
- if(Object.keys(auth).length!==0) {
|
|
|
+ if (Object.keys(auth).length !== 0) {
|
|
|
username = auth?.payload.sub.login;
|
|
|
}
|
|
|
- if(localStorage.authToken) {
|
|
|
+ if (localStorage.authToken) {
|
|
|
// console.log("login");
|
|
|
loginEl.innerText = "";
|
|
|
logoEl.innerHTML = `\n <h1>${username}, добро пожаловать в интернет магазин NotРОЗЕТКА</h1>\n `
|
|
|
} else {
|
|
|
// console.log("logout");
|
|
|
loginEl.innerText = "?";
|
|
|
- logoEl.innerHTML = `\n <h1>Добро пожаловать в интернет магазин</h1>\n `
|
|
|
+ logoEl.innerHTML = `\n <h1>Добро пожаловать в интернет магазин</h1>\n `
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//store.dispatch(actionPromise('delay1000', delay(1000)))
|
|
|
//store.dispatch(actionPromise('delay2000', delay(2000)))
|
|
|
//store.dispatch(actionPromise('failedfetch', fetch('https://swapi.dev/api/people/1/')
|
|
|
- //.then(res => res.json())))
|
|
|
+//.then(res => res.json())))
|
|
|
|
|
|
store.subscribe(() => {
|
|
|
- const {history} = store.getState().promise;
|
|
|
- const [,route] = location.hash.split('/');
|
|
|
+ const { history } = store.getState().promise;
|
|
|
+ const [, route] = location.hash.split('/');
|
|
|
|
|
|
- if (history?.payload && route === 'dashboard'){
|
|
|
+ if (history?.payload && route === 'dashboard') {
|
|
|
|
|
|
main.innerHTML = "<p><b>История ваших заказов:</b></p>";
|
|
|
- const card = document.createElement('div');
|
|
|
-
|
|
|
- for(let [key,value] of Object.entries(history.payload)) {
|
|
|
- const {_id, createdAt, total, orderGoods} = value;
|
|
|
+ const card = document.createElement('div');
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(history.payload)) {
|
|
|
+ const { _id, createdAt, total, orderGoods } = value;
|
|
|
const p1El = document.createElement("p");
|
|
|
const dateOfOrder = new Date(+createdAt);
|
|
|
p1El.innerHTML = `${dateOfOrder.toLocaleDateString()} ${dateOfOrder.toLocaleTimeString()}
|
|
|
Заказ ID: ${_id} от , c ${orderGoods.length} товарами на сумму ${total} грн`;
|
|
|
- card.append(p1El);
|
|
|
+ card.append(p1El);
|
|
|
}
|
|
|
-
|
|
|
- if (Object.keys(history.payload).length==0) {
|
|
|
+
|
|
|
+ if (Object.keys(history.payload).length == 0) {
|
|
|
const p1El = document.createElement("p");
|
|
|
p1El.innerHTML = "<p>Вы раньше еще ничего не заказывали</p>";
|
|
|
card.append(p1El);
|
|
@@ -619,27 +621,27 @@ store.subscribe(() => {
|
|
|
main.append(card);
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
});
|
|
|
|
|
|
function alerting() {
|
|
|
- const {auth} = store.getState();
|
|
|
- if(Object.keys(auth).length!==0) {
|
|
|
+ const { auth } = store.getState();
|
|
|
+ if (Object.keys(auth).length !== 0) {
|
|
|
username = auth?.payload.sub.login;
|
|
|
}
|
|
|
- if(username) {
|
|
|
+ if (username) {
|
|
|
alert(`${username}, вы успешно зашли на сайт!`);
|
|
|
document.location.hash = "#/category/5dc49f4d5df9d670df48cc64";
|
|
|
-
|
|
|
+
|
|
|
} else {
|
|
|
alert("Вы ввели неправильно логин или пароль!");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function alertingReg(id, login) {
|
|
|
- if(id) {
|
|
|
+ if (id) {
|
|
|
alert(`Вы успешно зарегистрировались с логином ${login}`);
|
|
|
} else {
|
|
|
- alert(`Логин ${login} уже занят, придумайте другой!`);
|
|
|
+ alert(`Логин ${login} уже занят, прыдумайте другой!`);
|
|
|
}
|
|
|
}
|