Антон Спирин

Можно сделать так:

class FormWidget extends Component {
  state={
    isFormVisible: false,
  };

  handleButtonClick = () => {
    this.setState(prevState => ({
      isFormVisible: !prevState.isFormVisible,
    }));
  }

  render() {
    const { isFormVisible } = this.state;
    const buttonText = isFormVisible ? 'Hide form' : 'Show form';

    return (
      <Wrapper>
        <Button onClick={this.handleButtonClick}>
          {buttonText}
        </Button>
        <Form isVisible={isFormVisible} />
      </Wrapper>
    )
  }
}

state из кнопки и формы следует убрать.
Конструкторы в react использовать не надо.

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

@media only screen and (min-width: 401px) and (max-width: 600px) {

}

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media="only". Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

Уберите width: auto;
https://jsfiddle.net/urbt4L1u/

Такой вариант записи используют в JS, когда надо получить ключ или вызвать функцию с помощью переменной.
Это возможность самого языка, а не конструкция jquery.

var foo = {
  bar: 'bar value',
};

console.log(foo.bar);
// => bar value

console['log'](foo['bar']);
// => bar value

Разберем ваш пример. Такая запись:

var action = 'addClass';

$('.some-selector')[action]('some-class');

равносильна такой:
$('.some-selector').addClass('some-class');

То же самое для объекта:

var key = 'name';

var obj = {
  name: 'Tom',
  age: 24,
};

console.log(obj[key]);
// => Tom

console.log(obj.name);
// => Tom

console.log(obj[key] === obj.name);
// => true

key = 'age';

console.log(obj[key]);
// => 24

Так же есть случаи, когда к ключу можно обратиться только таким способом:

var obj = {
  'three words key': 'value',
};

console.log(obj['three words key']);

// => value

Сделайте так:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { someAcion } from '../somePlace';

class App extends Component {
  ...
  componentWillReciveProps(nextProps) {
    if (this.props.location !== nextProps.location) {
       this.props.someAciton();
    }
  }
  ...
}

const mapDispatchToProps = {
  someAction,
};

export default withRouter(connect(null, mapDispatchToProps)(App));

По-хорошему, надо код запроса писать вне компонента, а в компонент передавать action инициирующий запрос. Хорошим вариантом будет использовать для этого redux-saga. В Settings вы должны только запрашивать данные и как только они приходят получать их где хотите из store.

Примерный код:
Редьюсер и action creators:

const FETCH_USER_DATA_REQUEST = 'FETCH_USER_DATA_REQUEST';
const FETCH_USER_DATA_SUCCESS = 'FETCH_USER_DATA_SUCCESS';
const FETCH_USER_DATA_FAIL = 'FETCH_USER_DATA_FAIL';

export const fetchUserData = () => ({
  type: FETCH_USER_DATA_REQUEST,
});

export const fetchUserDataSuccess = data => ({
  type: FETCH_USER_DATA_SUCCESS,
  payload: data,
});

export const fetchUserDataFail = () => ({
  type: FETCH_USER_DATA_FAIL,
});

const initialState = {
  data: {},
  isLoading: true,
  isError: false,
};

export default (state = initialState, action) => {
  const { type, payload } = action;

  switch (action) {
    case FETCH_USER_DATA_REQUEST:
      return {
        ...state,
        isLoading: true,
      };
   
    case FETCH_USER_DATA_SUCCESS:
      return {
        ...payload,
        isLoading: false,
        isError: false,
      };

   case FETCH_USER_DATA_FAIL:
     return {
       ...state,
       isLoading: false,
       isError: true,
     };
   
   default: 
      return state;
  }
};

Сага. По вызову функции fetchUserData, тут произойдет вызов api, в случае успеха в store придут данные, в случае ошибки isError примет значение true:

import { call, put, takeLatest } from 'redux-saga/effects';
import {
  FETCH_USER_DATA_REQUEST,
  fetchUserDataSuccess,
  fetchUserDataFail,
} from '../ducks/userDucks';
import { fetchUserData } from '../api';

export function* fetchUserDataSaga() {
  try {
    const { data } = yield call(fetchUserData);

    yield put(fetchUserDataSuccess(data));
  } catch (error) {
    yield put(fetchUserDataFail());
  }
}

export default function* watchFetchUserDataSaga() {
  yield takeLatest(FETCH_USER_DATA, fetchUserDataSaga);
}

Для выборки из store лучше использовать selector:

export const userDataSelector = state => state.userData;

Тут провайдим данные пользователя в User:

import User from './User';
import { userDataSelector } from '../selectors';

const mapStateToProps = state => ({
  userData: userDataSelector(state),
});

export default connect(mapStateToProps)(User);

Тут провайдим данные пользователя и fetchUserData в Settings:

import Settings from './Settings';
import { userDataSelector } from '../selectors';
import { fetchUser } from '../ducks/userDucks';

