Middle

#React signup form 1. Explain how StateProvider works, share your thoughts with interviewer. 2. Take a look at /src/api/mock, explain how it works. 3. Check SubmitButton color and fix it 4. Implement client form validation in Signup component. (\*) Keep in mind task number 9. Rules: - Username, Email, Password, Repeat Password fields should have at least 6 characters length; - Password should match Repeat Password; - Validation should be done upon "SignUp" button click; - Fields that have invalid values should be marked (error and helperText props); 6. API response may have an error that should be displayed to user near corresponding field. 7. Make sure that UserName component renders new username after successful submit. 8. Implement the new SignupSuccess component. It should be shown instead of sign up form. 9. Implement server validation for appropriate fields. --- Code from mock.ts: ```typescript const fakeResponse = (userName) => ({ code: 200, user: { id: 42, userName, }, }); let a = 0; const api = { '/signup': function (userName: string, email: string, password: string) { a++; return new Promise((resolve, reject) => { setTimeout(() => { if (a % 2 === 0) { return resolve(fakeResponse(userName)); } else { return reject( new Error( `Username "${userName}" is already taken. Please try another one.` ) ); } }, 500); }); }, }; export default api; ```

sobes.tech AI

Answer from AI

StateProvider — is a component that provides a state context for child components. It uses React Context API to store and pass down state and methods to modify it, avoiding prop drilling and centralizing state management.
In /src/api/mock, a mock API is implemented that simulates an asynchronous server request. The /signup function takes user data and returns a promise that either resolves with a successful response or rejects with an error after 500 ms, imitating a situation where the username is already taken (alternates on calls).
To fix the color of the SubmitButton, check the component styles and ensure the color matches the design. For example, if the color is set via props, correct the color value to the desired one.
For validation in the Signup component when clicking the "SignUp" button, check:

Length of Username, Email, Password, Repeat Password >= 6
Password and Repeat Password match

Mark fields with errors using props error and helperText.

Validation example:

const validate = () => {
  const errors = {};
  if (username.length < 6) errors.username = 'Minimum 6 characters';
  if (email.length < 6) errors.email = 'Minimum 6 characters';
  if (password.length < 6) errors.password = 'Minimum 6 characters';
  if (repeatPassword.length < 6) errors.repeatPassword = 'Minimum 6 characters';
  if (password !== repeatPassword) errors.repeatPassword = 'Passwords do not match';
  setErrors(errors);
  return Object.keys(errors).length === 0;
};

const handleSubmit = () => {
  if (!validate()) return;
  // send data
};

If the API returns an error, it should be displayed next to the corresponding field, for example, if the username is taken — show an error on the Username field.
After successful registration, the UserName component should update and display the new username received from the API response.
The SignupSuccess component is displayed instead of the form after successful registration, showing a success message.
Server-side validation is implemented in the mock API: every second request returns an error that the username is taken. The client should handle this error correctly and inform the user.

Thus, the task involves working with state, validation, error handling, and displaying different UI states.

Previous Next