Answer the question
In order to leave comments, you need to log in
To what extent does the solution correspond to the TK (React)? Are there any gross errors?
Dear React experts, I will be very grateful if someone looks at how the test task was completed. The deadlines are quite tight and I have been working on vue js + vuex all the time.
As practice has shown, it is very different from react + redux.
I understand that a lot of things need to be finalized there, it is important to point out blunders.
Task text:
Implement a quick search interface in React. Consists of two parts.
1. Top panel: search string with input. In the process of entering the letters of the query, the suggestions under the input and the results appear and are specified.
2. Results: list of 10 results + pagination. You don't need to add parameters to the URL.
( I realized that pagination is on the client )
Fast search means that the results are updated as you enter a query in the search box. To store the minimum state of the application (current pagination page, current request), you need to use redux. No backend is needed (all data mocks can be stored directly in a json file, read directly from there), design is not required.
It is important to demonstrate the ability to decompose the interface into components, to give them understandable names.
I got the following code:
https://codesandbox.io/s/github/vito2005/mrtest
https://ctm1w.csb.app/
- I take data from json through promises and set timeout
- json - array of cities with addresses and coordinates
- I do a search in json at the beginning of the city name
- the simplest components: 1. autocomplete component for suggestions; 2. component content for results; 3. pagination inside the content
- two asynchronous actions in redux to request suggestions and results
Answer the question
In order to leave comments, you need to log in
According to the code, everything seems OK (no strong claims arise immediately), only in my opinion you forgot to fasten the pagination (it is not called anywhere).
UPD: there are still small claims, class Results:
renderNoResultsMessage() {
const { results, noResultsMessage } = this.props;
if (results && !results.length && noResultsMessage) {
return (<div className="no-result">
<h3>
{noResultsMessage}
</h3>
</div>);
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question