Test task

api.js

export function checkIt(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value && value[0] === '@') {
        resolve();
        return;
      }

      reject(new Error('Value should start with `@`'));
    }, 2000);
  });
}

export function submitIt(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve(data);
        return;
      }

      reject(new Error('BANG! Try again later'));
    }, 2000);
  });
}

Challenge.md

Task

Implement a page with a multi-step form, where each step shows when you have completed the previous one. In other words, we're not looking for previous/next buttons, but the next step should appear automatically.

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.
5. Submit button. Should send data to the server.

If a form submit fails then a user must be informed by an error message. It doesn't matter how the message appears but the redux store should be able to manage it.

Form payload specification

JSON with a (checked values), b (active button value), text (text field value), c (selectbox's value) fields. Example:

{
  a: ["A1"],
  b: "B1",
  text: "@abcdef",
  c: "C1"
}

API

Use api.js from this gist.

Requirements

1. Use any starting boilerplate to setup your project. (e.g)create-react-app).
2. Install redux and use the redux store to manage the state.
3. Use any library you need.
4. Single page is enough. No need to use routers and create any other pages.
5. If you want to use inline styles do it in a nice way. :)
6. Use best practices for react/redux/frontend. We will look at how you apply them.
7. Use software engineering principles to write your code. We will ask about them.
8. Well structured and readable code matters. Can other developers easily read your code and extend it?
9. Keep a healthy commit history.
10. Have at least 20% test coverage. Test at least one react component.
11. Functional programming is a plus :)

Run project

Next steps are expected to start your project

npm install
npm run build
npm start

Tip: as server tool you can use http-server

Codestyle

It would be nice if you will follow Code Style Guides of Airbnb

GOOD LUCK!