add solution

[0-nira-0]

DEMO LINK

[mateacademy-ai-mentor]

Review Summary

Great job implementing the core autocomplete functionality, especially the debouncing and filtering logic! However, changes are needed because the solution doesn't meet the primary architectural requirement of creating a reusable Autocomplete component.

Currently, all the logic is inside App.tsx. This is a blocker because it prevents key features from being implemented as required:

• The debounce delay is hardcoded instead of being a customizable prop.
• There is no onSelected callback prop to pass the selected person back to the parent.

Please refactor the logic into a new Autocomplete.tsx component that accepts these props. Also, a minor point: the Bulma is-active class on the dropdown should be applied conditionally based on state, rather than being hardcoded.

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Review Summary

Excellent work on refactoring the logic into a reusable Autocomplete component! The structure is solid and you've addressed most of the requirements. However, a couple of changes are needed to make the component more robust and fully meet the requirements.

First, the timeout prop is missing its required default value of 300ms. You can easily add this by making the prop optional and setting the default during destructuring:

({ timeout = 300, onSelected, selectedPerson })

Additionally, the current onBlur handler can cause a race condition, closing the suggestion list before a user's click on an item can be registered. To fix this, you can delay hiding the list slightly:

onBlur={() => setTimeout(() => setShowList(false), 200)}

Once you've addressed these points, this will be ready for approval. Keep up the great work!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

Review Summary

Excellent work on this iteration! You've done a great job addressing the previous feedback, and the component is now very robust. I am approving this solution as an educational override to help you move forward.

There is one small thing to be aware of for the future. In src/components/Autocomplete.tsx, the useMemo hook for your debounced function has an empty dependency array ([]). This means the function is created only once with the initial timeout value and won't update if the timeout prop changes. To fix this, you can add timeout to the dependency array.

This is a subtle but important concept in React. Overall, fantastic job on this task!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

The dependency array for useMemo is empty, which means the debounce function is only created once with the initial timeout value. If the timeout prop changes during the component's lifecycle, this debounced function will not be updated with the new delay.

You should include timeout in the dependency array to ensure the component correctly reacts to prop changes.