From a587ca728b6e4e3b3fb493f1de6119c176442e91 Mon Sep 17 00:00:00 2001 From: Dmytro Khromiak Date: Tue, 5 May 2026 09:29:22 +0300 Subject: [PATCH] implement solution --- README.md | 2 +- src/App.tsx | 71 +++++----------------------- src/components/Autocomplete.tsx | 82 +++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 60 deletions(-) create mode 100644 src/components/Autocomplete.tsx diff --git a/README.md b/README.md index b8897503d..c9fde3801 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ that will suggest people matching an entered text. - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_autocomplete/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://whomngmnt.github.io/react_autocomplete/) and add it to the PR description. - Don't remove the `data-qa` attributes. It is required for tests. ## Troubleshooting diff --git a/src/App.tsx b/src/App.tsx index a88cd7a6d..8c3c69e96 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,73 +1,26 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.scss'; import { peopleFromServer } from './data/people'; +import { Person } from './types/Person'; +import { Autocomplete } from './components/Autocomplete'; export const App: React.FC = () => { - const { name, born, died } = peopleFromServer[0]; + const [selectedPerson, setSelectedPerson] = useState(null); return (

- {`${name} (${born} - ${died})`} + {selectedPerson + ? `${selectedPerson.name} (${selectedPerson.born} - ${selectedPerson.died})` + : 'No selected person'}

-
-
- -
- -
-
-
-

Pieter Haverbeke

-
- -
-

Pieter Bernard Haverbeke

-
- -
-

Pieter Antone Haverbeke

-
- -
-

Elisabeth Haverbeke

-
- -
-

Pieter de Decker

-
- -
-

Petronella de Decker

-
- -
-

Elisabeth Hercke

-
-
-
-
- -
-

No matching suggestions

-
+
); diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx new file mode 100644 index 000000000..0b20de87d --- /dev/null +++ b/src/components/Autocomplete.tsx @@ -0,0 +1,82 @@ +import React, { useState, useMemo, useRef } from 'react'; +import { Person } from '../types/Person'; + +interface Props { + people: Person[]; + onSelected: (person: Person | null) => void; + delay?: number; +} + +export const Autocomplete: React.FC = ({ + people, + onSelected, + delay = 300, +}) => { + const [initialValue, setInitialValue] = useState(''); + const [query, setQuery] = useState(''); + const [boll, setBoll] = useState(false); + const timerId = useRef(0); + + const handleInputChange = (e: React.ChangeEvent) => { + const newValue = e.target.value; + + setInitialValue(newValue); + onSelected(null); + setBoll(true); + + window.clearTimeout(timerId.current); + timerId.current = window.setTimeout(() => { + setQuery(newValue); + }, delay); + }; + + const filteredPeople = useMemo(() => { + return people.filter(person => + person.name.toLowerCase().includes(query.toLowerCase()), + ); + }, [query, people]); + + return ( +
+
+ setBoll(true)} + placeholder="Enter a part of the name" + /> +
+ + + + {filteredPeople.length === 0 && query && ( +
+

No matching suggestions

+
+ )} +
+ ); +};