sol by Bohdan259 · Pull Request #1140 · mate-academy/react_autocomplete

Bohdan259 · 2026-03-22T10:26:19Z

mateacademy-ai-mentor

Review Summary

Hello! You've built a solid foundation for the autocomplete component, and the core functionality is working well. However, I'm requesting a few changes to fully meet the project requirements.

Here are the main points to address:

The debounce delay is currently hardcoded at 3000ms. This needs to be a customizable prop on your component with a default value of 300ms.
The filtering logic incorrectly runs when the input contains only spaces. Please add a check to prevent this, as required by [CHECKLIST ITEM #1].
The state variable onselected in App.tsx should be renamed to something more descriptive like selectedPerson to follow the naming conventions outlined in [CHECKLIST ITEM #4].

Please address these points to complete the task. 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.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/Components/PeopleMenu.tsx

+  isOpen,
+  setIsOpen,
+  setQuery,
+  setFocused,


The dropdown is set to be open by default. It should initially be closed and open only upon user interaction with the input field.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/Components/PeopleMenu.tsx

+}) => {
+  const handleInput = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);


The debounce delay is hardcoded to 3000ms. The task requires a default delay of 300ms, and it should be customizable via a prop passed to the PeopleMenu component.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/App.tsx

+  const [isOpen, setIsOpen] = useState(true);
+  const [isFocused, setIsFocused] = useState(false);
+  const [query, setQuery] = useState('');
+  const [onselected, setOnselected] = useState<Person | null>(null);


This violates checklist item #4 regarding naming conventions. The state variable onselected should be named based on what it holds, for example selectedPerson. The on prefix is conventionally used for event handler props or functions.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/App.tsx

-              <div className="dropdown-item" data-cy="suggestion-item">
-                <p className="has-text-danger">Elisabeth Haverbeke</p>
-              </div>
+  const applyQuery = useCallback(debounce(setAppliedQuery, 3000), []);


The debounce delay is hardcoded to 3000ms. The requirement is for a default of 300ms, and it should be customizable via a prop on your Autocomplete component. This implementation doesn't allow for customization and uses an incorrect delay.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/App.tsx