const mapStateToProps = state => ({
  userData: userDataSelector(state),
});

const mapDispatchToProps = {
  fetchUserData,
};

export default connect(mapStateToProps, mapDispatchToProps)(Settings);

Используйте readline-sync:

const readline = require('readline-sync');

const name = readline.question("What is your name?");

console.log("Hi " + name + ", nice to meet you.");

Пакет необходимо предварительно установить:
npm install readline-sync -S

Потому что правило display для вашего компонента задается селектором css, а не является ключом собственного свойства style.

Так будет работать:

var leftMenu = document.querySelector(".left-menu");
var displayValue = window.getComputedStyle(leftMenu,null).getPropertyValue("display");
console.log(displayValue === 'none');

Ваша проблема решается так:

class Login extends Component {
  componentWillMount() {
    ...
    if(isLoggedIn) {
      this.props.history.push('/main');
    }
  }
  ...
}

Вы можете сейчас писать в cookie уникальный id. Утилита для генерации.
Писать в firebase данные по этому ключу.
При инициализации приложения проверять если cookie есть, то запросить в firebase данные по ключу. Если нет сгенерировать id и записать в cookie. В итоге заметки у всех будут разные. А подобрать чужой id ключ маловероятно.
Правда логику обновления заметок придется изменить, но вам ее так и так придется менять.
Тут надо будет по каждому изменению писать их массивом в firebase по одному ключу.

А потом и с авторизацией разберетесь.

Вместо cookie можно использовать localstorage.

Еще проще пока писать заметки пользователей в localstorage, не используя firebase

Потому что вы вызываете функцию myFunction с аргументом 5 и присваиваете someBtn.onclick результат ее выполнения, а не саму функцию.

Исправьте так:

var someBtn = document.getElementById('all');

someBtn.onclick = function() {
  myFunction(5);
}

function myFunction(a){
  alert(a);
}

или так:

var someBtn = document.getElementById('all');

someBtn.onclick = function() {
  alert(5);
}

а по-хорошему так:

var someBtn = document.getElementById('all');

someBtn.addEventListener('click', function() {
  myFunction(5);
});

function myFunction(a){
  alert(a);
}

В React в большинстве кейсов важна иммутабельность и если вы получаете массив из другого места, надо так:

const array = [{ name: 'John', age: 32}];

const element = { name: 'Sally', age: 25 };

const newArray = [ ...array, element ];

// =>  [{ name: 'John', age: 32},  { name: 'Sally', age: 25 }]

push можно использовать, только если вы расширяете массив в той же функции, где инициализируете.

Набросал простое, адаптивное решение.
Чистый JS:
jsfiddle.net/xxpxpamj
JQuery:
jsfiddle.net/1t0ufsbo

Можно так https://jsfiddle.net/zmhaf9Lf/

shouldBeFiltered
isFilteringNeeded

Да, но по-хорошему форма должна сбрасываться:
document.getElementById("myForm").reset();
или:
$('#myForm').trigger("reset");

По клику отправить, должен появляться progress spinner или другой индикатор процесса отправки и по результатам либо оповещение об успешной отправке и сброс, либо об ошибке без сброса.
Тогда пользователь не будет переживать, что данные не отправились, или что-то прошло не так.
Можно для форм с важными данными, в сообщении об успешной отправке цитировать тело обращения и контакты.

Используйте Object.create
https://jsfiddle.net/y35b8xt8/

Object.assign копирует, только собственные перечисляемые свойства.

combineReducers принимает на вход объект с функциями вида:
(state: S, action: A) => S
а вы передаете boolean.

Создайте для isInputActive функцию reducer, что-то вроде

const isInputActiveReducer = (state = false, action) => {
  const { payload, type } = action;

  switch(type) {
    case TOGGLE_INPUT:
      return payload;
  default:
      return state;
  }
}

Но вообще передавать состояние input в store плохая идея. Для этого с лихвой хватит state компонента.

Используйте шаблонные строки:
body: `Hey, ${userName}! You've been notified!`,
или конкатенацию:

body: "Hey, " + userName + "! You've been notified!",

Код в componentDidUpdate не верный, исправить можно так:

componentDidMount() {
    const ideas = firebase.database().ref("items");
    let arr = [];
    ideas.on("value", snapshot => {
      let items = snapshot.val();
      for (let item in items) {
        arr.push({
          id: item,
          text: items[item].text
        });
      }
      this.props.renderIdeas(arr);
    });
  
  }

Причина - ассинхронность. Он у вас рендерил компонент до завершения колбека on value. Так как ссылку на массив вы передали, то в консоли он отобразился и обновился, но render прошел с пустым.

Перебирать массивы for in не рекомендуется, может быть нарушен порядок элементов. Для объектов так же лучше использовать Object.keys(obj).map

Object.keys(obj).map(key => ({ id: key, text: obj[key].text }));

reducer для render использовать не надо.