# Что нового?

В 2024 году вышла в релиз новая версия Offline Trade-In, которая сильно превосходит легаси, которое работало на стеке 2017 года.
Это было раньше:
- SSR на стороне Django (Python v3.6)
- jQuery / JS Vanilla / Web API
Краткая история: В 2020 году код фронта (при моем первом знакомстве с ним) представлял собой спагетти-легаси и содержал в себе императивную логику преобразования DOM в зависимости от различных событий (понятие Бизнес Логика в приложении отсутствовало в декларативном виде).
Таким образом с 2017 по 2024 велась доработка фич (+ максимально возможный рефакторинг в пользу DX), но все это время требовался новый продукт с более удачным подходом в плане поддержки кода и управлению Бизнес Логикой на уровне менеджмента - именно это и будет составлять основную ценность в будущем. И в 2024, наконец, пришло время переписать старое легаси на современные рельсы **(ссылка на демо будет в конце)**. Чтоб эта информация не потерялась, решил задокументировать текущие подходы и достижения в области решения проблем отладки в числе прочего (это был основной момент, требующий решения, т.к. устранив это, мы стали работать намного эффективнее).

<CollapsibleBox
header="Сводка о проектах"
text="Всего было 4-5 проектов, каждый из которых является частью экосистемы и имеет свой стек технологий:
1️⃣ Сайт для сбыта б/у устройств;
2️⃣ Админская панель;
3️⃣ Сайт для сдачи устройств в Trade-In для физ. лиц (2020);
4️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2017) 👉 поддержка + рефакторинг + развитие Легаси с 2020 до 2023;
5️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2024) 👉 На новом стеке технологий"
/>

# Решённые задачи

## 1. 🏗️ Монорепа разделена на фронтенд и бэкенд

Сборка партнерской версии клиентского приложения вынесена в отдельный проект с настраиваемыми Environments variables для вариативности инстансов (разработка, стейджинг, продакшен) - теперь исходный код узнает для какого инстанса он собирается, только получив envs при сборке (это было важным для нас в рамках спец. операции под кодовым названием **"Соскочить с легаси"**).

<Alert
type="success"
text="Теперь деплой фронта не требует сборки бэкенда, а сборка фронта на всех инстансах работает одинаково"
/>

## 2. 💼 Управление Бизнес Логикой стало прозрачным

Главная особенность текущего проекта (точнее, одного из тех что в работе) заключается в требовании гибкой настройки ветвлений пользовательских сценариев, периодически требующее добавления шагов (в дальнейшем - **дискретных состояний Стейт-Машины**). Новая реализация позволяет донастраивать различные сценарии поведения веб-приложения и дебажить эти сценарии на разных уровнях (внутренняя бизнес-логика, данные по API, вычисляемые значения на основе вводимых пользователем данных - одним словом, все параметры, влияющие на успешный User Flow). Чего удалось достичь:
- Настраиваемая последовательность шагов на уровне конфига Стейт Менеджера XState. Это важно, т.к. в прошлых версиях проекта, с ростом вариантов ветвлений сценариев, настраивать их было весьма затруднительно (императивный подход к мутации DOM требовал анализа всего кода без возможности декомпозировать его на отдельные подзадачи)
- Появилась гибкая валидация ответов API на уровне СТМ (сценарий не пойдет дальше, если ответ не соответствует валидации, все подобные ошибки теперь можно транслировать в UI с соответствующей формулировкой)
- На всем промежутке времени моей деятельности в компании не было представителя бизнеса, который полностью владел логикой приложения (даже Продукт менеджер - но это не его вина, просто проект очень стар). На мои попытки явным образом получить описание бизнес-логики в виде вопросов "Как оно должно здесь работать?", я получал что-то вроде "Оно же как-то работает, а сейчас требуется внести небольшое изменение" (опять же, ничего страшного, просто наша команда попала в ловушку легаси без доки). Итак, **Документация - теперь она есть в виде конфига XState + интерактивной схемы!** Теперь любой разработчик будет знать, *как оно работает*.

<ImagesGalleryBox2 itemsJson='[
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  },
{
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  }
]' />

<Alert
type="success"
text="Теперь основная часть бизнес-логики (понятная и очевидная схема пользовательских сценариев) может быть быстро настроена на уровне конфига и наглядно продемонстрирована в виде блок-схемы. Взаимодействие с менеджером Продукта стало эффективнее. DX стал более совершенным и декларативным"
/>

## 3. 📈 Повысилась эффективность отдела IT

Дебаг и отладка теперь не требуют лишних усилий, репорты по возможным ошибкам сами летят в "Телегу"...

- **BFF сервисы (немного фулл-стека):** Появилась возможность добавить автоматизированные оповещения об ошибках по socket.io (далее некоторые из них улетают в Google Sheets, Telegram и т.д.) **по Socket соединению в отдельном потоке Web Worker**. Анализ логов теперь также может быть автоматизирован для ретрансляции в чаты в виде задач (возможно даже с указанием исполнителя).
- Добавлена функция "Сообщить об ошибке", позволяющая отправить сообщение от Пользователя и историю его взаимодействия с приложением для анализа Разработчиком

<CollapsibleBox
header="Отправка лога и обратная связь от сервера"
text="➡️ Event from App to Worker
➡️ Socket event to your Service
⬅️ Incoming socket event to Worker
⬅️ Event from Worker to App 🏁"
/>

<Alert
type="success"
text="**Теперь информация по каждому прецеденту прилетает в Telegram группу!** Ранее были проблемы скорости реагирования на ошибки в продакшене - их диагностика занимала много времени. Теперь анализ логов взаимодействия пользователя с интерфейсом (и не только) в рамках сессии занимает минуты"
/>

## 4. 🤝 Кастомизация UI для каждого из партнёров стала гибче

Решены проблемы вариативности дизайна, связанные с тем, что кодовая база собираемого приложения ранее НЕ была разделена на подпроекты - изменения интерфейса (как и бизнес-логики) затрагивали всех пользователей. Не было unit & e2e тестов.

<Alert
type="success"
text="Ранее были проблемы реализации специфичного дизайна в зависимости от роли/типа пользователя. Теперь каждый из партнёров будет перенаправлен на конкретное SPA в соответствии с внешним роутом NGINX"
/>

# Стек технологий

- **Vite** / **React** / **Typescript** (принято в стек как современный стандарт, когда SSR не требуется)
- **XState v4.x** (отлично вписался под свои задачи, связанные с ветвлением пользовательских сценариев, 5-я версия на тот момент ещё была не готова к релизам в прод)
- **Valtio** (минималистичный и гибкий подход к управлению состоянием на базе нативных JS механизмов объекта Proxy)
- **Tailwind CSS** / **Headless UI** (ориентированная на утилиты CSS-инфраструктура для быстрого создания современных веб-сайтов, которая позволяет удобно и быстро создавать кастомные компоненты с заданными стандартными параметрами - настройки стилей типовых элеметнов и т.д.)
- **CSS modules** / SCSS (для компонентов с нестандартной версткой)
- **Web Sockets** in **Web Workers** (для отправки логов в отдельном потоке, не нагружая основной поток)

<ControlsBox
  controlsJson='[
    {
      "title": "PREV",
      "label": "Наши стандарты DX (подробнейший разбор)",
      "type": "link",
      "link": "/blog/article/good-dx-exp-2024"
    },
    {
      "title": "START_NEW_TAB",
      "label": "XState interactive scheme",
      "type": "link",
      "link": "https://stately.ai/registry/editor/embed/4c16acf2-6d92-4602-849d-99e1b06f2f39?mode=Design&machineId=f4ab287d-d1a6-4a2f-b0b5-25f6a0d3f4af"
    },
    {
      "title": "NEXT",
      "label": "Life Demo",
      "type": "link",
      "link": "https://pravosleva.pro/subprojects/sp/tradein"
    }
  ]'
/>

💳 Offline Trade-In (Level Up) #smartpriceRINGEO #рабочие_моменты 2024.8 [3/3]

HTTP и WS работают поверх TCP

TCP несимметричный, есть сервер (тот, кто принимает запрос на соединение) и клиент (тот, кто инициирует запрос). Соединение состоит из двух пар значений IP_адрес:ПОРТ, для сервера и клиента. После того как соединение установлено, поменять там ничего нельзя - только разорвать соединение и установить новое

Смысл разделения сетевого стека на уровни в том, чтобы у каждого уровня была своя чётко определённая область задач, независящая от остальных. Это позволяет менять протоколы на разных уровнях независимо, не переписывая весь стек. Поэтому смешивать разные уровни нежелательно.
В принципе, менять IP адрес на ходу можно в некоторых случаях, например, когда смартфон переходит с вышки на вышку, но это чаще всего делается на сетевом уровне, приложения этого даже не замечают

//

Эту проблему надо решать не на прикладном уровне. DNS можно использовать, чтобы балансировать нагрузку. Или, можно создать хренову тучу поддоменов, вида ip1.smartprice.ru ip2.smartprice.ru и т.д. и всё таки переложить балансировку на прикладной уровень. Но подделывать HTTP заголовки браузер не даст

Правда, если проблема проявляется только на планшетах Сбера, а на остальных всё нормально, то видимо дело не в нагрузке. Надо раздобыть планшет на тест и выяснить в чём дело.  Может у них там антивирус что-нибудь особенное делает, они это любят

Вот я нашёл список запрещённых для изменения заголовков в браузере:
https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

About #TCP | fetchRetry, корпоративные планшеты Сбера #smartprice #сетевые_протоколы

# Custom fetch-retry in legacy projects

`fetchRetry.js`
```js
function wait(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay))
}

function fetchRetry({ url, delay = 1000, tries = 0, fetchOptions = {} }) {
  let __triesLeft = tries
  function onError(err) {
    __triesLeft = !!__triesLeft ? __triesLeft - 1 : 0

    if (!__triesLeft) throw err

    return wait(delay).then(() => fetchRetry({ url, delay, tries: __triesLeft, fetchOptions }))
  }
  return fetch(url, fetchOptions).catch(onError)
}
```

### Usage
```js
// --- NOTE: Target action
// 1. Try to use different IPs
const ips = ['178.248.232.203', '2.58.70.214', '159.65.25.117', getAPIBaseUrl()]
const getBaseUrl = ({ ip, url }) => (!validateAnything.hasProtocol(ip) ? `https://${ip}${url}` : `${ip}${url}`)
const getEndpoints = ({ url }) =>
  ips
    .map((ip) => getBaseUrl({ url, ip }))
    .filter((url) => validateAnything.isValidURL(url))
const endpoints = getEndpoints({ url: '/partner_api/tradein/accept' })
const abortController = new AbortController()
const tries = 20

Promise.first(
  endpoints.map((url) =>
    fetchRetry({
      url,
      delay: 30000,
      tries,
      fetchOptions: {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
        signal: abortController.signal,
      },
    })
  )
)
  .then(async (response) => {
    // QuicklyDone fulfils first

    const res = await response.json()
    if (res.ok) {
      abortController.abort()
      targetAction(res)
    } else throw new Error('/accept response is not ok!')
  })
  .catch((errs) => {
    // Arrary of rejections (if no one resolved)
    // Провалено (ips.length * tries) попыток

    // Or one main Error?
  })
