123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645 |
- 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}){
- if (type === 'PROMISE'){
- return {
- ...state,
- [name]:{status, payload, error}
- }
- }
- return state
- }
- const jwtDecode = token => {
- try {
- let [,payload] = token.split(".");
- let payloadParsed= JSON.parse(atob(payload));
- return payloadParsed;
- }
- catch(e){
- console.log(e);
- }
- }
- function authReducer(state, {type, token}) {
- if (state === undefined) {
- if(localStorage.authToken) {
- type = "AUTH_LOGIN";
- token = localStorage.authToken;
- } else {
- return {};
- }
- }
- if (type === 'AUTH_LOGIN') {
- let payload = jwtDecode(token);
- if (payload) {
- localStorage.authToken = token;
- return {token, payload};
- }
- }
- if (type === 'AUTH_LOGOUT') {
- localStorage.authToken="";
- return {};
- }
- return state;
- }
- function combineReducers(reducers) {
- return (state = {}, action) => {
- const newState = {}
- for (const [reducerName, reducer] of Object.entries(reducers)) {
- let newSubState = reducer(state[reducerName], action)
- if (newSubState !== state[reducerName]) {
- newState[reducerName] = newSubState
- }
- }
- if (Object.keys(newState).length !== 0) {
- return { ...state, ...newState }
- } else {
- return state
- }
- }
- }
- 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}
- }
- }
- if (type==='CART_CHANGE') {
- return {
- ...state,
- [_id]:{count: count, good: good}
- }
- }
- if (type==='CART_DELETE') {
- let newState = {... state};
- delete newState[_id];
- // const {_id, ...newState} = state;
- return {
- ...newState,
- }
- }
- if (type==='CART_CLEAR') {
- return {}
- }
- return state;
- }
- 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 cartEl = document.getElementsByClassName("cartN")[0];
- let username;
- const loginEl = document.getElementsByClassName("loginQ")[0];
- const logoEl = document.getElementById("logo");
- // const store = createStore(promiseReducer) //не забудьте combineReducers если он у вас уже есть
- 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 actionPromise = (name, promise) =>
- async dispatch => {
- dispatch(actionPending(name))
- try {
- let payload = await promise
- dispatch(actionFulfilled(name, payload))
- return payload
- }
- catch(error){
- dispatch(actionRejected(name, error))
- }
- }
- 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.data){
- return Object.values(data.data)[0]
- }
- else throw new Error(JSON.stringify(data.errors))
- })
- const backendURL = "http://shop-roles.node.ed.asmer.org.ua";
- const gql = getGQL(backendURL + '/graphql')
- 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 goods {
- _id
- name
- }
- }
- _id name goods {
- _id name price images {
- url
- }
- }
- }
- }`, { q: JSON.stringify([{ _id }]) }));
- const actionGoodById = (_id) =>
- actionPromise('goodById', gql(`query goodz($q: String){
- GoodFindOne(query: $q) {
- _id name price description
- images{
- url
- }
- categories{
- name
- }
- }
- }`, {q: JSON.stringify([{_id}])}));
- const orderHistory = () =>
- actionPromise(
- 'history',
- gql(` query OrderFind{
- OrderFind(query:"[{}]"){
- _id total createdAt orderGoods{
- count good{
- _id name price images{
- url
- }
- }
- owner{
- _id login
- }
- }
- }
- }
- `));
- const actionLogin = (login, password) =>
- actionPromise(
- 'login',
- gql(
- `query log($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));
- 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}){
- _id login
- }
- }`,
- { 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(
- `
- mutation newOrder($order:OrderInput){
- OrderUpsert(order:$order)
- { _id total }
- }
- `,
- { 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));
- }
- };
- store.dispatch(actionRootCats());
- 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 = {
- category(){
- store.dispatch(actionCatById(_id));
- },
- good(){
- // console.log("good")
- //задиспатчить actionGoodById
- // console.log('ТОВАРОСТРАНИЦА')
- store.dispatch(actionGoodById(_id));
- },
- login(){
- main.innerHTML = `<h2>Для осуществления заказов:<br>если вы зарегистрированы,
- введите логин и пароль и нажмите Войти;<br>если не зарегистрированы - нужно зарегистрироваться</h2>`;
- const formEl = document.createElement("div");
- const p1el = document.createElement("p");
- const p2el = document.createElement("p");
- const p3el = document.createElement("p");
- const br1El = document.createElement("br");
- const br2El = document.createElement("br");
- const br3El = document.createElement("br");
- const input1El = document.createElement("input");
- const input2El = document.createElement("input");
- const buttonLogEl = document.createElement("button");
- const buttonRegEl = document.createElement("button");
- const buttonLogOutEl = document.createElement("button");
- p1el.innerText = "Введите логин:";
- p2el.innerText = "Введите пароль:";
- input1El.id = "inputLogin";
- input2El.id = "inputPassword";
- input2El.type = "password";
- buttonLogEl.innerText = "Войти";
- buttonRegEl.innerText = "Зарегистрироваться";
- buttonLogOutEl.innerText = "Выйти";
- if(username) {
- buttonLogEl.disabled = true;
- buttonRegEl.disabled = true;
- }
- buttonLogEl.onclick = () => {
- store.dispatch(actionFullLogin(input1El.value, input2El.value));
- // if (username) location.hash = "#/goods";
- }
- buttonRegEl.onclick = () => {
- store.dispatch(actionFullRegister(input1El.value, input2El.value));
- }
- buttonLogOutEl.onclick = () => {
- store.dispatch(actionAuthLogout());
- username = "";
- document.location.hash = "#/login/";
- }
- formEl.append(p1el,input1El,p2el,input2El,br1El,br2El,buttonLogEl,buttonLogOutEl,buttonRegEl);
- main.append(formEl);
- //по кнопке - store.dispatch(actionFullLogin(login, password))
- },
- register(){
- //отрисовка тут
- //по кнопке - store.dispatch(actionFullRegister(login, password))
- },
- dashboard(){
- store.dispatch(orderHistory());
- },
- cart(){
- const cart = store.getState().cart;
- if(Object.entries(cart).length>0) {
- main.innerHTML = `<h2>Содержимое вашей корзины</h2>`;
- const {cart} = store.getState();
- let totalScore = 0;
- let totalCount = 0;
- const tableCartEl = document.createElement("table");
- const trEl = document.createElement("tr");
- const td1El = document.createElement("td");
- const td2El = document.createElement("td");
- const td3El = document.createElement("td");
- const td4El = document.createElement("td");
- const td5El = document.createElement("td");
- td1El.innerText = "Удалить";
- td2El.innerText = "Наименование товара";
- td3El.innerText = "Цена";
- td4El.innerText = "Количество";
- td5El.innerText = "Изменить";
- trEl.append(td1El,td2El,td3El,td4El,td5El);
- tableCartEl.append(trEl);
-
- if (Object.entries(cart).length>0) {
- for (let [key, value] of Object.entries(cart)) {
- const {count, good} = value;
- const {name, _id, price} = good;
- const buttonDel = document.createElement("button");
- const buttonMinus = document.createElement("button");
- const buttonPlus = document.createElement("button");
- buttonMinus.innerText = "-";
- buttonPlus.innerText = "+";
- buttonDel.innerText = "Удалить";
- buttonMinus.onclick = () => {
- if(count==1) {
- store.dispatch(actionCartDelete({_id, name, price}));
- } else {
- store.dispatch(actionCartChange({_id, name, price}, count-1));
- }
- document.location.hash = `#/cart/${_id}/${count}`
- }
- buttonPlus.onclick = () => {
- store.dispatch(actionCartChange({_id, name, price}, count+1));
- document.location.hash = `#/cart/${_id}/${count}`
- }
- buttonDel.onclick = () => {
- 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");
- const td3El = document.createElement("td");
- const td4El = document.createElement("td");
- const td5El = document.createElement("td");
- td1El.append(buttonDel);
- td2El.innerText = name;
- td3El.innerText = price;
- td4El.innerText = count;
- td5El.append(buttonMinus,buttonPlus);
- trEl.append(td1El,td2El,td3El,td4El,td5El);
- tableCartEl.append(trEl);
-
- totalScore+=price*count;
- totalCount+=count;
-
- }
- const trEl = document.createElement("tr");
- const td1El = document.createElement("td");
- const td2El = document.createElement("td");
- const td3El = document.createElement("td");
- const td4El = document.createElement("td");
- const td5El = document.createElement("td");
- td1El.innerText = "";
- td2El.innerText = "";
- td3El.innerText = totalScore;
- td4El.innerText = totalCount;
- td5El.innerText = "";
- 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");
- buttonSend.innerText = "Отправить заказ";
- buttonCartClear.innerText = "Очистить корзину";
- buttonHistory.innerText = "История заказов";
- buttonSend.onclick = () => {
- store.dispatch(actionOrder());
-
- }
- buttonCartClear.onclick = () => {
- store.dispatch(actionCartClear());
- document.location.hash = "#/cart/";
- }
- buttonHistory.onclick = () => {
- document.location.hash = "#/dashboard";
- }
- main.append(buttonSend,buttonCartClear, buttonHistory);
- } else {
- main.innerHTML = `<h2>Ваша корзина пуста...</h2><a href="#/dashboard">история заказов</a>`;
- }
- },
- }
- 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} = 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);
- }
- }
- 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)
- }
- }
- })
- store.subscribe(() => {
- 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;
- main.innerHTML = `<h2>${name}</h2>`;
- 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}',
- name: '${name}', price: '${price}'}))">Купить</button>
- <p>Описание товара:</p>
- <p>${description}</p>
- `
- main.append(card);
- }
- })
- 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;
- }
- }
- cartEl.innerText=numInCart;
- //достаем всю корзину
- //считаем общее количество всех позиций (3 айфона + 7 пицц = 10)
- //выводим число в кошик на странице через его HTML id
- });
- store.subscribe(() => {
- const {auth} = store.getState();
- // const [,route,] = location.hash.split('/');
- if(Object.keys(auth).length!==0) {
- username = auth?.payload.sub.login;
- }
- 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 `
- }
- });
- //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())))
- store.subscribe(() => {
- const {history} = store.getState().promise;
- const [,route] = location.hash.split('/');
- 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 p1El = document.createElement("p");
- const dateOfOrder = new Date(+createdAt);
- p1El.innerHTML = `${dateOfOrder.toLocaleDateString()} ${dateOfOrder.toLocaleTimeString()}
- Заказ ID: ${_id} от , c ${orderGoods.length} товарами на сумму ${total} грн`;
- card.append(p1El);
- }
-
- if (Object.keys(history.payload).length==0) {
- const p1El = document.createElement("p");
- p1El.innerHTML = "<p>Вы раньше еще ничего не заказывали</p>";
- card.append(p1El);
- }
- main.append(card);
- }
-
- });
- function alerting() {
- const {auth} = store.getState();
- if(Object.keys(auth).length!==0) {
- username = auth?.payload.sub.login;
- }
- if(username) {
- alert(`${username}, вы успешно зашли на сайт!`);
- document.location.hash = "#/category/5dc49f4d5df9d670df48cc64";
-
- } else {
- alert("Вы ввели неправильно логин или пароль!");
- }
- }
- function alertingReg(id, login) {
- if(id) {
- alert(`Вы успешно зарегистрировались с логином ${login}`);
- } else {
- alert(`Логин ${login} уже занят, придумайте другой!`);
- }
- }
|