Павло Пономаренко

Почему вы используете нативный JS, когда у вас есть JQuery?

$(document).ready(function(){
     var $img = $('#div01 img');
     alert($img.attr('src'));
});

Еще вы неправильно используете indexOf:

indexOf(i) != undefined

indexOf НИКОГДА не возвращает undefined. Если вы хотите проверить элемент на существование в массиве, то необходимо это делать так:

indexOf(i) >= 0

Неплохо бы пример для тестов выложить.
Пробовали использовать

.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Правильный подход в таком случае - разделить получение данных из базы и проверку на нулевую цену. Ну самый простой пример - создайте функцию ensure_that_every_goods_has_price(goods) и вызывайте её вместо того, чтобы включать цикл в тело.

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

def ensure_that_every_goods_has_price(products)
  products.map do |product|
    unless product[:price] > 0
      warn 'wrong price'
      next
    end
  end
end

def products
  products = database.query 'SELECT * FROM product WHERE price > 0;'
  ensure_that_every_goods_has_price(products)
end

## test:

products = database.query 'SELECT * FROM product WHERE price >= 0;'
should_warn ensure_that_every_goods_has_price(products)

Конфликт будет, но он должен быть во время pull. Допустим, мы в ветке master:

git commit -m "Мои изменения"
git pull
/// резолвим конфликты
git commit -m "Конфликты зарезолвены"
git push

Резовлит тот, кто делает pull, но он может позвать для консультации всех, кого необходимо. В случае git-flow разработчик работает в ветке feature-branch

git commit -m "Мои изменения"
git pull
/// резолвим конфликты с другими разработчиками, которые разрабатывают feature
git commit -m "Конфликты зарезолвены"
git merge develop
/// резолвим конфликты с мастером
git commit -m "Конфликты с основной веткой зарезолвены"
git push

После этого можно делать pull-request в develop-ветку. Если ветка меняется и снова появляются конфликты - опять делаем merge в feature-branch и push, Pull Request к примеру на ГитХаб обновится автоматически

Какой профит в архитектуре приложения React + MobX + TS + OOP?

Если абстрактно ответить на этот вопрос, то профит - огромен. MobX - прекрасный фреймворк и позволяет писать поддерживаемый код. Намного лучше той лапши, которую пропагандирует Редакс.

Если углубляться в ваш пример, то выглядит всё странно. Например, мне совершенно непонятен этот пункт:

В том числе у нас теперь по правилам OOP есть view, model, controller - что собственно из маленького компонента делает огроменный компонет и еще в трёх файлах.

Компоненты Реакт - это исключительно View. Нету никакой логики делать model-компоненты, ибо вся модель лежит где-то в области MobX в файлах с расширением .ts. Реакт - это вьюшка и то, что они пишут модель и контроллеры во вьюшке - это странно.

this.addCssClassIf - пример того, где злоупотребляют наследованием там, где, очевидно, нужна композиция.

functional component

В Ф.К. лично я смысла вижу мало. В любом приложении нужны классические компоненты. Так зачем пользоваться двумя типами компонентов, если можно пользоваться одним.

pure

Чистый pure (простите за тафтологию) в Реакте встречается редко. Обычно только в каких-то мелких вьюшках. И pure как самоцель, на самом деле, не нужна, если только вы не гонитесь за временным хайпом.

Вот тут вы вызываете функцию без аргументов:

function minusGoods(){
  // ......
  showCart();
}

А вот тут хотите в неё аргументы, которые передаете в JSON.parse

function showCart(data) {
  var pack = JSON.parse(data);

В итоге у вас получается ваша ошибка:
JSON.parse(undefined)

Я тут поэкспериментировал. Мне кажется, задача в такой постановке нерешаема, увы. Вам необходимо подобрать значения a и b функции y=a*x+b такие, чтобы получить следующие результаты:



Как видите, функция линейная, а нам нужен волнистый график. Возможно, можно написать несколько графиков, которые перекрывают друг друга, но сложность поддержки будет запредельной. Самый простой вариант (если принципиально сделать это в css без изменения кода или html) - вручную указать все элементы, которые необходимо покрасить:

https://codepen.io/anon/pen/BOdMpP

div b:nth-child(1),
div b:nth-child(3),
div b:nth-child(6),
div b:nth-child(8),
div b:nth-child(9),
div b:nth-child(11),
div b:nth-child(14),
div b:nth-child(16) {
  background: #666;
}

EDIT: Хотя я посмотрел внимательнее на доску 8*8. У нас получается два линейных графика (в колонке B
и C - номера клеток, которые должны быть покрашены), но я пока не могу придумать, как вставить эти разрывы:

Причину нашел - оказывается я наглупил.
У меня был метод pre-save в схеме и я забыл вызвать в нём next.