// ---
```

`validateAnything.js`
```js
const validateAnything = {
  hasProtocol(str) {
    const pattern = new RegExp('https?:\\/\\/')
    return !!pattern.test(str)
  },
  hasWWW(str) {
    const pattern = new RegExp(/www./)
    return !!pattern.test(str)
  },
  isValidURL(str) {
    const pattern = new RegExp(/(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/)
    return !!pattern.test(str)
  },
}
```

### Polyfills
```js
if (!Promise.first)
  // https://github.com/huruji/p-first
  Promise.first = function (e) {
    return Promise.all(
      e.map(function (e) {
        return e.then(
          function (e) {
            return Promise.reject(e)
          },
          function (e) {
            return Promise.resolve(e)
          }
        )
      })
    ).then(
      function (e) {
        return Promise.reject(e)
      },
      function (e) {
        return Promise.resolve(e)
      }
    )
  }

if (!Promise.any)
  Promise.any = (o) =>
    new Promise((i, l) => {
      var n, t, v, d, e
      let u = !1,
        c = [],
        h = 0,
        f = []
      function a(o) {
        u || ((u = !0), i(o))
      }
      function r(o) {
        f.push(o), f.length >= h && l(f)
      }
      for (let i of o) h++, c.push(i)
      for (let o of c)
        void 0 !== (null === (n = o) || void 0 === n ? void 0 : n.then) ||
        void 0 !== (null === (t = o) || void 0 === t ? void 0 : t.catch)
          ? (null === (d = null === (v = o) || void 0 === v ? void 0 : v.then((o) => a(o))) ||
              void 0 === d ||
              d.catch((o) => {}),
            null === (e = o) || void 0 === e || e.catch((o) => r(o)))
          : a(o)
    })
```

*See also https://gitlab.com/smartprice/ringeo/-/merge_requests/1818*

#jsVanilla | fetchRetry #smartpriceRINGEO #promise #TCP/IP

The method `toHaveAttribute` is part of **[jest-dom](https://github.com/testing-library/jest-dom)** that enables to test DOM elements. You need to verify if you have setup it properly at your project.

*Install the module:*

```bash
yarn add -D @testing-library/jest-dom
```

*After that you can include at your jest setup file like recommended:*

```js
// In your own jest-setup.js (or any other name)
import '@testing-library/jest-dom'

// In jest.config.js add (if you haven't already)
setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
```

> See also http://pravosleva.ru/express-helper/chat/#/?room=js-testing.pravosleva

TODO: Explain `<rootDir>`

#smartprice #testing | toHaveAttribute #jest expect(...).toHaveAttribute is not a function - Why?

Разница состояний между шагами `PhotoUpload` и `PhotosOk`

<JSONComparison
  json1='{
  "curStep": "PhotoUpload",
  "activeDevice": {
    "data": {
      "ok": true,
      "imei": "123123123123123",
      "phone": {
        "vendor": "Xiaomi",
        "model": "MI 6",
        "memory": "64 GB",
        "color": "ceramic_black",
        "memory_choices": [
          "128 GB",
          "64 GB"
        ],
        "color_choices": {
          "128 GB": [
            "white",
            "ceramic_black",
            "blue",
            "black"
          ],
          "64 GB": [
            "black",
            "blue",
            "ceramic_black",
            "white"
          ]
        },
        "type": "mobile_phone"
      },
      "id": 777,
      "photo": "models/samsung/galaxy-s20-ultra/color_cosmic_black_01.jpg",
      "_originalBody": {
        "IMEI": "123123123123123"
      },
      "curStep": "PhotoUpload",
      "steps": {
        "confirm_detection": {},
        "set_condition": {}
      },
      "price": 200,
      "needPhotos": [
        "back"
      ]
    }
  },
  "asyncStates": {},
  "xsSidebarDisplay": false,
  "xsMainDisplay": true,
  "doBlink": false
}'
json2='{
  "curStep": "PhotosOk",
  "activeDevice": {
    "data": {
      "ok": true,
      "imei": "123123123123123",
      "phone": {
        "vendor": "Xiaomi",
        "model": "MI 6",
        "memory": "64 GB",
        "color": "ceramic_black",
        "memory_choices": [
          "128 GB",
          "64 GB"
        ],
        "color_choices": {
          "128 GB": [
            "white",
            "ceramic_black",
            "blue",
            "black"
          ],
          "64 GB": [
            "black",
            "blue",
            "ceramic_black",
            "white"
          ]
        },
        "type": "mobile_phone"
      },
      "id": 777,
      "photo": "models/samsung/galaxy-s20-ultra/color_cosmic_black_01.jpg",
      "curStep": "PhotosOk",
      "asyncState": {
        "state": "ok",
        "condition_limit": "works",
        "condition_limit_reason": "case_defects",
        "price": 1909,
        "price_rub": 1909
      },
      "steps": {
        "confirm_detection": {},
        "set_condition": {}
      },
      "price": 200,
      "needPhotos": [
        "back"
      ]
    }
  },
  "asyncStates": {
    "777": {
      "state": "ok",
      "condition_limit": "works",
      "condition_limit_reason": "case_defects",
      "price": 1909,
      "price_rub": 1909
    }
  },
  "xsSidebarDisplay": true,
  "xsMainDisplay": false,
  "doBlink": false
}'
/>

> **Текущий вывод**
>
> На мой взгляд, требования по пропуску шагов появились слишком поздно. Пока вижу, что текущая реализация не предусматривает возможность пропускать шаги, по крайней мере, в разнице стейтов между состояниями на этапах `PhotoUpload` и `PhotosOk` я не нашел флагов по наличию (либо отсутствию) которых можно было бы в явном виде обозначить условие пропуска нескольких шагов.

JSON comparison #smartpriceOT

<YoutubePlayer videoId='ylhHYtTyVGE' />

## Step 1
```bash
yarn add next-redux-wrapper react-redux redux redux-saga
yarn add -D redux-devtools-extension @types/redux @types/react-redux
```

## Step 2
### Actions
`~/actions/index.ts`
```ts
export * from './userInfo';
```
`~/actions/userInfo.ts`
```ts
export const ASYNC_LOAD_USER_INFO_DATA = 'ASYNC_LOAD_USER_INFO_DATA';
export const SET_USER_INFO_DATA = 'SET_USER_INFO_DATA';
export const SET_IS_LOADING_USER_INFO_DATA = 'SET_IS_LOADING_USER_INFO_DATA';
export const SET_IS_LOADED_USER_INFO_DATA = 'SET_IS_LOADED_USER_INFO_DATA';
export const LOGIN = 'LOGIN';
export const ASYNC_LOAD_TEST_DATA = 'ASYNC_LOAD_TEST_DATA';

export const asyncLoadUserInfoData = () => ({
  type: ASYNC_LOAD_USER_INFO_DATA,
});
export const login = () => ({
  type: LOGIN,
});

export const setIsLoadingUserInfoData = (isLoading: boolean) => ({
  type: SET_IS_LOADING_USER_INFO_DATA,
  payload: isLoading,
});

export const setIsLoadedUserInfoData = (isLoaded: boolean) => ({
  type: SET_IS_LOADED_USER_INFO_DATA,
  payload: isLoaded,
});

export const setUserInfoData = (data: any) => {
  return { type: SET_USER_INFO_DATA, payload: data };
};
```
### Reducers
`~/store/reducers/index.ts`
```ts
import { combineReducers } from 'redux';
import { userInfo } from './userInfo';

export const rootReducer = combineReducers({
  userInfo,
  // Others...
});
```
`~/store/reducers/userInfo.ts`
```js
import { SET_USER_INFO_DATA, SET_IS_LOADING_USER_INFO_DATA } from '~/actions';
import { HYDRATE } from 'next-redux-wrapper';

const inititalState = {
  isLoading: false,
  isLoaded: false,
  data: null,
};

export const userInfo = (state = inititalState, action: any) => {
  switch (action.type) {
    case HYDRATE:
      return { ...state, ...action.payload.userInfo };
    case SET_IS_LOADING_USER_INFO_DATA:
      return {
        ...state,
        isLoading: action.payload,
      };
    case SET_IS_LOADED_USER_INFO_DATA:
      return {
        ...state,
        isLoaded: action.payload,
      };
    case SET_USER_INFO_DATA:
      return { ...state, data: action.payload };
    default:
      return state;
  }
};
```
### Sagas
`~/store/sagas/userInfo.ts`
```ts
import { put, takeLatest, call } from 'redux-saga/effects';
import {
  ASYNC_LOAD_USER_INFO_DATA,
  setIsLoadingUserInfoData,
  setUserInfoData,
  // showAsyncToast,
  LOGIN,
} from '~/actions';
// import { httpErrorHandler } from '~/utils/errors/http/axios';
// import { networkErrorHandler } from '~/utils/errors/network';
// import { apiErrorHandler } from '~/utils/errors/api';
// import { universalAxiosCatch } from '~/utils/errors';
import axios from 'axios';

const specialApiUrl = process.env.SPECIAL_API_URL || '';

// --- NOTE: Get me

async function fetchUserInfoData(url: string): Promise<any> {
  const result = await axios({
    method: 'get',
    url,
    validateStatus: (status: number) => status >= 200 && status < 500, // default
  })
    // .then(httpErrorHandler) // res -> res.data
    // .then(apiErrorHandler) // data -> data
    .then((data: any) => ({
      isOk: true,
      response: data,
    }));
  // .catch(universalAxiosCatch);
  return result;
}

interface IData {
  isOk: boolean;
  response?: any;
  msg?: string;
}

function* asyncLoadUserInfoDataWorker() {
  yield put(setIsLoadingUserInfoData(true));

  const data: IData = yield call(
    fetchUserInfoData,
    `${specialApiUrl}/users/me`
  );

  if (data.isOk && !!data.response) {
    yield put(setUserInfoData(data.response));

    // yield put(
    //   showAsyncToast({ text: `${typeof data.response} received`, delay: 5000, type: 'success' })
    // );
  } else {
    // yield put(
    //   showAsyncToast({ text: data.msg, delay: 20000, type: 'error' })
    // )
  }

  yield put(setIsLoadingUserInfoData(false));
}

// ---

// --- NOTE: Login

async function fetchLogin(url: string): Promise<any> {
  const result = await axios({
    method: 'post',
    url,
    validateStatus: (status: number) => status >= 200 && status < 500, // default
  })
    // .then(httpErrorHandler) // res -> res.data
    // .then(apiErrorHandler) // data -> data
    .then((data: any) => ({
      isOk: true,
      response: data,
    }));
  // .catch(universalAxiosCatch);
  return result;
}

function* loginWorker() {
  yield put(setIsLoadingUserInfoData(true));

  const data: IData = yield call(fetchLogin, `${specialApiUrl}/auth/local`);

  if (data.isOk && !!data.response) {
    yield put(setUserInfoData(data.response));

    // yield put(
    //   showAsyncToast({ text: `${typeof data.response} received`, delay: 5000, type: 'success' })
    // );
  } else {
    // yield put(
    //   showAsyncToast({ text: data.msg, delay: 20000, type: 'error' })
    // );
  }

  yield put(setIsLoadingUserInfoData(false));
}

// ---

export function* watchAsyncLoadUserInfoData() {
  yield takeLatest(ASYNC_LOAD_USER_INFO_DATA, asyncLoadUserInfoDataWorker);
  yield takeLatest(LOGIN, loginWorker);
}
```
`~/store/sagas.index.ts`
```ts
import { all } from 'redux-saga/effects';
import { watchAsyncLoadUserInfoData } from './userInfo';

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
export function* rootSaga() {
  yield all([
    watchAsyncLoadUserInfoData(),
    // Others...
  ]);
}
```
### Store
`~/store/IRootState.ts`
```ts
import { Store } from 'redux';

export interface IRootState extends Store {
  [x: string]: any;
  userInfo: {
    isLoading: boolean;
    isLoaded: boolean;
    data: any;
  };
}
```
`~/store/store.ts`
```ts
import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware, { Task } from 'redux-saga';
import { createWrapper } from 'next-redux-wrapper';
import { Store, AnyAction } from 'redux';
import { rootReducer } from './reducers';
import { rootSaga } from './sagas';
import { IRootState } from './IRootState';

export interface SagaStore extends Store<IRootState, AnyAction> {
  sagaTask: Task;
}

const bindMiddleware = (middlewares: any[]) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middlewares));
  }
  return applyMiddleware(...middlewares);
};

