kastigar

function Component() {
  // ...
}

Component.defaultProps = {
  propName: 'default',
};

kastigar

const currencySigns = {
  'USD': '$',
  'EUR': '€',
};

function formatPrice({ price, currency_code}) {
  const sign = currencySigns[currency_code];

  return sign ? `${sign}${price}` : `${price} ${currency_code}`;
}  

kastigar

function withGoodReadability() {
  if (someCondition) {
    return someValue;
  }

  return anotherValue;
}

function withBadReadability() {
  if (someCondition) {

kastigar

/*
daysByWeek = [
  { days: [{ number: 31, other: true }, { number: 1 }, { number: 2, current: true }] },
  {...},
  {...},
]
*/

function Calendar(props) {
  const daysByWeek = calculateDaysByWeek(props.date);

kastigar

function Menu(props) {
  return (
    <div>
      <div class="toggle" />
      {props.opened && (
        <nav>
          <ul>
            {props.items.map(renderMenuItem)}
          </ul>
        </nav>

kastigar

function ShopItem(props) {
  return (
    <div>
      {"..."}
    </div>
  );
}

kastigar

function createReducerWithDefaultCase(decl, initial) {
  const defaultCase = decl['*'];
  delete decl['*'];
  const reducer = createReducer(decl, initital);

  if (!defaultCase) return reducer;
  
  const declaredActions = Object.keys(decl);

  return (state, action) => {

kastigar

module.exports = function AutotypePlugin({ types: t }) {
  const gettersByType = {
    VariableDeclarator(path) {
      const { id } = path.parent;

      if (t.isIdentifier(id)) {
        return id.name;
      }

      console.log(`Unsupported VariableDeclarator.id: ${id.type}`);

kastigar

export const addStep = actionCreator(
  setType('addStep'),
  withReducer.inPath('turn.steps', (atom, card) => [...atom, card]),
);

export const finishTurn = actionCreator(
  setType('finishTurn'),
  withReducer.inPath('turn.done', () => true),
);

kastigar

Task

Implement a page with a multi-step form, where each step comes out below after filling out the previous one.

Steps

1. Two checkboxes with labels A1 and A2. Both are unchecked by default. Next step is available after at least one of them is checked.
2. Two toggle buttons with labels B1 and B2. One button untoggles another (same as radio buttons behavior). Both are inactive by default. Next step is available when any option has been chosen.
3. Text field with button Check. When button is pressed a value of the field will be send. Next step is available if a response from API is fine.
4. Selectbox with C1, C2, C3 options. It is empty by default. Next step is available when any option has been chosen.