Антон Спирин

function runOnKeys(func, ...codeN){

  var pressed = [];
    
  window.onkeydown = function(e){
    pressed.push(e.which);
    for(var i = 0; i<codeN.length; i++){
      if(pressed.indexOf(codeN[i]) == -1) return false;
    }
    func();
    pressed = [];
  }
    
  window.onkeyup = function(e){
    pressed = [];   
  }
}

runOnKeys(
  function() { alert("Привет!") },
  "Q".charCodeAt(0),
  "W".charCodeAt(0)
);

Демо: https://jsfiddle.net/r6wyfdkc/

Причина в относительном позиционировании .R-col с z-index: 20.
Поэтому безразлично сколько вы ставите z-index модальному окну, пока оно дочернее .R-col, оно всегда будет под .modal-blacktop пока z-index .modal-blacktop >= z-index .R-col
https://jsfiddle.net/ycyym828/

var CHARS_LIMIT = 6;
var string = 'Компьютер';
var cuttedString = string.substring(0, CHARS_LIMIT);

console.log(cuttedString);

// => Компью

Чем, в вашем случае, мотивирован отказ от jquery?
С использованием jquery код можно сократить раз в 10, как и затраченное на написание этих макарон время. А еще код был бы более читаемым и поддерживаемым.

Если все-таки решите перейти на сторону добра https://jsfiddle.net/b4x2kc4s/
Версия с делегированием на document https://jsfiddle.net/bg0bgr27/
Еще версия с отключением активного элемента, по клику вне dropdown https://jsfiddle.net/wmo4m2d7/

Что сам читал:
1. Брюс Эккель - Философия Java
2. Корнелл Хорстманн - Java. Библиотека профессионала.
3. Элизабет Фримен и Эрик Фримен - Паттерны проектирования
4. Джошуа Блох - Java. Эффективное программирование
5. Роберт Мартин - Чистый код

Ну и что-нибудь поновее.

state в react нельзя менять напрямую, надо использовать асинхронный метод setState.

createCheckboxes = () => {
  const data = this.props.pets[0] || {};
  const newAnimals = Object.values(data).map(el => el.animal);
 
  this.setState(({ animals }) => ({
    animals: [ ...animals, ...newAnimals ],
  }));
};

Ошибка из-за того, что вы используете к колбеке map не стрелочную функцию, а обычную и в ее контексте this в strict режиме ссылается на undefined. Со стрелочной функцией такой ошибки бы не было.

PS. Я вам советовал писать в state состояния фильтра и фильтровать массив при рендере. А вы все делаете наоборот. Неправильно используете библиотеку и функции массива. Вам надо документацию по react хорошо изучить и основы js подтянуть. Особенно возможности ES6 и экспериментальных фич используемых в react разработке.

Советую перед тем как будете отправлять работодателю свое тестовое задание, сбросить его сюда попинать.

Проблема из-за того, что браузеры заменяют пробелом перенос строки между inline-block элементами.
Вот статья к которой разбираются способы их устранения https://htmlacademy.ru/blog/21-fighting-the-space-...

Ваш код поправленный одним из способов https://codepen.io/rockoff/pen/jYzKLb

Вы неправильно используете  bootstrap. Посмотрите как делается в официальной документации.
Для адаптивной верстки используйте flex или float.

Так https://jsfiddle.net/v6et1xpe/

Мутируете старый объект состояния, а надо возвращать новый.
Исправить можно так:

let counterReducer = (state=initialState, action) => {
    let newstate = { ...state };

    switch(action.type){
        case "INC":
            newstate.counter+=action.payload
            return newstate
        case "DEC":
            newstate.counter+=action.payload
            return newstate
        default:
            return newstate
    }
}

Как-то так для скролла:

class Header extends Component {
  state = {
    headerClass: headerClass(),
    headerSticky: headerSticky(),
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  };

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  };

  handleScroll = e => {
    this.setState({
      headerSticky: headerSticky(),
    });
  };

  render() {
    ...
  }
}