export const makeStore = (_context: any) => {
  const sagaMiddleware = createSagaMiddleware();
  const store: SagaStore = createStore(
    rootReducer,
    bindMiddleware([sagaMiddleware])
  );

  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

export const wrapper = createWrapper(makeStore, { debug: true });
```
`~store/index.ts`
```ts
export * from './IRootState';
export * from './store';
```
## Step 3
`~/pages/_app.js`
```js
import { wrapper } from '~/store';

// ...

export default wrapper.withRedux(AppWithRedux);
```
## Step 4: smartprice experience
### Pages
`~/pages/ot/[partner]/index.js`
```js
import { useRef, useEffect } from 'react';
import { OTLayout } from '~/components/ot/layout';
import { wrapper } from '~/store';

// ...

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    ({ req, params }) => {
      console.log('--- ot');
      console.log(store);
      console.log('---');
      return {
        props: {
          partnerId: params.partner,
          backData: isDev
            ? require('~/fake-data/getServiceResponse_42')
            : JSON.parse(req.getServiceResponse('back').content().toString()),
          stateName: req.RD.getCRMStates({ id: 42 }).name,
        },
      };
    }
);

export default OTPartnerIndex;
```
`~/pages/index.tsx`
```js
import { wrapper } from '~/store';
// import { setUserInfoData } from '~/actions';
import { Store } from 'redux';

// ...

const getServerSidePropsWithStore = ({
  ctx,
  store,
}: {
  ctx: IPageContext;
  store: Store;
}) =>
  getSmartPricePropsBase(ctx, ({ req }: IPageContext, base: IBaseProps) => {
    // store.dispatch(setUserInfoData(1));

    const top24Original = req.RD.getTop24();
    const top24 = top24Original.map((props: TTop24ItemOriginal) => {
      const { vendor, model, product_id, color, memory, condition } = props;
      const photo = getPhotoOrDefaultImg({
        getProductPhotosList: req.RD.getProductPhotosList.bind(req.RD),
        product_id,
        color,
        vendor,
        model,
      });

      const link = buildUrl('/', {
        path: getProductPageHref({ vendor, model }),
        queryParams: {
          color,
          memory,
          condition,
        },
      });
      const product = req.RD.getProducts({ id: product_id });
      const productType = product.type;

      return { ...props, photo, link, productType };
    });

    return {
      props: {
        ...base,
        top24,
      },
    };
  });

export const getServerSideProps = wrapper.getServerSideProps(
  // @ts-ignore
  (store) => (ctx: any) => getServerSidePropsWithStore({ ctx, store })
);

