Challenge Overview
Reset form data and wizard state when switching the project template.
Project Background
Topcode Connect is a client-facing application of Topcoder. Users may create a new project using the link https://connect.topcoder-dev.com/new-project/. There are many kinds of projects that could be chosen as defined by Project Templates. When we choose a different Project Template we see a different form to fill in. Generally, we have 2 types of forms: simple 1-step forms like for “Chatbot”, and complex multip-step forms aka “wizards” like “TaaS”.
When users fill in the forms we always keep the data they entered even when the user leaves the page, we save it to the Local Storage of the browser. For the “wizard” form we also keep the current form state (step) and also keep it in the Local Storage.
Currently, if the user started filling the form with one Project Template and after they click the arrow “back” in the left top corner and choose another Project Template we still keep the data and “wizard” step. As forms become too complex and incompatible to each other this is no longer works well. So we want to reset most of the data when the user changes Project Template during form filling.
Technology Stack
-
React
Code access
The work for this challenge has to be done in one repository:
- Connect App repo https://github.com/appirio-tech/connect-app branch `dev`, commit `39cdecfba645b69ca1643857acc88af60264fd7b` or later.
- A user for testing is provided on the forum.
Individual requirements
If the user started filling the form, and after clicked arrow “Back” and choose another Project Template like this (not only these but any other), then we have to reset form data and form “wizard” step and keep only:
- `project.name`
- `project.description`
- `project.details.utm.code`
All other existent functionality should stay as it is.
Updated: See demo video with an explanation of the task.
Notes
The logic of this form is quite complex. So below I would share some details to help you.
When the user starts filling the form and leaves it we save form data to the Local Storage (so we save on page leave). The state of “wizard” is saved to the Local Storage after every wizard step change (so we save it on wizard step change).
- If the user left unfinished form and after they navigates again to the same Project Template deep link, they would see exactly the same place where they left the form (data and wizard step).
- If the user left unfinished form and after they navigates to another Project Template deep link like this or to the page for selecting Project Template like this the user would be asked if they want to create a new project from scratch or continue where they left it. If the user clicks create from scratch, all the data and wizard step would be completely reset. If they choose to continue where they left, the user would be redirected to the previous Project Template deep link and see the form as they left it.
Both the above features should stay as they are after the changes.
When you implement the individual requirements above make sure to test, that when we change Project Template after clicking “Back” button, we also update the saved form data and wizard state in the Local Storage. So if we change Project Template and after leave the form and come back again it would work like described above. Update you may ignore this crossed text as it looks like bringing confusion to the task.
General requirements
-
Follow React and Redux best practices.
-
Lint should pass.
-
Existent unit tests should pass.
-
Git patch should not have errors or warnings.
If you have any questions or concerns, don’t hesitate to ask on the forum.
Final Submission Guidelines
Submit a zip file which would include:
-
Git patch with changes you’ve made to the code in our repository.
Additionally, the winner would be required to raise a pull request to the repository after the challenge is completed.