Для обработки ресайза лучше использовать applyContainerQuery из react-container-query:

import { applyContainerQuery } from 'react-container-query';
import { First, Second, Wrapper } from '../somePlace';

const myQuery = {
  hasMinWidth: {
    minWidth: 1024,
  },
};

class MyComponent extends Component {
  ...
  render() {
    const {
      containerQuery: { hasMinWidth },
    } = this.props;

    return (
      <Wrapper>
        {hasMinWidth ? <First /> : <Second />}
      </Wrapper>
    );
  }
}

export default applyContainerQuery(MyComponent, myQuery);

Так вы сможете обрабатывать ресайз во всем приложении.

Вы, конечно, можете повесить слушателя как в случае со scroll, но лучше разрулить все это с помощью applyContainerQuery так как один слушатель будет менять все компоненты приложения. Ну или можете попробовать свою реализацию этой утилиты написать.

Так:

class UserForm extends React.Component{
  state = {
    login: '',
    password: '',
  };
  
  handleChange = e => {
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };
  
  handleSubmit = e => {
    const { login, password } = this.state;

    e.preventDefault();
    alert(`
      login: ${login}
      password: ${password}
    `);
  };
  
  render(){
    const { login, password } = this.state;

    return(
      <div>
        <form onSubmit={this.handleSubmit}>
          <Fields
            text="Введите логин"
            type="text"
            name="login"
            value={login}
            onChange={this.handleChange}
           />
          <Fields
            text="Введите пароль"
            type="password"
            value={password}
            name="password"
            onChange={this.handleChange}
           />
          <MuiThemeProvider>
            <RaiseButtin
              label="Войти"
              fullWidth={true}
              style={style.button}
             >
               <input
                 type="submit"
                 style={style.exampleImageInput}
               />
             </RaiseButtin>
          </MuiThemeProvider>
        </form>
      </div>
    );
  }
}

Обратите внимание, что добавлены свойства(атрибуты) name для Fields.

Демо: https://jsfiddle.net/tkvz8ggn/

Копирование массива:
purchase.products = add.products.slice();
ES6:
purchase.products = [...add.products];

Можно так:

this.items.forEach((item) => {
   this.teams.forEach((team) => {
      if (item.team_id === team.id) {
          if (team.items) {
            team.items.push(item);
          } else {
            team.items = [item];
          }
      }
  });
});

Либо предварительно:

this.teams.forEach(team => {
  team.items = [];
});

Предварительно определить будет хорошо, если массив обязательно должен быть, даже пустой.

Примерно так:

import React, { Component } from 'react';

class List extends Component {
  state = {
    elements: [
      {
        id: 1,
        title: 'First',
      },
      {
        id: 2,
        title: 'Second',
      },
    ],
  };
  
  handleDeleteElement = id => {
    this.setState(prevState => ({
      elements: prevState.elements.filter(el => el.id != id);
    }));
  };
  
  render() {
    const { elements } = this.state;
    
    return (
      <ul>
        {elements.map(el => (
          <li
            key={el.id}
            onClick={() => { this.handleDeleteElement(el.id) }}
          >
            {el.title}
          </li>
        ))}
      </ul>
    )
  }
}

Так:

transitionToAnchor(id, event){
    this.searchDataPopup(id);
    this.props.onClose();
    event.preventDefault();
}

Переделайте так:

module.exports = {
  context: __dirname + "/public/js/",
  entry: "./AuthForm",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname + "public/src")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ['es2015', 'stage-0', 'react']
            }
          }]
      }
    ]
  }
};

не забудьте установить пресеты для babel:

npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0

То, что у вас исходники в папке public, как минимум, семантически неверно, переименуйте в src, client или app

Это не scale странно работает, а вы transform переопределяете.
было:
transform: rotate(90deg);
после :hover стало:
transform: scale(1, 2);

чтобы rotate сохранить надо так переопределять:
transform: rotate(90deg) scale(1, 2);