export default HomePage;
```

<Alert type='info' text='See also [How to make getServerSidePropsBase fn better](https://github.com/vercel/next.js/discussions/18470)' />

> [Draft commit](https://gitlab.com/smartprice/js/ssr/-/merge_requests/217/diffs#7030d0b2f71b999ff89a343de08c414af32fc93a)

🎓 redux-saga #nextjs #ssr | #experience2021 #smartprice

## CMD sample
```bash
GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js
```

`package.json`
```bash
{
  "scripts": {
    "dev": "yarn watch:spa",
    "build": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js",
    "watch": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=0 rollup -c rollup.config.js --watch",
    "watch:spa": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=1 rollup -c rollup.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}
```

`./rollup.config.js`
```js
import { writeStaticFileAsync } from './scripts/write_static_file_async'

const gitSHA1 = process.env.GIT_SHA1 || 'No process.env.GIT_SHA1'
const buildInfoFilePath = path.join(__dirname, 'front/static/js/common/constants/build-info.js')
writeStaticFileAsync(buildInfoFilePath, `const gitSHA1 = '${gitSHA1}';`)
```

`./scripts/write_static_file_async.js`
```js
import fs from 'fs'

export const writeStaticFileAsync = (storageFilePath, text) => {
  fs.writeFile(storageFilePath, text, 'utf8', (err) => {
    if (!!err) console.log(err)
  })
}
```

Не забудьте добавить создаваемый файл в `.gitignore`

#git #bash | Get commit hash for build // GIT_SHA1 #smartpriceRINGEO

https://project-awesome.org/raphamorim/awesome-canvas

<Alert header='See also' text='https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect'/>

```js
_getMemoryStateCanvas({ stack, cfg }) {
  const canvas = this.createDOMElement({
    tag: 'canvas',
    style: {
      boxSizing: 'border-box',
    },
  })
  canvas.width = cfg.width
  canvas.height = cfg.height
  const ctx = canvas.getContext('2d')
  let x = 0
  // let y = 0

  // NOTE: Example
  // ctx.rect(10, 20, 150, 100);
  // The rectangle's corner is located at (10, 20). It has a width of 150 and a height of 100.

  // ctx.rect(x, y, cfg.width / 100, cfg.height)
  // ctx.fill()

  const getStepX = (fullWidthPx) => parseInt(fullWidthPx / (stack.length * 2 < 100 ? 100 : stack.length * 2))
  const stepX = getStepX(cfg.width) // stack.length?
  const getOffsetY = ({ data, fullPx, targetField }) => {
    const { jsHeapSizeLimit: limit, totalJSHeapSize: total, usedJSHeapSize: used } = data
    let hPx = 0
    switch (targetField) {
      case 'total':
        hPx = (fullPx * total) / limit
        break
      case 'used':
        hPx = (fullPx * used) / total
        break
      default:
        break
    }

    return {
      offset: fullPx - hPx,
      hPx,
    }
  }

  stack.forEach((data) => {
    const offsetData1 = getOffsetY({
      data,
      fullPx: cfg.height,
      targetField: 'total',
    })
    const offsetData2 = getOffsetY({
      data,
      fullPx: cfg.height,
      targetField: 'used',
    })
    // NOTE: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
    ctx.rect(x, offsetData1.offset, stepX, offsetData1.hPx)
    ctx.fill()
    x += stepX
    ctx.rect(x, offsetData2.offset, stepX, offsetData2.hPx)
    ctx.fill()
    x += stepX
  })

  return canvas
}
```

#canvas | Examples #smartprice #memoryState

Из любой ветки?

```bash
git tag sp6
git push origin tags/sp6
```

#git | Tags #smartprice

поисковик очень хорошо различает концепции меню и текста)

уже довольно много лет как

и поисковик понимает, что такое выплывающее меню (где часть контента скрыта и показывается только по наведении мышкой), и что это необходимая вещь для сайтов с крупной структурой

но тут важный нюанс - меню конечно должно действительно показываться

за меню которое невозможно увидеть человеку в принципе - санкции могут прилететь тоже, потенциально (опять же - никаких 100% нет)

а уж SEO-тексты, которые сеошники пишут с незапамятных времен (были периоды когда писали SEO-тексты по 20-25 тысяч знаков, были периоды когда эти 20-25 тысяч знаков сеошники делали невидимыми, были периоды когда эти 20-25 тысяч знаков сеошники вставляли в маленькое прокручивающееся окошко 100 на 100 пикселей - мол "а что - увидеть же можно весь текст, ну и что что минут 10 его только листать будешь"...) - давно и плотно изучены поисковиками, и за попытки скрытия их есть много вариантов тех или иных санкций (снова без 100%....  SEO в каком-то смысле аналогично квантовой механике и оперирует вероятностями)

```
User-agent: *
Disallow: /crm
Disallow: /int
Disallow: /auth
Disallow: /tradein
Disallow: /api
Disallow: /cart/
Disallow: /sale/s
Disallow: /sale/galaxy
Disallow: /sale/iphone
Disallow: /catalog?page=
Allow: /product/*?
Sitemap: https://smartprice.ru/sitemap.xml

Clean-param: utm
Clean-param: cm_id
Clean-param: sub1
Clean-param: newsite
```

> а, кстати, уберите заодно директиву host
>
> она ни на что не влияет, просто уже перестала быть актуальна пару лет назад, ее не учитывают

#seo2022 #smartprice robots.txt | аргументация: #черныйЯщик

*Неправильно:*
```js
{
  header: {
    [theme.breakpoints.up('md')]: {
      height: `${headerHeightDesktop}px`,
    }
    [theme.breakpoints.down('md')]: {
      height: `${headerHeightMobile}px`,
    }
  },
}
```
> И **theme.breakpoints.down**, и **theme.breakpoints.up** - inclusive, то есть работают не только на размеры меньше/больше указанного, но и на сам указанный размер. В данном случае правильней использовать одну из двух пар:
```js
/* 1:
theme.breakpoints.down('md') и theme.breakpoints.up('lg')
*/

/* 2:
theme.breakpoints.down('sm') и theme.breakpoints.up('md')
*/
```

*Правильно:*
```js
{
  header: {
    [theme.breakpoints.down('md')]: {
      height: `${headerHeightMobile}px`,
    },
    [theme.breakpoints.up('lg')]: {
      height: `${headerHeightDesktop}px`,
    },
}
```

#materialUI #styles #smartprice #codeReview

> See also, [mr 34 diffs](https://gitlab.com/smartprice/js/ssr/-/merge_requests/34/diffs)
## Step 1. Generate BUILD_ID
**[nexdrew/next-build-id](https://github.com/nexdrew/next-build-id)** last git commit SHA based [See also for smartprice](https://gitlab.com/smartprice/js/ssr/-/commit/8562416102b46e9357470da0d5fc9377fc79e786)
```bash
yarn add next-build-id
```

**`./next.config.js`**
```js
const nextBuildId = require('next-build-id');

const nextConfig = {
  generateBuildId: () => nextBuildId({ dir: __dirname }),
}

module.exports = nextConfig
```
## Step 2: How to get last git commit SHA for Next start
```js
let BUILD_ID = String(new Date().getTime());

// --- GET GIT SHA, And also you can see original comments
const ffi = require('ffi');
const lib = ffi.Library(null, {
  // FILE* popen(char* cmd, char* mode);
  popen: ['pointer', ['string', 'string']],
  // void pclose(FILE* fp);
  pclose: ['void', ['pointer']],
  // char* fgets(char* buff, int buff, in)
  fgets: ['string', ['string', 'int', 'pointer']],
});

function execSync(cmd) {
  var buffer = new Buffer(1024),
    result = '',
    fp = lib.popen(cmd, 'r');

  if (!fp) throw new Error('execSync error: ' + cmd);

  while (lib.fgets(buffer, 1024, fp)) {
    result += buffer.readCString();
  }
  lib.pclose(fp);

  return result;
}

try {
  BUILD_ID = execSync('git rev-parse HEAD');
} catch (err) {
  console.log('--- ERR: Could not read git SHA');
  console.log(err);
}
// ---

const COMMIT_SHA =
  BUILD_ID ||
  VERCEL_GITHUB_COMMIT_SHA ||
  VERCEL_GITLAB_COMMIT_SHA ||
  VERCEL_BITBUCKET_COMMIT_SHA;
process.env.SENTRY_DSN = SENTRY_DSN;
```
[Посмотрел здесь](https://stackoverflow.com/questions/4443597/node-js-execute-system-command-synchronously);

## Full sample
`~/utils/node-cmd/execSync.js`
```js
const ffi = require('ffi');
const lib = ffi.Library(null, {
  // FILE* popen(char* cmd, char* mode);
  popen: ['pointer', ['string', 'string']],
  // void pclose(FILE* fp);
  pclose: ['void', ['pointer']],
  // char* fgets(char* buff, int buff, in)
  fgets: ['string', ['string', 'int', 'pointer']],
});

module.exports = function execSync(cmd) {
  var buffer = new Buffer.alloc(1024),
    result = '',
    fp = lib.popen(cmd, 'r');

  if (!fp) throw new Error('execSync error: ' + cmd);

  while (lib.fgets(buffer, 1024, fp)) {
    result += buffer.readCString();
  }
  lib.pclose(fp);

  return result;
};
```
`~/next.config.js`
```js
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';
const nextBuildId = require('next-build-id');
const execSync = require('./utils/node-cmd/execSync');

// --- SENTRY
const IS_SENTRY_DISABLED = process.env.DISABLE_SENTRY === 'true';
// Use the hidden-source-map option when you don't want the source maps to be
// publicly available on the servers, only to the error reporting
const withSourceMaps = require('@zeit/next-source-maps');
// Use the SentryWebpack plugin to upload the source maps during build step
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const {
  NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
  SENTRY_ORG,
  SENTRY_PROJECT,
  SENTRY_AUTH_TOKEN,
} = process.env;
let BUILD_ID = String(new Date().getTime());

// TODO: External env?
try {
  BUILD_ID = execSync('git rev-parse HEAD');
} catch (err) {
  console.log('--- ERR: Could not read git SHA');
  console.log(err);
}

const RELEASE_ID = BUILD_ID;
process.env.SENTRY_DSN = SENTRY_DSN;
// ---

const nextConfig = {
  compress: false,
  poweredByHeader: false,
  generateEtags: false,
  webpack: (config, options) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty',
    };
    config.resolve.alias['~'] = `${path.resolve(__dirname)}/`;
    config.resolve.alias['@smProductDataLogic'] = `${path.resolve(
      __dirname
    )}/utils/rd/build.smartprice-product-logic/common/styled-mui/template/smartprice/ProductReviewSection/Logic.js`;
    config.resolve.alias['@smCartLogic'] = `${path.resolve(
      __dirname
    )}/utils/rd/build.smartprice-cart-logic/common/styled-mui/template/smartprice/CartSection/Logic.js`;

    // --- SENTRY
    // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
    // @sentry/node will run in a Node.js environment. @sentry/node will use
    // Node.js-only APIs to catch even more unhandled exceptions.
    //
    // This works well when Next.js is SSRing your page on a server with
    // Node.js, but it is not what we want when your client-side bundle is being
    // executed by a browser.
    //
    // Luckily, Next.js will call this webpack function twice, once for the
    // server and once for the client. Read more:
    // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
    //
    // So ask Webpack to replace @sentry/node imports with @sentry/browser when
    // building the browser's bundle
    if (!options.isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    // When all the Sentry configuration env variables are available/configured
    // The Sentry webpack plugin gets pushed to the webpack plugins to build
    // and upload the source maps to sentry.
    // This is an alternative to manually uploading the source maps
    // Note: This is disabled in development mode.
    if (
      !IS_SENTRY_DISABLED &&
      SENTRY_DSN &&
      SENTRY_ORG &&
      SENTRY_PROJECT &&
      SENTRY_AUTH_TOKEN &&
      RELEASE_ID &&
      (isDev || isProd)
    ) {
      config.plugins.push(
        new SentryWebpackPlugin({
          include: '.next',
          ignore: ['node_modules'],
          urlPrefix: '~/_next',
          release: RELEASE_ID,
        })
      );
    }
    // ---

    return config;
  },
  // env,
  generateBuildId: () => nextBuildId({ dir: __dirname }),
};

module.exports = withSourceMaps(withCSS(withSass(nextConfig)));
```

#smartprice #BUILD_ID #nextjs #sentry

#smartpriceSSR метрики на сайт google tag manager

```nginx
location /sale/ {
  rewrite ^(.*)$ /catalog?sort=price%3Adesc&sale=true ;
}
```

#smartprice #nginx /sale rewrite

`create-polling.src.js`

```js
// NOTE: https://levelup.gitconnected.com/polling-in-javascript-ab2d6378705a

const poll = ({ fn, validate, interval, maxAttempts }) => {
  console.log('Start poll...')
  let attempts = 0

  const executePoll = async (resolve, reject) => {
    // console.log('- poll')
    const result = await fn()
    attempts++;

    if (validate(result)) {
      return resolve(result)
    } else if (!!maxAttempts && attempts === maxAttempts) {
      return reject(new Error('Exceeded max attempts'))
    } else {
      setTimeout(executePoll, interval, resolve, reject)
    }
  };

  return new Promise(executePoll);
};
```

## Usage
```js
poll({
  fn: mockApiAndStateRefresher,
  // NOTE: validate завязана на внешнюю переменную
  validate: () => !window.proxiedState.payout_card.isPollingEnabled,
  interval: 1000,
})
  .then((res) => {
    log('payout_card', 'POLLING END: RESOLVED')
    log('payout_card', res)

    // const tradeinId = window.proxiedState.tradeinId;
    // const bankRuName = window.proxiedState.payout_card.selectedBankRuName;

    // lockSubmitIfSbpSber();
    
    switch (res.status) {
      case EStatus.Pending:
      // case EStatus.Added: // закрыть iframe и запомнить, что карта привязана (card_number_ending — последние 4 цифры номера для отображения в UI
      // case EStatus.Retry:
      // case EStatus.Canceled: // закрыть iframe и запомнить, что карта не привязана
          break;
      default:
        // openResErrModal({ message: `Неожиданное значение статуса: ${res.status}${res.message ? `; ${res.message}` : ''}` }, 'ERR #25-1')
        updateWidgetUI();
        log('payout_card', 'NOTE: Неожиданный кейс');
        break;
    }
  })
  .catch((err) => {
    log('payout_card', 'POLLING END: REJECTED');
    console.error(err);
    openResErrModal(err, 'ERR #25');
  })
```

## mockApi sample
```js
let c = 0
const mockApiSample= async () => {
    // const url =  ...
    // const body = ...

    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
      .then(response => response.json())
      .catch((err) => ({ isOk: false, message: err.message || 'No msg', isErrored: err instanceof Error }));
    
    switch (true) {
      case (res.status !== EStatus.Pending && !res.isErrored):
        c = 0
        break;
      default:
        c += 1
        break;
    }

    return res
};
```

#jsVanilla #polling #smartpriceLegacy

## Looper sample

```js
useEffect(() => {
  const looper = MakeLooper(1000)()
  const refresh = () => {
    // Do anything...
  }

  looper.start(refresh)

  return () => { looper.stop() }
}, [])
```

`MakeLooper.src.ts`
```js
export const MakeLooper = (ms = 1000) => {
  let timer: any;
  let wasStopped = false;

  return () => {
    const start = (cb: () => void) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Looper done and will be restarted.");
          if (cb) cb();
          start(cb);
        }, ms);
      }
    };
    const stop = () => {
      // console.log("Looper stopped");
      wasStopped = true;
      clearTimeout(timer);
    };
    return { start, stop };
  };
}
```

[Example](https://github.com/pravosleva/express-helper/blob/master/src/server/utils/socket/state/cpuStateInstance.ts)

#react #jsVanilla | Looper sample #MakeLooper #smartpriceLegacy

https://www.youtube.com/watch?v=wX0pb6CBS-c

```js
const makeHiddenOnOutsideClick = (elm) => {
  document.addEventlistener('click', function(e) {
    // If user clicks inside the element then do nothing
    if (e.target.closest(box) return
    // If user clicks outside the element, hide it
    box.classList.remove('active')
  })
}

const box = document.querySelector('.box')

makeHiddenOnOutsideClick(box)
```

🧯 #jsVanilla | How to Detect Clicks Outside of Elements with Vanilla JavaScript #smartprice

https://xd.adobe.com/view/a5e49d56-2b13-4b49-bc40-140acb2a189c-f0b7/

https://xd.adobe.com/view/a5e49d56-2b13-4b49-bc40-140acb2a189c-f0b7/screen/e8fa583d-6db9-46b0-95ea-96a035a4b8fd

#samsung #smartprice | Online Trade-In

https://www.youtube.com/watch?v=uFIl4BvYne0

![img](https://i.ytimg.com/vi_webp/uFIl4BvYne0/maxresdefault.webp)

🧯 #jsVanilla | Custom Select Menu Dropdown #smartprice

**multi-spa**
```bash
git diff 5fa4919167c5c3e49b74529cf9f4a7d81d63d5a7 d234158c43493c639c1c958daf0195faaff64c26
```

**spa-sample**
```git
+1
```

#smartpriceRINGEO | multi spa exp

*Сей треш был создан для сбера в рамках легаси проекта на jQuery:*
```js
$('.sp-form_for_personal .sp-field_for_sms-signing .sp-button_type_submit').on('click', function() {
    const countDownId = `sms-countdown-${Math.random()}`;

    Swal.fire({
        title: 'Введите код из СМС',
        input: 'text',
        inputAttributes: {
            autocapitalize: 'off',
            maxlength: 4,
        },
        showCancelButton: true,
        confirmButtonText: 'Ok',
        confirmButtonColor: '#168f48',
        cancelButtonColor: 'lightgray',
        showLoaderOnConfirm: true,
        html: `<b id="${countDownId}"></b>`,
        preConfirm: (text) => {
            // return fetch(`//api.github.com/users/${text}`)
            //     .then(response => {
            //         if (!response.ok) {
            //         throw new Error(response.statusText)
            //         }
            //         return response.json()
            //     })
            //     .catch(error => {
            //         Swal.showValidationMessage(
            //         `Request failed: ${error}`
            //         )
            //     })

            // TODO: SMS API + timer
            return { isOk: true, message: 'TESTED', text }
        },
        allowOutsideClick: false, // () => !Swal.isLoading()
    })
    .then((result) => {
        // result.value <- response
        console.log(result.value)
        if (result.isConfirmed) {
            // Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url })
            Swal.fire({ icon: 'success', text: 'Ok, thanx', confirmButtonText: 'Ok', confirmButtonColor: '#168f48' })
            // TODO: API?
        }
    })
    .catch((err) => {
        console.log(err)
        Swal.fire({
            icon: 'error',
            text: err.message,
            showConfirmButton: false,
            timer: 800,
        })
    })

    const runCountDown = () => {
        const updateCouner = ({ counterText, failCb }) => {
            const countDown = document.getElementById(countDownId);
            if (!!countDown) {
                countDown.innerHTML = counterText;
            } else {
                // console.log(document.getElementById('sms-countdown'));
                failCb();
                console.log('failCb CALLED')
            }
        }
        const resetCounter = () => {
            updateCouner({ counterText: 'Wait...' });
        }
        
        const actions = document.getElementsByClassName('swal2-actions')[0];
        if (!!actions) {
            const disableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.setAttribute("disabled", true);
                } catch (err) {
                    console.log(err)
                }
            }
            const enableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.removeAttribute("disabled");
                } catch (err) {
                    console.log(err)
                }
            }

            const newBtn = document.createElement('button');
            newBtn.setAttribute('class', 'swal2-styled swal2-default-outline');
            newBtn.style.border = '0';
            newBtn.style.color = '#FFF';
            const disableTryAgain = () => {
                newBtn.setAttribute("disabled", true);
                enableConfirm();
            }
            disableTryAgain();
            const enableTryAgain = () => {
                newBtn.removeAttribute("disabled");
                // NOTE: Or this: newBtn.disabled = false;
                disableConfirm();
            }
            newBtn.style.borderRadius = '.25em';
            newBtn.style.backgroundColor = '#168f48';
            newBtn.innerHTML = 'Попробовать еще раз';

            const limitSec = 10;
            const delayTime = limitSec * 1000;
            resetCounter();

            const runCounter = (s) => {
                let left = s;

                const counter = MakeTimer(1000)();
                counter.startTimer(() => {
                    left -= 1;
                    if (left <= 0) {
                        counter.stopTimer();
                        updateCouner({ counterText: 'Время вышло', failCb: () => counter.stopTimer() });
                        enableTryAgain();
                    } else {
                        updateCouner({ counterText: `Осталось ${left} сек`, failCb: () => counter.stopTimer() });
                    }
                })
            }

            newBtn.onclick = function() {
                disableTryAgain();
                resetCounter();
                runCounter(limitSec);
            };
            actions.appendChild(newBtn);

            runCounter(limitSec);
            setTimeout(enableTryAgain, delayTime);
        }
    }
    setTimeout(runCountDown, 1000)
})
```

`MakeTimer.js`
```js
function MakeTimer (ms = 3000) {
  let timer;
  let wasStopped = false;

  return () => {
    const startTimer = (cb) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Timer done and will be restarted.");
          if (cb) cb();
          startTimer(cb);
        }, ms);
      }
    };
    const stopTimer = () => {
      // console.log("Timer stopped");
      wasStopped = true;
      clearTimeout(timer);
    };
    return { startTimer, stopTimer };
  };
}
```

#sweetalert2 | Countdown timer #sber #swal #smartpriceRINGEO #smartpriceLegacy

```js
const ColorButtonsWrapper = styled('div')`
  width: 100%;
  display: grid;
  grid-gap: 8px;
  justify-content: start;
  grid-template-columns: repeat(3, 1fr);

  > div {
    // border: 1px solid red;
    justify-content: flex-start !important;
    > div {
      // border: 1px solid red;
    }
  }

  @media (max-width: ${md}px) {}
  @media (min-width: ${md + 1}px) {}

  margin-bottom: 5px;
`;