-                <p className="has-text-link">Pieter de Decker</p>
-              </div>
+  const filterPeople = useMemo(() => {
+    return peopleFromServer.filter(person =>


This violates checklist item #1: 'make sure that filter won't be called if user enred spaces only'. The .filter() method is called even if appliedQuery contains only spaces. You should add a condition to handle this case before attempting to filter the list.

mateacademy-ai-mentor · 2026-03-22T10:28:42Z

src/note.tsx

+import React from 'react';
+import './App.scss';
+import { peopleFromServer } from './data/people';
+
+export const App: React.FC = () => {
+  const { name, born, died } = peopleFromServer[0];
+
+  return (
+    <div className="container">
+      <main className="section is-flex is-flex-direction-column">
+        <h1 className="title" data-cy="title">
+          {`${name} (${born} - ${died})`}
+        </h1>
+
+        <div className="dropdown is-active">
+          <div className="dropdown-trigger">
+            <input
+              type="text"
+              placeholder="Enter a part of the name"
+              className="input"
+              data-cy="search-input"
+            />
+          </div>
+
+          <div className="dropdown-menu" role="menu" data-cy="suggestions-list">
+            <div className="dropdown-content">
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-link">Pieter Haverbeke</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-link">Pieter Bernard Haverbeke</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-link">Pieter Antone Haverbeke</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-danger">Elisabeth Haverbeke</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-link">Pieter de Decker</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-danger">Petronella de Decker</p>
+              </div>
+
+              <div className="dropdown-item" data-cy="suggestion-item">
+                <p className="has-text-danger">Elisabeth Hercke</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="
+            notification
+            is-danger
+            is-light
+            mt-3
+            is-align-self-flex-start
+          "
+          role="alert"
+          data-cy="no-suggestions-message"
+        >
+          <p className="has-text-danger">No matching suggestions</p>
+        </div>
+      </main>
+    </div>
+  );
+};


This file appears to be for notes or a static example and is not part of the final application logic. As such, it has not been reviewed for correctness against the task requirements. Please ensure you remove any unused files before final submission.

mateacademy-ai-mentor

Review Summary

Great job addressing the previous feedback! The component is very close to being complete, but a few adjustments are needed to fully meet the requirements. Here are the key issues to address:

Default Prop Value: The task requires the delay prop to have a default value of 300ms. Please make the prop optional in the type definition (delay?: number) and set its default value inside the component, for example, during destructuring: ({ delay = 300, ... }).
Prop Naming Convention: The setSelected prop should be renamed to onSelected. This is a standard React convention for event handler props and is required by the task's checklist [CHECKLIST ITEM #4].
State Update on Selection: When a user selects a person, the query state is updated, but appliedQuery is not. This causes a bug where refocusing the input shows suggestions for the old query. Please ensure appliedQuery is also updated when an item is selected.

You're almost there! Addressing these points will make your component more robust and fully compliant.

✨ 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.

mateacademy-ai-mentor · 2026-03-22T11:24:47Z

src/App.tsx

+import { Person } from './types/Person';

 export const App: React.FC = () => {
-  const { name, born, died } = peopleFromServer[0];
+  const [selectedPerson, setSelectedPerson] = useState<Person | null>(null);



Good job defining the component's props. To fully align with the task requirements, a couple of adjustments are needed:

The task requires the delay prop to have a default value of 300ms. Currently, it's a required prop. You can make it optional (delay?: number) and set its default value during destructuring in the component, like ({ delay = 300, ...rest }).

The task description specifies that the callback should be named onSelected. Please rename the setSelected prop to onSelected to match the requirements and follow common React naming conventions for event handlers.

mateacademy-ai-mentor · 2026-03-22T11:24:47Z

src/Components/PeopleMenu.tsx

+  delay: number;
+  people: Person[];
+  setSelected: (person: Person | null) => void;
+};
+
+function debounce<T extends unknown[]>(
+  callback: (...args: T) => void,
+  delay: number,
+) {
+  let timerId = 0;
+
+  return (...args: T) => {
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+}
+
+const PeopleMenuComponent: React.FC<Props> = ({
+  people,
+  setSelected,
+  delay,


The delay prop is required, but the task specifies it should have a default value of 300ms. It's best practice to set this default inside the PeopleMenuComponent itself, which also makes the prop optional and the component more reusable.

You can achieve this by setting a default value during prop destructuring and updating the type definition:

type Props = { delay?: number; // Make prop optional // ... }; const PeopleMenuComponent: React.FC<Props> = ({ delay = 300, // Set default value // ... }) => { /* ... */ }

mateacademy-ai-mentor · 2026-03-22T11:24:47Z

src/Components/PeopleMenu.tsx

+  const handleClickInput = useCallback(
+    (person: Person) => {
+      setSelected(person);
+      setQuery(person.name);
+      setIsOpen(false);
+    },
+    [setSelected, setQuery, setIsOpen],


When a user selects a person, the query state is updated, but appliedQuery is not. This can lead to a confusing user experience. If the user selects an item, clicks away, and then clicks back into the input, the suggestions will be based on the old appliedQuery (what they were typing before selecting), not the value currently in the input.

To fix this, you should also update appliedQuery when an item is selected.

mateacademy-ai-mentor

Review Summary

I am approving your solution as an educational override so you can move forward, but there's a crucial concept with React hooks we need to address. You've done an excellent job implementing the core features and addressing the previous feedback!

The main issue is with missing dependencies in your hooks in src/Components/PeopleMenu.tsx. For instance:

The useCallback for your debounced function doesn't include the delay prop in its dependency array. This means if delay changes, the function will keep using the old value.
Similarly, the useMemo for filterPeople is missing people, so it won't recalculate when the list of people changes.

Remember, any prop or state value used inside a useCallback or useMemo must be added to its dependency array. Fixing this will make your component fully reactive and robust. Keep up the fantastic work!

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

Rate AI review example ↩

mateacademy-ai-mentor · 2026-03-22T11:42:16Z

src/Components/PeopleMenu.tsx

+  const [query, setQuery] = useState('');
+  const [appliedQuery, setAppliedQuery] = useState('');
+
+  const applyQuery = useCallback(debounce(setAppliedQuery, delay), []);


The useCallback hook here has an empty dependency array, which means the applyQuery function is created only once when the component mounts. If the delay prop changes, this debounced function will continue to use the initial delay value. To fix this, you should include delay in the dependency array.

mateacademy-ai-mentor · 2026-03-22T11:42:16Z

src/Components/PeopleMenu.tsx

+        .toLocaleLowerCase()
+        .includes(appliedQuery.toLocaleLowerCase()),
+    );
+  }, [appliedQuery]);


The filterPeople function depends on the people prop, but it's missing from the useMemo dependency array. If the people array changes, this memoized value will not be recalculated, and the component will continue to show suggestions from the old list. Please add people to the dependency array to ensure the filter re-runs when the list of people changes.

mateacademy-ai-mentor · 2026-03-22T11:42:16Z

src/Components/PeopleMenu.tsx

+      setAppliedQuery(person.name)
+      setIsOpen(false);
+    },
+    [onSelected, setQuery, setIsOpen],


The handleClickInput callback uses setAppliedQuery, but it's not included in the dependency array. While state setter functions from useState are stable and this might not cause a bug in this specific case, it's a good practice and a rule of hooks to include all dependencies. Please add setAppliedQuery to the array.

sol

b73a161

mateacademy-ai-mentor suggested changes Mar 22, 2026

View reviewed changes

sol comments

215905d

Bohdan259 requested a review from mateacademy-ai-mentor March 22, 2026 11:22

mateacademy-ai-mentor suggested changes Mar 22, 2026

View reviewed changes

solution

2f85e47

Bohdan259 requested a review from mateacademy-ai-mentor March 22, 2026 11:40

solution comments

94be92a

mateacademy-ai-mentor approved these changes Mar 22, 2026

View reviewed changes

solution all comments

acf3294

Bohdan259 requested a review from mateacademy-ai-mentor March 22, 2026 11:49

Conversation

Bohdan259 commented Mar 22, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants