GennadySht
/
HomeWork


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
							<Header>Gql</Header>

<body>
    <script>
        function jwtDecode(token) {                         // расщифровки токена авторизации
            if (!token || typeof token != "string")
                return undefined;
            let tokenArr = token.split(".");
            if (tokenArr.length != 3)
                return undefined;
            try {
                let tokenJsonStr = atob(tokenArr[1]);
                let tokenJson = JSON.parse(tokenJsonStr);
                return tokenJson;
            }
            catch {
                return undefined;
            }
        }
        function combineReducers(reducers) {
            function totalReducer(totalState = {}, action) {
                const newTotalState = {} //объект, который будет хранить только новые состояния дочерних редьюсеров

                //цикл + квадратные скобочки позволяют написать код, который будет работать с любыми количеством дочерных редьюсеров
                for (const [reducerName, childReducer] of Object.entries(reducers)) {
                    const newState = childReducer(totalState[reducerName], action) //запуск дочернего редьюсера
                    if (newState !== totalState[reducerName]) { //если он отреагировал на action
                        newTotalState[reducerName] = newState //добавляем его в newTotalState
                    }
                }

                //Универсальная проверка на то, что хотя бы один дочерний редьюсер создал новый стейт:
                if (Object.values(newTotalState).length) {
                    return { ...totalState, ...newTotalState } //создаем новый общий стейт, накладывая новый стейты дочерних редьюсеров на старые
                }

                return totalState //если экшен не был понят ни одним из дочерних редьюсеров, возвращаем общий стейт как был.
            }

            return totalReducer
        }

        function cartReducer(state = {}, action) {                   // диспетчер обработки
            switch (action.type) {

                case 'CART_ADD':
                    if (action.count >= 0) {
                        let newState = { ...state };
                        let { count } = state[action.good._id] ?? { count: 0 };
                        newState[action.good._id] = { count: action.count + count, good: { ...action.good } }
                        return newState;
                    }
                case 'CART_SUB':
                    if (action.count >= 0) {
                        let newState = { ...state };
                        let { count } = state[action.good._id] ?? { count: 0 };
                        if (count >= action.count) {
                            newState[action.good._id] = { count: action.count - count, good: { ...action.good } }
                            return newState;
                        }
                    }
                    break;
                case 'CART_DEL':
                    {
                        let newState = { ...state };
                        delete newState[action.good._id];
                        return newState;
                    }
                case 'CART_SET':
                    {
                        let newState = { ...state };
                        newState[action.good._id] = { count: action.count, good: { ...action.good } };
                        return newState;
                    }
                case 'CART_CLEAR':
                    return {};
            }
            return state;
        }
        function localStoredReducer(originalReducer, localStorageKey) {
            let firstRun = true;
            function wrapper(state, action) {
                if (firstRun) {
                    firstRun = false;
                    try {
                        let state = JSON.parse(localStorage[localStorageKey]);
                        if (state.authToken)
                            return state;
                    }
                    catch { }
                }
                let res = originalReducer(state, action);
                localStorage[localStorageKey] = JSON.stringify(res);
                return res;
            }
            return wrapper
        }
        function promiseReducer(state = {}, action) {                   // диспетчер обработки
            if (action) {
                if (action.type === 'PROMISE') {
                    let newState = { ...state };
                    newState[action.name] = { status: action.status, payload: action.payload, error: action.error };
                    return newState;
                }
            }
            return state;
        }
        function authReducer(state = {}, action) {                   // диспетчер обработки login
            if (action) {
                if (action.type === 'AUTH_LOGIN') {
                    let newState = { ...state };
                    newState.token = action.token;
                    newState.payload = jwtDecode(action.token);
                    if (!newState.payload) {
                        newState.token = undefined;
                    }
                    window.localStorage.authToken = newState.token;
                    return newState;
                }
                else if (action.type === 'AUTH_LOGOUT') {
                    let newState = { ...state };
                    newState.token = undefined;
                    newState.payload = undefined;
                    return newState;
                }
                else
                    localStorage.authToken = undefined;
            }
            return state;
        }
        function createStore(reducer) {
            let state = reducer(undefined, {})              //стартовая инициализация состояния, запуск редьюсера со state === undefined
            let cbs = []                                      //массив подписчиков

            const getState = () => { return state; }                   //функция, возвращающая переменную из замыкания
            const subscribe = cb => (cbs.push(cb),            //запоминаем подписчиков в массиве
                () => cbs = cbs.filter(c => c !== cb))      //возвращаем функцию unsubscribe, которая удаляет подписчика из списка

            function 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 getGql(url) {
            return function gql(query, vars = undefined) {
                let fetchSettings =
                {
                    method: "POST",
                    headers:
                    {
                        "Content-Type": "application/json",
                        "Accept": "application/json"
                    },
                    body: JSON.stringify(
                        {
                            query: query,
                            variables: vars
                        })
                };
                if (window.localStorage.authToken) {
                    fetchSettings.headers["Authorization"] = `Bearer ${window.localStorage.authToken}`;
                }
                return fetch(url, fetchSettings)
                    .then(res => {
                        if (!res.ok) {
                            throw Error(res.statusText);
                        }
                        return res.json();
                    });
            }
        }
        function gql(url, query, vars) {
            let fetchSettings =
            {
                method: "POST",
                headers:
                {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                body: JSON.stringify(
                    {
                        query: query,
                        variables: vars

                    })
            };
            return fetch(url, fetchSettings).then(res => res.json());
        }

        const actionPromiseGql = (name, promise) => {
            return actionPromiseGqlInt = async (dispatch) => {
                dispatch(actionPending(name)) //сигнализируем redux, что промис начался
                try {
                    const payload = await promise //ожидаем промиса
                    dispatch(actionFulfilled(name, payload)) //сигнализируем redux, что промис успешно выполнен
                    return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
                }
                catch (error) {
                    dispatch(actionRejected(name, error)) //в случае ошибки - сигнализируем redux, что промис несложился
                }
            }
        }
        /*function actionAuthGql(promise) {
            return async function Exec(dispatch) {
                try {
                    const payload = await promise           //ожидаем промиса;
                    let result = Object.values(payload.data)[0];
                    dispatch(actionAuthLogin(result)); //сигнализируем redux, что промис успешно выполнен
                    return result;                               //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
                }
                catch (error) {
                    dispatch(actionLogOut())           //в случае ошибки - сигнализируем redux, что промис несложился
                }
            };
        }*/
        const actionPending = (name) => ({ type: 'PROMISE', name: name, status: 'PENDING' });
        const actionFulfilled = (name, payload) => ({ type: 'PROMISE', name: name, payload: payload, status: 'FULFILLED' });
        const actionRejected = (name, error) => ({ type: 'PROMISE', name: name, error: error, status: 'REJECTED' });
        const actionAuthLogin = token => ({ type: 'AUTH_LOGIN', token });
        const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' });
        const actionCartAdd = (good, count = 1) => ({ type: 'CART_ADD', count: count, good: good });
        const actionCartSub = (good, count = 1) => ({ type: 'CART_SUB', count, good }); //Уменьшение количества товара. Должен уменьшать количество товара в state, или удалять его если количество будет 0 или отрицательным
        const actionCartDel = (good) => ({ type: 'CART_DEL', good }); //Удаление товара. Должен удалять ключ из state
        const actionCartSet = (good, count = 1) => ({ type: 'CART_SET', count, good }); //Задание количества товара. В отличие от добавления и уменьшения, не учитывает того количества, которое уже было в корзине, а тупо назначает количество поверху (или создает новый ключ, если в корзине товара не было). Если count 0 или отрицательное число - удаляем ключ из корзины;
        const actionCartClear = () => ({ type: 'CART_CLEAR' }); //Очистка корзины. state должен стать пустым объектом {}

        ///////////////////////////////////////
        const gqlRootCats = () => {
            const catQuery = `query roots {
                CategoryFind(query: "[{\\"parent\\": null }]") {
                                        _id name
                                    }}`;
            return gql("http://shop-roles.node.ed.asmer.org.ua/graphql", catQuery);
        }
        const actionRootCats = () =>
            actionPromiseGql('rootCats', gqlRootCats());
        const gqlCategoryFindOne = (id) => {
            const catQuery = `query CategoryFindOne($q: String) {
                    CategoryFindOne(query: $q) {
                            _id name
                            parent { _id name }
                            subCategories { _id name }
                            goods { _id name price description
                            images { url }
                        }
                    }
                }`;
            return gql("http://shop-roles.node.ed.asmer.org.ua/graphql", catQuery, { q: `[{\"_id\": \"${id}\"}]` });
        }
        const actionCategoryFindOne = (id) =>
            actionPromiseGql('catFindOne', gqlCategoryFindOne(id));
        const gqlGoodFindOne = (id) => {
            const catQuery = `
                        query GoodFindOne($q: String) {
                            GoodFindOne(query: $q) {
                                _id name  price description
                                images {
                                    url
                                }
                            }
                        }
                        `;
            return gql("http://shop-roles.node.ed.asmer.org.ua/graphql", catQuery, { q: `[{\"_id\": \"${id}\"}]` });
        }
        const actionGoodFindOne = (id) =>
            actionPromiseGql('goodsFindOne', gqlGoodFindOne(id));
        //////////////////////////////////
        const actionLogin = (login, password) => {
            const upsertQuery = `query login($login:String, $password:String){
                            	login(login:$login, password:$password)
                        }`;

            return gql("http://shop-roles.node.ed.asmer.org.ua/graphql", upsertQuery, { login: login, password: password });
        }
        const actionFullLogin = (login, password) => {
            return gqlFullLogin = async (dispatch) => {
                //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
                //так как actionPromise возвращает асинхронную функцию
                let promiseResult = dispatch((dispatch) => actionLogin(login, password));
                let res = await promiseResult;
                if (res && res.data) {
                    let token = Object.values(res.data)[0];
                    if (token && typeof token == 'string')
                        return dispatch(actionAuthLogin(token));
                }
                //проверьте что token - строка и отдайте его в actionAuthLogin
            }
        }
        ////////////////////////////////////////
        const actionAuthUpsert = (login, password) => {
            const loginQuery = `mutation UserRegistration($login: String, $password: String) {
                                    UserUpsert(user: {login: $login, password: $password}) {
                                        _id createdAt
                                    }
                                }`;

            return gql("http://shop-roles.node.ed.asmer.org.ua/graphql", loginQuery, { login: login, password: password });
        }
        const actionFullAuthUpsert = (login, password) => {
            return gqlFullAuthUpsert = async (dispatch) => {
                //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
                //так как actionPromise возвращает асинхронную функцию
                let promiseResult = dispatch((dispatch) => actionAuthUpsert(login, password));
                let res = await promiseResult;
                dispatch(actionFullLogin(login, password));
                //проверьте что token - строка и отдайте его в actionAuthLogin
            }
        }
        ////////////////////////////////////////
        const orderUpsert = (order, id = null) => {
            const orderUpsertQuery = `mutation OrderUpsert($order: OrderInput) {
                                    OrderUpsert(order: $order) {
                                        _id
                                    }
                                }`;
            let gqlFunc = getGql("http://shop-roles.node.ed.asmer.org.ua/graphql");
            return gqlFunc(orderUpsertQuery, { order: { "_id": id, "orderGoods": order } });
        }
        const orderFullUpsert = () => {
            return gqlFullOrderUpsert = async (dispatch, getState) => {
                let state = getState();
                let order = [];
                for (cartItem of Object.values(state.cartReducer)) {
                    //{count: 3, good: {_id: "xxxx" }}
                    order.push({ good: { _id: cartItem.good._id }, count: cartItem.count });
                }
                if (order.length == 0)
                    return;
                //dispatch возвращает то, что вернул thunk, возвращаемый actionLogin, а там промис, 
                //так как actionPromise возвращает асинхронную функцию
                let promiseResult = orderUpsert(order);
                let res = await promiseResult;
                if (res && res.errors && res.errors.length > 0) {
                    throw res.errors[0];
                }
                dispatch(actionCartClear());
                //проверьте что token - строка и отдайте его в actionAuthLogin
            }
        }
        const gqlFindOrders = () => {
            const findOrdersQuery = `query OrderFind {
                                    OrderFind(query: "[{}]") {
                                        _id total
                                        orderGoods {
                                            _id price count total
                                            good {
                                                name
                                            }
                                        }
                                    }
                                    }`;
            return getGql("http://shop-roles.node.ed.asmer.org.ua/graphql")(findOrdersQuery);
        }
        const actionFindOrders = () =>
            actionPromiseGql('orders', gqlFindOrders());
        ///////////////////////////////////////////////////

        const store = createStore(combineReducers({ promiseReducer, authReducer, cartReducer: localStoredReducer(cartReducer, 'cart') }));
        const delay = (ms, action) => new Promise(ok => setTimeout(() => {
            action();
            ok(ms);
        }, ms));
        store.subscribe(() => {
            console.log(store.getState());
        });
        //////////////////////////////////////////////

        //store.dispatch(actionRootCats());
        //store.dispatch(actionCategoryFindOne("6262ca7dbf8b206433f5b3d1"));
        //store.dispatch(actionGoodFindOne("62d3099ab74e1f5f2ec1a125"));
        //store.dispatch(actionFullLogin("Berg", "123456789"));
        //store.dispatch(actionFullAuthUpsert("Berg1", "12345678911"));
        //store.dispatch(actionCartAdd({ _id: '62d30938b74e1f5f2ec1a124', price: 50 }));

        //delay(3000, ()=>store.dispatch(orderFullUpsert()));

        delay(3000, () => store.dispatch(actionFindOrders()));

    </script>
</body>