// const MemoizedColorBtns = useMemo(

<React.Fragment key={color}>
  <div
    style={{
      display: 'flex',
      // flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    {color !== settingsState.color ? (
      <ColorBtn
        isActive={false}
        color={getPhoneColorByNameOrDefault(color)}
        onClick={!isDisabled ? handleClickColor(color) : undefined}
        disabled={isDisabled}
      />
    ) : (
      <ColorBtn
        isActive={true}
        color={getPhoneColorByNameOrDefault(color)}
      />
    )}
    <div
      style={{
        color: '#8c94a0',
        // textAlign: 'center',
        maxWidth: '80px',
      }}
    >
      {getReadableSnakeCase(color)}
    </div>
  </div>
</React.Fragment>
```

#smartprice | Color buttons as grid

```js
const baseTool = {
  alpha: function (a, b) {
    a = a.toUpperCase();
    b = b.toUpperCase();
    return a < b ? -1 : a > b ? 1 : 0;
  },
  number: function (a, b) {
    a = parseFloat(a);
    b = parseFloat(b);
    return a - b;
  },
};

export class Designer {
  getSortedMemorylist(arr) {
    const result = [];
    let counter = 0;
    try {
      const sorted = arr.sort((e1, e2) =>
        baseTool.number(e1.split(' ')[0], e2.split(' ')[0])
      );

      return sorted;
    } catch (err) {
      console.log(err);
      return arr;
    }
  }
}

// USAGE:

const sorted = designer
  .getSortedMemorylist([...new Set(device.phone.memory_choices)])
  .map((srt) => str)
```

Array designerSort #smartprice

`.gitignore`
```bash
html/*
!html/.gitkeep
```

`clean-up.sh`
```bash
rm -rf ./html/* !./html/.gitkeep
rm -rf ./sources/.yarn/* !./html/.gitkeep
```

#bash | #smartprice #лендос cleanup

`/etc/nginx/conf.d/smartprice.local.conf`

```bash
server {
    listen 80;
    client_max_body_size 32m;
    server_tokens off;
    proxy_http_version 1.1;
    # proxy_set_header Upgrade $http_upgrade;
    # proxy_set_header Connection 'upgrade';
    # proxy_set_header Host $host;
    # proxy_cache_bypass $http_upgrade;

    location / {
        if ($request_method = 'POST') {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
           add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
           add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        proxy_pass          http://127.0.0.1:3000;
        proxy_http_version  1.1;
    }

    # location /api {
    #     rewrite ^/api/(.*)$ /$1 break;
    #     proxy_pass          http://127.0.0.1:5000/smartprice/api/$1
    # }
    location  ~ ^/api/(.*)$ {
        proxy_pass   http://127.0.0.1:5000/smartprice/api/$1;
    }
    location  ~ ^/fapi/(.*)$ {
        proxy_pass   http://127.0.0.1:5000/smartprice/fapi/$1;
    }
    location  ~ ^/otapi/(.*)$ {
        proxy_pass   http://127.0.0.1:5000/smartprice/otapi/$1;
    }
    location  ~ ^/static/(.*)$ {
        proxy_pass   https://smartprice.ru/static/$1;
    }
}
```

#nginx #smartprice | local config

```
{% if partner == 'mtsmain' %}
        <div>
            <div style="margin-bottom: 20px; color: red; font-size: 20px;"><b>Обратите внимание! Данная скидка пересекается с акциями:</b></div>

            <ul style="color: red;" id="PRICES_CONDITION_PRECHECK@SHORT_LIST">
                <li>Дополнительная скидка по Trade-in и "Покажи старый гаджет и получи скидку на новый" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Покажи старый гаджет и получи скидку на новый"</li>
                <li>"Начисляем кэшбэк в МТС Cashback при покупке товаров"</li>
                <li>Дополнительная скидка по Trade-in и "Скидка на товары при покупке в комплекте" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Скидка на товары при покупке в комплекте"</li>
            </ul>

            <div style="margin: 10px 0 10px 0; color: red; cursor: pointer; text-align: center; text-decoration: underline;" id="PRICES_CONDITION_PRECHECK@INFO_TOGGLER" onclick="for (const id of ['PRICES_CONDITION_PRECHECK@FULL_LIST']) document.getElementById(id).style.display = 'block';for (const id of ['PRICES_CONDITION_PRECHECK@INFO_TOGGLER', 'PRICES_CONDITION_PRECHECK@SHORT_LIST']) document.getElementById(id).style.display = 'none'">другие акции, с которыми пересекается Trade-in</div>

            <ul style="color: red; display: none;" id="PRICES_CONDITION_PRECHECK@FULL_LIST">
                <li>Дополнительная скидка по Trade-in и "Покажи старый гаджет и получи скидку на новый" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Покажи старый гаджет и получи скидку на новый"</li>
                <li>"Начисляем кэшбэк в МТС Cashback при покупке товаров"</li>
                <li>Дополнительная скидка по Trade-in и "Скидка на товары при покупке в комплекте" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Скидка на товары при покупке в комплекте"</li>

                <li>"Кредит без переплат"</li>
                <li>Группа "Семья"</li>
                <li>При покупке комплекта (SIM+Модем), ТП "Мой друг" в подарок</li>
                <li>Подписка МТС ТВ "Супер" на 3 месяца за 3 руб. при покупке Тарифа МТС</li>
                <li>При покупке SIM-карты скидка на аксессуар 10%</li>
            </ul>
        </div>
        {% endif %}

{% if partner == 'mtsmain' %}
        <div>
            <div style="margin-bottom: 20px; color: red; font-size: 20px;">Обратите внимание! Данная скидка пересекается с акциями:</div>

            <ul style="color: red;" id="FINAL_PRICES@SHORT_LIST">
                <li>Дополнительная скидка по Trade-in и "Покажи старый гаджет и получи скидку на новый" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Покажи старый гаджет и получи скидку на новый"</li>
                <li>"Начисляем кэшбэк в МТС Cashback при покупке товаров"</li>
                <li>Дополнительная скидка по Trade-in и "Скидка на товары при покупке в комплекте" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Скидка на товары при покупке в комплекте"</li>
            </ul>

            <div style="margin: 10px 0 10px 0; color: red; cursor: pointer; text-align: center; text-decoration: underline;"  id="FINAL_PRICES@INFO_TOGGLER" onclick="for (const id of ['FINAL_PRICES@FULL_LIST']) document.getElementById(id).style.display = 'block';for (const id of ['FINAL_PRICES@INFO_TOGGLER', 'FINAL_PRICES@SHORT_LIST']) document.getElementById(id).style.display = 'none'">другие акции, с которыми пересекается Trade-in</div>

            <ul style="color: red; display: none;" id="FINAL_PRICES@FULL_LIST">
                <li>Дополнительная скидка по Trade-in и "Покажи старый гаджет и получи скидку на новый" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Покажи старый гаджет и получи скидку на новый"</li>
                <li>"Начисляем кэшбэк в МТС Cashback при покупке товаров"</li>
                <li>Дополнительная скидка по Trade-in и "Скидка на товары при покупке в комплекте" при покупке Galaxy S21, Galaxy S21 Ultra, Galaxy S21 Plus, Galaxy S20 Ultra, Galaxy Note 20 Ultra, Galaxy Z Fold</li>
                <li>"Скидка на товары при покупке в комплекте"</li>

                <li>"Кредит без переплат"</li>
                <li>Группа "Семья"</li>
                <li>При покупке комплекта (SIM+Модем), ТП "Мой друг" в подарок</li>
                <li>Подписка МТС ТВ "Супер" на 3 месяца за 3 руб. при покупке Тарифа МТС</li>
                <li>При покупке SIM-карты скидка на аксессуар 10%</li>
            </ul>
        </div>
        {% endif %}

<div class="sp-block-prices_submit">
```

```js
/* eslint-disable no-undef */
/* eslint-disable prefer-rest-params */
/* eslint-disable prefer-spread */
/* eslint-disable func-names */
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-use-before-define */
function Wget(args) {
  return (new Fetcher(args)).fetch();
  return new Fetcher(args).fetch()
}

