|
@@ -89,6 +89,10 @@ function cartReducer(state = {}, { type, good = {}, count }) {
|
|
CART_CLEAR() {
|
|
CART_CLEAR() {
|
|
return {};
|
|
return {};
|
|
},
|
|
},
|
|
|
|
+ CART_SHOW() {
|
|
|
|
+ state = JSON.parse(localStorage.cart);
|
|
|
|
+ return state;
|
|
|
|
+ },
|
|
};
|
|
};
|
|
if (type in types) {
|
|
if (type in types) {
|
|
return types[type]();
|
|
return types[type]();
|
|
@@ -169,29 +173,32 @@ const actionCartChange = (good, count) => ({
|
|
});
|
|
});
|
|
const actionCartRemove = (good) => ({ type: "CART_REMOVE", good });
|
|
const actionCartRemove = (good) => ({ type: "CART_REMOVE", good });
|
|
const actionCartClear = () => ({ type: "CART_CLEAR" });
|
|
const actionCartClear = () => ({ type: "CART_CLEAR" });
|
|
|
|
+const actionCartShow = () => ({ type: "CART_SHOW" });
|
|
|
|
|
|
const actionOrder = () => async (dispatch, getState) => {
|
|
const actionOrder = () => async (dispatch, getState) => {
|
|
let { cart } = getState();
|
|
let { cart } = getState();
|
|
- let count = 0;
|
|
|
|
- const orderGoods = Object.entries(cart).map(([_id, {}]) => ({
|
|
|
|
|
|
+ const orderGoods = Object.entries(cart).map(([_id, { count }]) => ({
|
|
good: { _id },
|
|
good: { _id },
|
|
- count: count++,
|
|
|
|
|
|
+ count,
|
|
}));
|
|
}));
|
|
-
|
|
|
|
- await dispatch(
|
|
|
|
|
|
+ let result = await dispatch(
|
|
actionPromise(
|
|
actionPromise(
|
|
"order",
|
|
"order",
|
|
gql(
|
|
gql(
|
|
`
|
|
`
|
|
- mutation newOrder($order:OrderInput){
|
|
|
|
- OrderUpsert(order:$order)
|
|
|
|
- { _id total }
|
|
|
|
- }
|
|
|
|
- `,
|
|
|
|
|
|
+ mutation newOrder($order:OrderInput){
|
|
|
|
+ OrderUpsert(order:$order)
|
|
|
|
+ { _id total }
|
|
|
|
+ }
|
|
|
|
+ `,
|
|
{ order: { orderGoods } }
|
|
{ order: { orderGoods } }
|
|
)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
);
|
|
|
|
+
|
|
|
|
+ if (result?._id) {
|
|
|
|
+ dispatch(actionCleanCart());
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
const getGQL =
|
|
const getGQL =
|
|
@@ -273,7 +280,9 @@ const actionLogin = (login, password) =>
|
|
);
|
|
);
|
|
|
|
|
|
const actionFullLogin = (login, password) => async (dispatch) => {
|
|
const actionFullLogin = (login, password) => async (dispatch) => {
|
|
|
|
+ console.log(login, password);
|
|
let token = await dispatch(actionLogin(login, password));
|
|
let token = await dispatch(actionLogin(login, password));
|
|
|
|
+ console.log(token);
|
|
if (token) {
|
|
if (token) {
|
|
dispatch(actionAuthLogin(token));
|
|
dispatch(actionAuthLogin(token));
|
|
}
|
|
}
|
|
@@ -281,11 +290,11 @@ const actionFullLogin = (login, password) => async (dispatch) => {
|
|
|
|
|
|
const actionRegister = (login, password) =>
|
|
const actionRegister = (login, password) =>
|
|
actionPromise(
|
|
actionPromise(
|
|
- "register",
|
|
|
|
|
|
+ "registration",
|
|
gql(
|
|
gql(
|
|
- `mutation reg($user:UserInput) {
|
|
|
|
|
|
+ `mutation reg2($user:UserInput) {
|
|
UserUpsert(user:$user) {
|
|
UserUpsert(user:$user) {
|
|
- _id
|
|
|
|
|
|
+ _id login
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
`,
|
|
@@ -294,7 +303,9 @@ const actionRegister = (login, password) =>
|
|
);
|
|
);
|
|
|
|
|
|
const actionFullRegister = (login, password) => async (dispatch) => {
|
|
const actionFullRegister = (login, password) => async (dispatch) => {
|
|
|
|
+ console.log(login, password);
|
|
let check = await dispatch(actionRegister(login, password));
|
|
let check = await dispatch(actionRegister(login, password));
|
|
|
|
+ console.log(check);
|
|
if (check) {
|
|
if (check) {
|
|
dispatch(actionFullLogin(login, password));
|
|
dispatch(actionFullLogin(login, password));
|
|
}
|
|
}
|
|
@@ -342,18 +353,22 @@ const openCart = () => {
|
|
cardMain.id = "cardMain";
|
|
cardMain.id = "cardMain";
|
|
let goodImgBlock = document.createElement("div");
|
|
let goodImgBlock = document.createElement("div");
|
|
goodImgBlock.innerHTML = `
|
|
goodImgBlock.innerHTML = `
|
|
- <div>
|
|
|
|
<img src="${backURL}/${url}" width="400" height="200"/>
|
|
<img src="${backURL}/${url}" width="400" height="200"/>
|
|
- </div>
|
|
|
|
`;
|
|
`;
|
|
|
|
+ cardMain.appendChild(goodImgBlock);
|
|
let goodInfoBlock = document.createElement("div");
|
|
let goodInfoBlock = document.createElement("div");
|
|
- goodInfoBlock.innerHTML = `
|
|
|
|
- <div>
|
|
|
|
- <h2>${name}</h2>
|
|
|
|
- <p><strong>${price}$</strong></p>
|
|
|
|
- <p><span>${count}</span></p>
|
|
|
|
- </div>
|
|
|
|
- `;
|
|
|
|
|
|
+ let goodName = document.createElement("h2");
|
|
|
|
+ goodName.innerText = `${name}`;
|
|
|
|
+ let goodPrice = document.createElement("p");
|
|
|
|
+ goodPrice.innerText = `${price * count}$`;
|
|
|
|
+ let goodCount = document.createElement("p");
|
|
|
|
+ goodCount.innerText = `${count} шт.`;
|
|
|
|
+ goodInfoBlock.appendChild(goodName);
|
|
|
|
+ goodInfoBlock.appendChild(goodPrice);
|
|
|
|
+ goodInfoBlock.appendChild(goodCount);
|
|
|
|
+ cardMain.appendChild(goodInfoBlock);
|
|
|
|
+
|
|
|
|
+ let br = document.createElement("br");
|
|
let goodEditBlock = document.createElement("div");
|
|
let goodEditBlock = document.createElement("div");
|
|
goodEditBlock.className = "form-outline";
|
|
goodEditBlock.className = "form-outline";
|
|
let deleteBtn = document.createElement("button");
|
|
let deleteBtn = document.createElement("button");
|
|
@@ -362,8 +377,11 @@ const openCart = () => {
|
|
deleteBtn.type = "button";
|
|
deleteBtn.type = "button";
|
|
deleteBtn.className = "btn btn-danger";
|
|
deleteBtn.className = "btn btn-danger";
|
|
goodEditBlock.appendChild(deleteBtn);
|
|
goodEditBlock.appendChild(deleteBtn);
|
|
|
|
+ goodEditBlock.appendChild(br);
|
|
deleteBtn.onclick = () => {
|
|
deleteBtn.onclick = () => {
|
|
store.dispatch(actionCartRemove(cart[good].good));
|
|
store.dispatch(actionCartRemove(cart[good].good));
|
|
|
|
+ cardMain.remove();
|
|
|
|
+ console.log(store.getState());
|
|
};
|
|
};
|
|
|
|
|
|
let countLabel = document.createElement("label");
|
|
let countLabel = document.createElement("label");
|
|
@@ -372,13 +390,17 @@ const openCart = () => {
|
|
countLabel.innerText = "Change count";
|
|
countLabel.innerText = "Change count";
|
|
let countField = document.createElement("input");
|
|
let countField = document.createElement("input");
|
|
countField.type = "number";
|
|
countField.type = "number";
|
|
|
|
+ countField.value = cart[good].count;
|
|
|
|
+ countField.min = "1";
|
|
countField.id = "countField";
|
|
countField.id = "countField";
|
|
countField.className = "form-control";
|
|
countField.className = "form-control";
|
|
goodEditBlock.appendChild(countLabel);
|
|
goodEditBlock.appendChild(countLabel);
|
|
goodEditBlock.appendChild(countField);
|
|
goodEditBlock.appendChild(countField);
|
|
-
|
|
|
|
- cardMain.appendChild(goodImgBlock);
|
|
|
|
- cardMain.appendChild(goodInfoBlock);
|
|
|
|
|
|
+ countField.oninput = () => {
|
|
|
|
+ goodPrice.innerText = `${price * +countField.value}$`;
|
|
|
|
+ goodCount.innerText = `${countField.value} шт.`;
|
|
|
|
+ store.dispatch(actionCartChange(cart[good].good, countField.value));
|
|
|
|
+ };
|
|
cardMain.appendChild(goodEditBlock);
|
|
cardMain.appendChild(goodEditBlock);
|
|
main.appendChild(cardMain);
|
|
main.appendChild(cardMain);
|
|
}
|
|
}
|
|
@@ -398,11 +420,14 @@ const openCart = () => {
|
|
main.appendChild(makeOrder);
|
|
main.appendChild(makeOrder);
|
|
main.appendChild(clearBtn);
|
|
main.appendChild(clearBtn);
|
|
} else {
|
|
} else {
|
|
- main.innerHTML = `<h2>Your cart is empty!</h2>`;
|
|
|
|
|
|
+ main.innerHTML = "<h2>Your cart is empty!</h2>";
|
|
}
|
|
}
|
|
|
|
|
|
makeOrder.onclick = () => {
|
|
makeOrder.onclick = () => {
|
|
store.dispatch(actionOrder());
|
|
store.dispatch(actionOrder());
|
|
|
|
+ alert("Thanks for your order!");
|
|
|
|
+ store.dispatch(actionCartClear());
|
|
|
|
+ document.location.reload();
|
|
};
|
|
};
|
|
|
|
|
|
clearBtn.onclick = () => {
|
|
clearBtn.onclick = () => {
|
|
@@ -467,6 +492,35 @@ window.onhashchange = () => {
|
|
|
|
|
|
window.onhashchange();
|
|
window.onhashchange();
|
|
|
|
|
|
|
|
+store.subscribe(() => {
|
|
|
|
+ const [, route] = location.hash.split("/");
|
|
|
|
+ const { cart } = store.getState();
|
|
|
|
+ if (Object.keys(cart).length === 0 && route === "cart") {
|
|
|
|
+ let makeOrderBtn = document.getElementById("makeOrder");
|
|
|
|
+ let clearCartBtn = document.getElementById("clearBtn");
|
|
|
|
+ if (makeOrderBtn) {
|
|
|
|
+ makeOrderBtn.remove();
|
|
|
|
+ }
|
|
|
|
+ if (clearCartBtn) {
|
|
|
|
+ clearCartBtn.remove();
|
|
|
|
+ }
|
|
|
|
+ localStorage.cart = "";
|
|
|
|
+ main.innerHTML = "<h2>Your cart is empty!</h2>";
|
|
|
|
+ } else if (Object.keys(cart).length !== 0) {
|
|
|
|
+ let cartStr = JSON.stringify(cart);
|
|
|
|
+ localStorage.cart = cartStr;
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+window.onunload = () => {
|
|
|
|
+ if (localStorage.cart !== "") {
|
|
|
|
+ store.dispatch(actionCartShow());
|
|
|
|
+ openCart();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+window.onunload();
|
|
|
|
+
|
|
store.subscribe(() => {
|
|
store.subscribe(() => {
|
|
const { promise } = store.getState();
|
|
const { promise } = store.getState();
|
|
const [, route, _id] = location.hash.split("/");
|
|
const [, route, _id] = location.hash.split("/");
|