yankevich0210
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
                                                            // Redux продвинутый и модуль

                                                            // Редьюсеры
                                                            // задание 1 promiseReducer
                                                            {
                                                              const initialState = {};

                                                              const promiseReducer = (state = initialState, action) => {
                                                                const { type, key, payload, error } = action;
                                                                switch (type) {
                                                                  case 'ACTION_PENDING':
                                                                    return {
                                                                      ...state,
                                                                      [key]: { status: 'PENDING', payload: null, error: null },
                                                                    };
                                                                  case 'ACTION_FULFILLED':
                                                                    return {
                                                                      ...state,
                                                                      [key]: { status: 'FULFILLED', payload, error: null },
                                                                    };
                                                                  case 'ACTION_REJECTED':
                                                                    return {
                                                                      ...state,
                                                                      [key]: { status: 'REJECTED', payload: null, error },
                                                                    };
                                                                  default:
                                                                    return state;
                                                                }
                                                              };

                                                              const actionPromise = (key, promise) => {
                                                                return (dispatch) => {
                                                                  dispatch({ type: 'ACTION_PENDING', key });
                                                                  promise
                                                                    .then((res) => {
                                                                      dispatch({ type: 'ACTION_FULFILLED', key, payload: res });
                                                                    })
                                                                    .catch((err) => {
                                                                      dispatch({ type: 'ACTION_REJECTED', key, error: err });
                                                                    });
                                                                };
                                                              };

                                                              const store = createStore(promiseReducer);

                                                              store.subscribe(() => console.log(store.getState()));

                                                              store.dispatch(actionPromise('delay', delay(1000)));
                                                              store.dispatch(
                                                                actionPromise(
                                                                  'luke',
                                                                  fetch('https://swapi.dev/api/people/1').then((res) => res.json()),
                                                                ),
                                                              );
                                                              store.dispatch(
                                                                actionPromise(
                                                                  'tatooine',
                                                                  fetch('https://swapi.dev/api/planets/1').then((res) => res.json()),
                                                                ),
                                                              );
                                                            }

                                                            // задание 2 authReducer
                                                            {
                                                              // Этот редьюсер отвечает за хранение и обработку состояния залогиненности пользователя. Есть два вида состояния: залогинен и не залогинен. Если пользователь залогинен, то состояние будет иметь вид: {token: "jwt токен", payload: {.....раскодированная информация из токена}}. Если же пользователь не залогинен, то состояние будет пустым объектом {}. Редьюсер обрабатывает два типа экшенов: AUTH_LOGIN и AUTH_LOGOUT. Экшен AUTH_LOGIN используется для логина и принимает в качестве аргумента токен, а экшен AUTH_LOGOUT используется для разлогинивания. В случае, если токен не удалось раскодировать, редьюсер возвращает пустой объект, то есть разлогинивает пользователя.
                                                            }

                                                            // задание 3 cartReducer
                                                            {
                                                            }

                                                            // GraphQL запросы
                                                            // Запрос на список корневых категорий
                                                            {
                                                              results = CategoryFind((query = { parent: null }));
                                                            }

                                                            // Запрос для получения одной категории с товарами и картинками
                                                            {
                                                              query {
                                                        category(_id: "5f9df9a5f5f5f5f5f5f5f5f5"){
                                                          name
                                                          products{
                                                            name
                                                            image
                                                          }
                                                          subcategories{
                                                            name
                                                          }
                                                        }
                                                      }
                                                            }

                                                            // Запрос на получение товара с описанием и картинками
                                                    {
                                                      query {
                                                  good(_id: "5f9df9a5f5f5f5f5f5f5f5f5"){
                                                    name
                                                    description
                                                    images
                                                  }
                                                }

                                                    }

                                                    // Запрос на регистрацию
                                                    {
                                                      mutation {
                                                  userUpsert(
                                                    input: {
                                                      username: "newuser"
                                                      password: "password123"
                                                    }
                                                  ) {
                                                    user {
                                                      _id
                                                      username
                                                    }
                                                  }
                                                }

                                                    }

                                                    {
                                                      mutation {
                                            userUpsert(
                                              _id: "5f9df9a5f5f5f5f5f5f5f5f5",
                                              input: {
                                                username: "updateduser"
                                                password: "newpassword123"
                                              }
                                            ) {
                                              user {
                                                _id
                                                username
                                              }
                                            }
                                          }

                                                    }

                                                    // Запрос на логин
                                                    {
                                                      query login($username: String!, $password: String!) {
                                      login(username: $username, password: $password) {
                                        token
                                      }
                                    }

                                                    }
                                                    // Параметры :
                                                    {
                                                      {
                                "username": "your_username",
                                "password": "your_password"
                              }

                                                    }

                                                    // Запрос истории заказов
                                                    {
                       query OrderFind {
                          OrderFind {
                            _id
                            date
                            status
                            items {
                              _id
                              good {
                                _id
                                name
                                price
                              }
                              quantity
                            }
                            total
                          }
                        }

                                                    }

                                                    // Запрос оформления заказа
                                                    {
                                                      mutation OrderUpsert($orderGoods: [OrderGoodInput]) {
                    OrderUpsert(orderGoods: $orderGoods) {
                      _id
                    }
                  }

                                                    }

                                                    {
                                                      variables: {
              orderGoods: [
                {good: {_id: "5f16b2efa7d8d922f4df9f9c"}, count: 2},
                {good: {_id: "5f16b2efa7d8d922f4df9f9d"}, count: 3}
              ]
            }

                                                    }

      // Вспомогательные функции
      // getGql
      {
        function getGQL(url) {
        return function gql(query, variables = {}) {
          return fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${localStorage.getItem('authToken')}`
            },
            body: JSON.stringify({
              query,
              variables
            })
          })
          .then(res => res.json())
          .then(data => {
            if (data.errors) {
              throw data.errors;
            }
            return data.data[Object.keys(data.data)[0]];
          });
        }
      }
      }

      // localStoredReducer
      {
        function localStoredReducer(originalReducer, localStorageKey){
          let firstRun = true;

          function wrapper(state, action){
              if(firstRun){
                  firstRun = false;
                  try {
                      const storedState = JSON.parse(localStorage.getItem(localStorageKey));
                      if(storedState) return storedState;
                  } catch (error) {
                      console.log(error);
                  }
              }
              const newState = originalReducer(state, action);
              localStorage.setItem(localStorageKey, JSON.stringify(newState));
              return newState;
          }

          return wrapper;
      }
      }

      {
        const store = createStore(localStoredReducer(cartReducer, 'cart'))

      store.subscribe(() => console.log(store.getState()))

      store.dispatch(actionCartAdd({_id: 'пиво', price: 50}))
      store.dispatch(actionCartAdd({_id: 'чипсы', price: 75}))

      }
    </script>
  </body>
</html>