function Fetcher(args) {
  var self = this;
  const self = this

  if (!('timeout' in args)) {
    args['timeout'] = 10000;
    args.timeout = 10000
  }
  // NOTE: For development only:
  // args['url'] = `${process.env.API_URL}${args['url']}`
  // args.url = `http://pravosleva.ru/express-helper/smartprice${args.url}`

  self.__counter = 0;
  self.__maxRetries = __Fetcher_pop(args, 'retries', 5);
  self.__shouldRetry = __Fetcher_pop(args, 'shouldRetry');
  self.__counter = 0
  self.__maxRetries = __Fetcher_pop(args, 'retries', 5)
  self.__shouldRetry = __Fetcher_pop(args, 'shouldRetry')

  var onSuccess = __Fetcher_pop(args, 'success');
  var onError = __Fetcher_pop(args, 'error');
  const onSuccess = __Fetcher_pop(args, 'success')
  const onError = __Fetcher_pop(args, 'error')

  self.fetch = function() {
    var deferred = $.Deferred();
  self.fetch = function () {
    const deferred = $.Deferred()

    if (onSuccess) {
      deferred.done(onSuccess);
      deferred.done(onSuccess)
    }

    if (onError) {
      deferred.fail(onError);
      deferred.fail(onError)
    }

    self.__fetch(
      function() { deferred.resolve.apply(deferred, arguments); },
      function() { deferred.reject.apply(deferred, arguments); }
    );

    return deferred;
  };
      function () {
        deferred.resolve.apply(deferred, arguments)
      },
      function () {
        deferred.reject.apply(deferred, arguments)
      }
    )

    return deferred
  }

  self.__fetch = function(resolve, reject) {
  self.__fetch = function (resolve, reject) {
    try {
      $.ajax(args)
        .done(function(response) {
        .done((response) => {
          if (self.__shouldRetry && self.__shouldRetry(response)) {
            self.__catch(resolve, reject);
            self.__catch(resolve, reject)
          } else {
            resolve(response);
            resolve(response)
          }
        })
        .fail(function() {
          self.__catch(resolve, reject);
        });
        .fail(() => {
          self.__catch(resolve, reject)
        })
    } catch (e) {
      console.log(e);
      reject();
      console.log(e)
      reject()
    }
  };
  }

  self.__catch = function(resolve, reject) {
  self.__catch = function (resolve, reject) {
    if (self.__counter >= self.__maxRetries) {
      reject();
      return;
      reject()
      return
    }

    ++self.__counter;
    ++self.__counter

    setTimeout(function() {
      self.__fetch(resolve, reject);
    }, 1000 * self.__counter);
    setTimeout(() => {
      self.__fetch(resolve, reject)
    }, 1000 * self.__counter)
  }
}

function __Fetcher_pop(obj, key, default_) {
  if (key in obj) {
    var out = obj[key];
    const out = obj[key]

    try {
      delete obj[key];
      delete obj[key]
    } catch {
      obj[key] = undefined;
      obj[key] = undefined
    }

    if (out !== undefined) {
      return out;
      return out
    }
  }

  return default_;
  return default_
}
```

#smartprice | new

Разбить массив на чанки *с указанием их лимита*.
```js
export const getPartial = (arr, chunkSize) =>
  arr.concat.apply(
    [],
    arr.map((elem, i) => (i % chunkSize ? [] : [arr.slice(i, i + chunkSize)]))
  );
```

> *by Gena 26.10.2020:* Предположим, что в state.targetResponse?.pagination.total записано число 1000000000.
> Твой алгоритм создаст массив из миллиарда элементов, и сразу же выбросит из них все, кроме пяти.
> Мой - создаст массив только из тех пяти элементов, которые будут использоваться:

```js
const radius = 2;
const currentPage = state.targetResponse?.pagination.page;
const pages = [];
for (
  let i = Math.max(currentPage - radius, 1);
  i <= Math.min(currentPage + radius, state.targetResponse?.pagination.total);
  ++i
) {
  pages.push(i);
}
```

```js
const getSomePages = ({ currentPage: x, radius: r, total: t }: IProps) => {
  const pages = [];
  for (let i = Math.max(x - r, 1); i <= Math.min(x + r, t); ++i) {
    pages.push(i);
  }
  return pages;
}
```

Разбить массив на чанки **с настраиваемыми лимитами**.

```js
const getPartial2 = (
  arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
  chunkSizes = [1, 2, 3, 4]
) => {
  const newArr = [];
  while (arr.length) {
    if (!chunkSizes.length) {
      newArr.push(arr.splice(0, arr.length))
    } else {
      newArr.push(arr.splice(0, chunkSizes.splice(0, 1)))
    }
  }
  return newArr;
};
```

Removing douplicates from array [4 ways](https://dev.to/mshin1995/back-to-basics-removing-duplicates-from-an-array-55he?fbclid=IwAR1mmfwk3NlkQ62e-q3URiu8wywZl2eaajAqIhryZPvP1IsxIvDfm8IJRO4)

```json
{
  "_id":{
    "$oid":"5d4bceac6e95084e2a667a77"
  },
  "header":"",
  "description":"",
  "priority":{"$numberInt":"3"},
  "done":false,
  "uremont":false,
  "history":"",
  "createdAt":{
    "$date":{
      "$numberLong":"1565249196487"
    }
  },
  "updatedAt":{"$date":{"$numberLong":"1603815904093"}},
  "__v":{"$numberInt":"0"}
}
```

#array #массивМассивов #getPartial #getSomePages #smartprice

## Requirement sample
```bash
LOG_LEVELS=info,debug
```

### `~/utils/prodLogger.js`
```js
const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';
const LOG_LEVELS = process.env.LOG_LEVELS;

let logLevelsSettings = {
  info: false,
  debug: false,
  log: false,
  error: false,
};

if (!!LOG_LEVELS) {
  try {
    const enabledFromEnvs = LOG_LEVELS.split(',');
    if (enabledFromEnvs.length > 0) {
      enabledFromEnvs.forEach((type) => {
        if (logLevelsSettings[type] === false) logLevelsSettings[type] = true;
      });
    }
  } catch (err) {
    console.log(`WTF: LOG_LEVELS is ${LOG_LEVELS}`);
  }
}

class LoggerSingletone {
  static _instance = new LoggerSingletone();

  constructor() {
    if (LoggerSingletone._instance) {
      throw new Error(
        'Instantiation failed: use LoggerSingletone.getInstance() instead of new.'
      );
    }
  }

  logNative(modifiedData) {
    switch (true) {
      case isDev:
        console.log(modifiedData);
        break;
      case isProd:
        console.log(JSON.stringify(modifiedData));
        break;
      default:
        break;
    }
  }
  logCustom({ message }) {
    if (!!message && isDev) console.log(message);
  }

  getStandardReqData(req) {
    const result = {};
    // NOTE: mw cookie-parser should be used by express!
    const cookies = req.cookies;

    // const signedCookies = req.signedCookies; // NOTE: If necessary
    result.reqid = req.get('X-Request-Id') || null;
    result.spuid = cookies.spuid || null;
    result.spcid = cookies.spcid || null;
    result.url = req.originalUrl;
    result.method = req.method;

    if (req.method === 'POST') {
      result.post_data = !!req.post_data ? JSON.stringify(req.post_data) : null;
    }

    return result;
  }
  getStandardResData(res) {
    const result = {};

    result.request_headers = res.req.headers || null;
    result.response_headers = res.getHeaders();
    result.response_body = res.body || null;

    return result;
  }

  info(arg) {
    if (logLevelsSettings['info']) {
      const { customData, req, message } = arg;

      if (!!req || !!customData) {
        const modifiedData = {
          level: 'info',
          message: message || null,
        };

        if (!!req) {
          const standardReqData = this.getStandardReqData(req);

          for (const key in standardReqData)
            modifiedData[key] = standardReqData[key];
        }

        if (!!customData) {
          for (const key in customData) modifiedData[key] = customData[key];
        }
        this.logNative(modifiedData);
      } else {
        this.logCustom(arg);
      }
    }
  }
  log(data) {
    if (logLevelsSettings['log']) {
      const modifiedData = {
        level: 'log',
        ...data,
      };

      this.logCustom(modifiedData);
    }
  }
  debug(arg) {
    if (logLevelsSettings['debug']) {
      const { customData, req, res, message } = arg;

      if (!!req || !!res) {
        const modifiedData = {
          level: !!arg.type ? arg.type : 'debug',
          message: message || null,
        };

        if (!!req) {
          const standardReqData = this.getStandardReqData(req);

          for (const key in standardReqData)
            modifiedData[key] = standardReqData[key];
        }
        if (!!res) {
          const standardResData = this.getStandardResData(res);

          for (const key in standardResData)
            modifiedData[key] = standardResData[key];
        }
        if (!!customData) {
          for (const key in customData) modifiedData[key] = customData[key];
        }
        this.logNative(modifiedData);
      } else {
        this.logCustom(arg);
      }
    }
  }
  error(data) {
    if (logLevelsSettings['error']) {
      const modifiedData = {
        level: 'error',
        ...data,
      };

      this.logCustom(modifiedData);
    }
  }

  static getInstance() {
    return LoggerSingletone._instance;
  }
}

const prodLogger = LoggerSingletone.getInstance();

module.exports = prodLogger;
```

## README [IT-1981](https://t.ringeo.ru/issue/IT-1981)

Метод **logger.info** работает с объектом запроса. Поле `post_data` появится только для POST запросов.
Метод **logger.debug** работает с объектами запроса и ответа, поэтому иногда придется его вызывать, передавая `{ type: 'info' }` чтобы соблюдалось ТЗ (значение level).

> **⚡ Объекты req и res передавать обязательно!**

### 1

```js
logger.info({
  req,
  message: 'Before'
});
```

Output:

```json
{
  "level": "info",
  "message": "Before",
  "reqid": null,
  "spuid": null,
  "spcid": null,
  "url": "/_next/static/chunks/0.js",
  "method": "GET"
}
```

### 2

```js
logger.debug({
  type: 'info',
  req,
  res,
  message: `After: request finished is ${String(res.finished)}`
});
```

Output:

```json
{
  "level": "info",
  "message": "After: request finished is true",
  "reqid": null,
  "spuid": null,
  "spcid": null,
  "url": "/_next/static/chunks/0.js",
  "method": "GET",
  "request_headers": {
    "host": "127.0.0.1:3000",
    "connection": "close",
    "user-agent": "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0",
    "accept": "*/*",
    "accept-language": "ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3",
    "accept-encoding": "gzip, deflate",
    "referer": "http://localhost/",
    "cookie": "theme=light; io=mx5D0HhqytIxdmNTAAAJ"
  },
  "response_headers": {
    "cache-control": "no-store, must-revalidate",
    "accept-ranges": "bytes",
    "last-modified": "Thu, 28 Jan 2021 18:08:48 GMT",
    "etag": "W/\"f22-1774a2ef7e2\"",
    "content-type": "application/javascript; charset=UTF-8",
    "vary": "Accept-Encoding",
    "content-encoding": "gzip"
  },
  "response_body": null
}
```

### 3

```js
logger.debug({
  req,
  res,
  message: `After: request finished is ${String(res.finished)}`,
  customData: {
    elapsed_seconds: elapsed,
    status_code: res.statusCode
  }
});
```

Output:

```json
{
  "level": "debug",
  "message": "After: request finished is true",
  "reqid": null,
  "spuid": null,
  "spcid": null,
  "url": "/_next/static/chunks/0.js",
  "method": "GET",
  "request_headers": {
    "host": "127.0.0.1:3000",
    "connection": "close",
    "user-agent": "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0",
    "accept": "*/*",
    "accept-language": "ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3",
    "accept-encoding": "gzip, deflate",
    "referer": "http://localhost/",
    "cookie": "theme=light; io=mx5D0HhqytIxdmNTAAAJ"
  },
  "response_headers": {
    "cache-control": "no-store, must-revalidate",
    "accept-ranges": "bytes",
    "last-modified": "Thu, 28 Jan 2021 18:08:48 GMT",
    "etag": "W/\"f22-1774a2ef7e2\"",
    "content-type": "application/javascript; charset=UTF-8",
    "vary": "Accept-Encoding",
    "content-encoding": "gzip"
  },
  "response_body": null,
  "elapsed_seconds": 0.001,
  "status_code": 200
}
```

#envs #logger #smartprice

## Two boxes
```js
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) =&gt; ({
  wrapper: {
    display: 'grid',
    [theme.breakpoints.up('md')]: {
      gridAutoRows: 'minmax(auto, auto)',
      gridAutoFlow: 'dense',
    },
    [theme.breakpoints.down('sm')]: {
      marginTop: '60px',
      marginBottom: '60px',
      // columnGap: '18px',
      rowGap: '18px',
      // gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
      // See also: https://gitlab.com/smartprice/js/ssr/-/commit/26ca2893f7a0199a8eb1e3a8875ae17256b6ca8e
      gridTemplateColumns: 'repeat(auto-fit, minmax(265px, 265px))',
      // gridAutoRows: 'minmax(230px, auto)',
      gridAutoFlow: 'dense',
    },
  },
  // side 1:
  infoBox: {
    border: '1px dashed red',
    // [theme.breakpoints.down('sm')]: {},
    // [theme.breakpoints.up('md')]: {},
  },
  // side 2:
  accordionWrapperBox: {
    border: '1px dashed red',
    // [theme.breakpoints.down('sm')]: {},
    // [theme.breakpoints.up('md')]: {},
  },
}));
```

#materialUI #cssGrid #smartprice #standartGrid

**[Инфраструктура навсегда](https://t.me/infrastuff)**

#инфраструктураНавсегда #smartprice

# Way1: Material UI

`./components/Listing/*`
```jsx
// data.ts

export const data = [
  {
    title: '3',
    description: 'года на рынке\nс 2017 года',
  },
  {
    title: '90',
    description: 'дней гарантии\nна устройства',
  },
  {
    title: '95',
    description: 'сотрудников\nв компании',
  },
];

// styles.ts

import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) => ({
  wrapper: {
    [theme.breakpoints.up('md')]: {
      marginLeft: '65px',
      minWidth: '232px',
    },
    [theme.breakpoints.down('sm')]: {
      paddingBottom: '40px',
    },
    '& > div:not(:last-child)': {
      marginBottom: '35px',
    },

    display: 'flex',
    flexDirection: 'column',
  },
  itemWrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },

  title: {
    fontFamily: 'PT Sans',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontSize: '44px',
    lineHeight: '33px',
    color: '#FCBF2C',

    minWidth: '52px',
  },

  dashBox: {
    marginLeft: '15px',
  },
  dash: {
    width: '33px',
    borderBottom: '1px solid #FCBF2C',
  },

  description: {
    marginLeft: '23px',
    minWidth: '120px',
    whiteSpace: 'pre-wrap',

    fontFamily: 'Fira Sans',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '16px',
    lineHeight: '20px',
  },
}));

// Listing.tsx

import { data } from './data';
import { useStyles } from './styles';

export const Listing = () => {
  const classes = useStyles();

  return (
    <div className={classes.wrapper}>
      {data.map(({ title, description }) => (
        <div key={`${title}_${description}`} className={classes.itemWrapper}>
          <div className={classes.title}>{title}</div>
          <div className={classes.dashBox}>
            <div className={classes.dash} />
          </div>
          <div className={classes.description}>{description}</div>
        </div>
      ))}
    </div>
  );
};
```

`./styles.ts`
```js
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) => ({
  bgImage: {
    [theme.breakpoints.up('md')]: {
      backgroundImage:
        'url(/static2/images/smartprice/noname-section-2/bg-image-desktop.jpeg?w=1000)',
      padding: '85px 0px 85px 0px',
    },
    [theme.breakpoints.down('sm')]: {
      backgroundImage:
        'url(/static2/images/smartprice/noname-section-2/bg-image-mobile.jpeg?w=350)',
      padding: theme.spacing(0, 2, 0, 2),
    },
    backgroundPosition: 'bottom',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  },
  wrapper: {
    border: '1px solid red',
    color: '#FFF',
    fontFamily: 'Fira Sans',
    fontStyle: 'normal',
    fontWeight: 'normal',

    display: 'flex',
    [theme.breakpoints.up('md')]: {
      fontSize: '16px',
      lineHeight: '20px',
      maxWidth: '1136px',
      margin: '0 auto',

      flexDirection: 'row',
      alignItems: 'center',
    },
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column',

      fontSize: '16px',
      lineHeight: '20px',
    },

    position: 'relative',
  },
  bgLayout: {
    position: 'absolute',
    top: '0px',
    left: '0px',
    right: '0px',
    bottom: '0px',
    // background: 'linear-gradient(90deg, rgba(55,128,196,0.5) 1%, transparent, rgba(55,128,196,0.1) 1%, rgba(55,128,196,0.1) 1%)',
  },
  // FLEX ITEMS:
  text: {
    [theme.breakpoints.up('md')]: {
      //
    },
    [theme.breakpoints.down('sm')]: {
      padding: '40px 0px 40px 0px',
    },
  },
}));
```

`./NoNameSection2.tsx`
```jsx
import { useStyles } from './styles';
import clsx from 'clsx';
import { Listing } from './components/Listing';

export const NoNameSection2 = () => {
  const classes = useStyles();

  return (
    <div className={classes.bgImage}>
      <div className={clsx(classes.wrapper)}>
        <div className={classes.text}>
          <p>
            Мы создаем новую концепцию осознанного потребления с целью заботы об
            окружающей среде и расходах наших клиентов на современные гаджеты.
          </p>
          <p>
            В стремительно развивающемся мире технологий смартфоны прошлых
            поколений всё так же функциональны, востребованы и могут помочь
            решить своим владельцам почти все задачи. А с учетом высоких цен на
            некоторые новые устройства, позволить себе их покупку могут далеко
            не все. Именно поэтому компания SmartPrice создала свою систему,
            внутри которой организована программа trade-in по всей территории РФ
            и стран бывшего СНГ. Наш сервисный центр на самом современном
            оборудовании проводит полную диагностику и качественный модульный
            ремонт. Мы выстроили партнерские отношения с ведущим логистическими
            службами, чтобы обеспечить Вам максимально быструю и доступную
            доставку.
          </p>
          <p>
            Всегда обеспечиваем высочайшее качество продаваемых устройств, даем
            3 месяца гарантии на случай появления любых проблем с вашим
            устройством и обеспечиваем максимально возможные низкие цены за
            такой сервис.
          </p>
          <p>SmartPrice – Trade-in оператор №1 в России и СНГ.</p>
        </div>
        <Listing />
      </div>
    </div>
  );
};
```

# Way 2: SCSS

`~/common/styled-mui/template/scss-variables/color-standard.scss`
```scss
$blue-main: #3882c4;
$yellow-main: #fcbf2c;
$black-text: #202020;
$gray-main: #8c94a0;
$grey-2: #b8bdce;
$grey-3: #d7dee9;
$grey-4: #e6eaf0;
$grey-5: #eef1f3;
$grey-blue: #e8f0f7;
$grey-6: #f4f8fb;
$red: #c84f4f;
$orange: #f5984e;
$green: #71bc81;
$blue-2: #6ea0eb;
$blue-link: #005bff;
```
`~/common/styled-mui/template/scss-variables/device-width-standard.scss`
```scss
$xs: 0;
$sm: 600;
$md: 1025;
$lg: 1280;
$xl: 1920;
```

`./NoNameSection2.module.scss`
```scss
@import 'common/styled-mui/template/scss-variables/color-standard.scss';
@import 'common/styled-mui/template/scss-variables/device-width-standard.scss';

.hello-styled-jsx-plugin-sass {
  border: 1px solid $green;
  &:hover {
    border: 1px solid $red;
  }
}

.bg-image {
  @media (min-width: calc(#{$md}px + 1px)) {
    background-image: url(/static2/images/smartprice/noname-section-2/bg-image-desktop.jpeg?w=1000);
    padding: 85px 0px 85px 0px;
  }
  @media (max-width: #{$md}px) and (max-width: #{$lg}px) {
    background-image: url(/static2/images/smartprice/noname-section-2/bg-image-mobile.jpeg?w=350);
    padding: 0px 16px 0px 16px;
  }
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  color: #fff;
  font-family: Fira Sans;
  font-style: normal;
  font-weight: normal;

  display: flex;
  @media (min-width: calc(#{$md}px + 1px)) {
    font-size: 16px;
    line-height: 20px;
    max-width: 1136px;
    margin: 0 auto;

    flex-direction: row;
    align-items: center;
  }
  @media (max-width: #{$md}px) and (max-width: #{$lg}px) {
    flex-direction: column;
    font-size: 16px;
    line-height: 20px;
  }
  position: relative;
}

.text {
  @media (max-width: #{$md}px) and (max-width: #{$lg}px) {
    padding: 40px 0px 40px 0px;
  }
}
```

`./NoNameSection2.tsx`
```jsx
import { Listing } from './components/Listing';
import styles from './NoNameSection2.module.scss';

export const NoNameSection2 = () => {
  return (
    <div className={styles.bgImage}>
      <div className={styles.wrapper}>
        <div className={styles.text}>
          The text...
        </div>
        <Listing />
      </div>
    </div>
  );
};
```

#smartprice NoNameSection2 #MaterialUI #scss

```js
import styled, { css } from 'styled-components';
import { md } from '~/common/styled-mui/theme';

interface IWrapper {
  noMardinBottom?: boolean;
}

const Wrapper = styled('div')<IWrapper>`
  ${({ noMardinBottom }) =>
    !noMardinBottom &&
    css`
      @media (max-width: ${md}px) {
        margin-bottom: 40px;
      }
      @media (min-width: ${md + 1}px) {
        margin-bottom: 60px;
      }
    `}
`;
const Title = styled('div')`
  font-family: Fira Sans;
  font-style: normal;
  font-weight: 600;
  font-family: Fira Sans;
  @media (max-width: ${md}px) {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 30px;
  }
  @media (min-width: ${md + 1}px) {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 15px;
  }
`;
const Body = styled('div')`
  display: flex;
  @media (max-width: ${md}px) {
    flex-direction: column;
  }
  @media (min-width: ${md + 1}px) {
    flex-direction: row;
  }
`;

interface IProps {
  leftSideRenderer: React.FC<any>;
  rightSideRenderer: React.FC<any>;
  title?: string;
  noMardinBottom?: boolean;
}

export const Universal2SidesSection = ({
  title,
  leftSideRenderer,
  rightSideRenderer,
  noMardinBottom,
}: IProps) => {
  return (
    <Wrapper noMardinBottom={noMardinBottom}>
      {!!title && <Title>{title}</Title>}
      <Body>
        {leftSideRenderer({})}
        {rightSideRenderer({})}
      </Body>
    </Wrapper>
  );
};
```

*Usage:*

```js
import {
  Universal2SidesSection,
  StandardPicture,
} from '~/common/styled-mui/template/smartprice/FnsThatsWeCheck/components';

// In render:
<Universal2SidesSection
  leftSideRenderer={() => (
    <div
      className={clsx(
        classes.leftSideWrapper,
        baseClasses.customizableListingWrapper
      )}
    >
      <ul className="dotted">
        <li>
          <span className="dot"></span>Камеры - фото с фронтальной и
          основной камер чёткие, видео записывается;
        </li>
      </ul>
    </div>
  )}
  rightSideRenderer={() => <StandardPicture />}
/>
```

#smartprice #Universal2SidesSection #styled-components

```js
import { Suspense } from 'react';
import { lazy } from '@loadable/component';
import { LinearProgress } from '@material-ui/core';

const BannerAsGallery = lazy(() =>
  // @ts-ignore
  import(
    /* webpackChunkName: "homepage-banner-as-gallery" */ '~/common/styled-mui/template/smartprice/banner/BannerAsGallery/BannerAsGallery'
  ).then(({ BannerAsGallery }) => ({ default: BannerAsGallery }))
);

// In renrer:
// ...
{typeof window !== 'undefined' && (
  <Suspense fallback={<LinearProgress />}>
    <BannerAsGallery
      // @ts-ignore
      deviceType={deviceType}
      bannerMaxWidth={1136}
      bannerHeight={360}
      items={{
        galleryItemsDesktop,
        galleryItemsMobile,
      }}
    />
  </Suspense>
)}
// ...
```

#smartprice #codeSplitting #loadable #suspense

> See also about [grid-template-columns](https://developer.mozilla.org/ru/docs/Web/CSS/grid-template-columns)

# Material-UI: 2 columns

`./data.ts`
```js
export const data = [
  {
    header: 'one',
    body: 'b one',
  },
  {
    header: 'two',
    body: 'b two',
  },
  {
    header: 'three',
    body: 'b three',
  },
  {
    header: 'four',
    body: 'b four',
  }
]
```

## Way 1: CSS Grid
`./styles.ts`
```js
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) => ({
  grid: {
    display: 'grid',
  
    [theme.breakpoints.down('sm')]: {
      columnGap: '8px',
      rowGap: '8px',
      // gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
      gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 320px))',
      // gridAutoRows: 'minmax(230px, auto)',
      gridAutoFlow: 'dense',
  
      marginBottom: '26px',
    },
    [theme.breakpoints.up('md')]: {
      columnGap: '26px',
      rowGap: '26px',
      gridTemplateColumns: 'repeat(auto-fit, minmax(450px, 1fr))',
      // See also: https://gitlab.com/smartprice/js/ssr/-/commit/26ca2893f7a0199a8eb1e3a8875ae17256b6ca8e
      // gridAutoRows: 'minmax(auto, auto)',
      gridAutoFlow: 'dense',
    },
  },
  gridItem: {
    border: '1px dashed red',
    [theme.breakpoints.down('sm')]: {
      padding: '48px 40px 37px 40px',
    },
    [theme.breakpoints.up('md')]: {
      padding: '48px 55px 33px 55px',
    },
  },
}));
```
`./ShitAsGrid.tsx`
```js
import { useStyles } from './styles'

export const ShitAsGrid = () => {
  const classes = useStyles()

  return (
    <div className={classes.grid}>
      <div className={classes.gridItem}>1</div>
      <div>empty</div>
      
      <div className={classes.gridItem}>2</div>
      <div className={classes.gridItem}>3</div>
      <div>empty</div>
      <div className={classes.gridItem}>4</div>
    </div>
  )
}
```
### С вертикальным смещением
`./styles.ts`
```js
import { makeStyles } from '@material-ui/core/styles';

export const useStyles = makeStyles((theme) => ({
  grid: {
    marginBottom: '184px',

    display: 'grid',

    [theme.breakpoints.down('sm')]: {
      columnGap: '8px',

      rowGap: '8px',

      gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',

      // gridAutoRows: 'minmax(230px, auto)',

      gridAutoFlow: 'dense',
      marginBottom: '26px',
    },

    [theme.breakpoints.up('md')]: {
      columnGap: '30px',

      rowGap: '30px',

      gridTemplateColumns: 'repeat(auto-fit, minmax(450px, 1fr))',

      // gridAutoRows: 'minmax(auto, auto)',

      gridAutoFlow: 'dense',
      '& > div:nth-child(2), & > div:nth-child(4)': {
        transform: 'translateY(90px)',
      },
    },
  },
  gridItem: {
    border: '1px dashed red',
    [theme.breakpoints.down('sm')]: {
      padding: '48px 40px 37px 40px',
      // width: '100%',
      // minWidth: '500px',
    },
    [theme.breakpoints.up('md')]: {
      padding: '48px 55px 33px 55px',
      // width: '50%',
    },
  },
}));
```

## Way 2: CSS Flexbox
```js
import { makeStyles } from '@material-ui/core/styles';

const gridGap = {
  desktop: 30,
  mobile: 50,
}

export const useStyles = makeStyles((theme) => ({
  grid: {
    display: 'flex',
    
    [theme.breakpoints.up('md')]: {
      flexDirection: 'row',
      '& > div': {
        display: 'flex',
        flexDirection: 'column',
        width: '50%',

        '& > div:not(:last-child)': {
          marginBottom: `${gridGap.desktop}px`,
        },
      },

      '& > .divider': {
        width: `${gridGap.desktop}px !important`,
      },

      '& > div:not(:last-child)': {
        marginBottom: `${gridGap.desktop}px`,
      },

      // Transform feature:
      '& > div:nth-child(3)': {
        transform: 'translateY(90px)',
      },
      marginBottom: '184px',
    },
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column',
      '& > div': {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',

        '& > div:not(:last-child)': {
          marginBottom: `${gridGap.mobile}px`,
        }
      },
      '& > .divider': {
        display: 'none',
      },
      '& > div:not(:last-child)': {
        marginBottom: `${gridGap.mobile}px`,
      },
      marginBottom: '60px',
    },
  },
  gridItem: {
    background: '#EEF1F3',
    borderRadius: '4px',

    display: 'flex',
    flexDirection: 'column',

    '& > .header': {
      fontWeight: 600,
      fontSize: '20px',
      lineHeight: '26px',
      marginBottom: '15px',
    },
    '& > .body': {
      fontWeight: 'normal',
      fontSize: '16px',
      lineHeight: '20px',
    },

    [theme.breakpoints.down('sm')]: {
      padding: '48px 40px 37px 40px',
    },
    [theme.breakpoints.up('md')]: {
      padding: '48px 55px 33px 55px',
    },
  },
}));
```
`./ShitAsGrid.tsx`
```js
import { useStyles } from './styles';
import { data } from './data'

export const ShitAsGrid = () => {
  const classes = useStyles();

  return (
    <div className={classes.grid}>
      <div>
        {
          [data[0], data[1]].map(({ header, body }: any, i) => (
            <div className={classes.gridItem} key={i}>
              <div className='header'>{header}</div>
              <div className='body'>{body}</div>
            </div>
          ))
        }
      </div>
      <div className='divider' />
      {<div>
      {
          [data[2], data[3]].map(({ header, body }: any, i) => (
            <div className={classes.gridItem} key={i}>
              <div className='header'>{header}</div>
              <div className='body'>{body}</div>
            </div>
          ))
        }
      </div>}
    </div>
  );
};
```

# styled-components

```js
const WrapperAsGrid = styled('div')`
  @media (max-width: ${md - 1}px) {
    display: flex;
    flex-direction: column;
    & > div:not(:last-child) {
      margin-bottom: 16px;
    }
  }
  @media (min-width: ${md}px) {
    display: grid;
    column-gap: 16px;
    row-gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    /* grid-auto-flow: dense; */
  }
`;
const SubWraper = styled('div')`
  // border: 1px dashed lightgray;
  & > div:not(:last-child) {
    margin-bottom: 16px;
  }
`;
```

Usage
```jsx
<h2>Персональные данные</h2>

<WrapperAsGrid>
  <SubWraper>
    <div>
      <FormControl variant="outlined" color="secondary">
        <InputLabel id="id_type_label">Тип документа</InputLabel>
        <Select
          labelId="id_type_label"
          label="Тип документа"
          name="id_type"
          value={this.state.id_type}
          onChange={this.onInputChange}
        >
          <MenuItem value="passport">Паспорт РФ</MenuItem>
        </Select>
      </FormControl>
    </div>

    <WrapperAsGrid>
      <div>
        <InputMask
          mask="9999"
          value={this.state.id_serial_number}
          onChange={this.onInputChange}
        >
          {() => (
            <TextField
              label="Серия"
              variant="outlined"
              name="id_serial_number"
            />
          )}
        </InputMask>
      </div>

      <div>
        <InputMask
          mask="999999"
          onChange={this.onInputChange}
          value={this.state.id_number}
        >
          {() => (
            <TextField
              label="Номер"
              variant="outlined"
              name="id_number"
            />
          )}
        </InputMask>
      </div>
    </WrapperAsGrid>

    <div>
      <TextField
        label="Фамилия"
        name="last_name"
        value={this.state.last_name}
        onChange={this.onInputChange}
        variant="outlined"
      />
    </div>

    <div>
      <TextField
        label="Имя"
        name="first_name"
        value={this.state.first_name}
        onChange={this.onInputChange}
        variant="outlined"
      />
    </div>

    <div>
      <TextField
        label="Отчество"
        name="patronymic"
        value={this.state.patronymic}
        onChange={this.onInputChange}
        variant="outlined"
      />
    </div>

    <WrapperAsGrid>
      <div>
        <TextField
          label="Место рождения"
          name="id_city"
          value={this.state.id_city}
          onChange={this.onInputChange}
          variant="outlined"
        />
      </div>

      <div>
        <InputMask
          mask="99.99.9999"
          value={this.state.birth_date}
          onChange={this.onInputChange}
        >
          {() => (
            <TextField
              label="Дата рождения"
              variant="outlined"
              name="birth_date"
            />
          )}
        </InputMask>
      </div>
    </WrapperAsGrid>
  </SubWraper>
  <SubWraper>
    <div>
      <TextField
        label="Кем выдан"
        name="id_issued_by"
        value={this.state.id_issued_by}
        onChange={this.onInputChange}
        variant="outlined"
        multiline
        rows={4}
      />
    </div>
  </SubWraper>
</WrapperAsGrid>
```

smartprice