Implement autocomplete component

src/App.tsx

@@ -1,73 +1,28 @@
-import React from 'react';
-import './App.scss';
+import { useState } from 'react';
+import { Autocomplete } from './components/Autocomplete';
+import { Nullable } from './types/Nullable';
+import { Person } from './types/Person';
 import { peopleFromServer } from './data/people';
+import './App.scss';
+
+export const App = () => {
+  const [selectedPerson, setSelectedPerson] = useState<Nullable<Person>>(null);
 
-export const App: React.FC = () => {
-  const { name, born, died } = peopleFromServer[0];
+  const title = selectedPerson
+    ? `${selectedPerson.name} (${selectedPerson.born} - ${selectedPerson.died})`
+    : 'No selected person';
 
   return (
     <div className="container">
       <main className="section is-flex is-flex-direction-column">
         <h1 className="title" data-cy="title">
-          {`${name} (${born} - ${died})`}
+          {title}
         </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>
+        <Autocomplete
+          people={peopleFromServer}
+          onSelected={setSelectedPerson}
+        />
       </main>
     </div>
   );

src/components/Alert/Alert.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  message: string;
+}
+
+export const Alert = ({ message }: Props) => (
+  <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">{message}</p>
+  </div>
+);

src/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import { AutocompleteInput } from '../AutocompleteInput';
+import { AutocompleteList } from '../AutocompleteList';
+import { Alert } from '../Alert';
+import { Nullable } from '../../types/Nullable';
+import { Person } from '../../types/Person';
+
+const filterPeople = (people: Person[], query: string) => {
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (normalizedQuery !== '') {
+    return people.filter(person =>
+      person.name.toLowerCase().includes(normalizedQuery),
+    );
+  }
+
+  return people;
+};
+
+interface Props {
+  people: Person[];
+  onSelected: (person: Nullable<Person>) => void;
+  delay?: number;
+}
+
+export const Autocomplete = ({ people, onSelected, delay = 300 }: Props) => {
+  const [query, setQuery] = useState('');
+  const [appliedQuery, setAppliedQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const applyQuery = useRef(
+    debounce((value: string) => setAppliedQuery(value), delay),
+  ).current;
+
+  useEffect(() => () => applyQuery.cancel(), [applyQuery]);
+
+  const handleQueryChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value.trimStart().replace(/\s+/g, ' ');
+
+      setQuery(value);
+      applyQuery.cancel();
+      applyQuery(value);
+      onSelected(null);
+    },
+    [applyQuery, onSelected],
+  );
+
+  const handlePersonSelect = useCallback(
+    (person: Person) => {
+      setQuery(person.name);
+      setAppliedQuery(person.name);
+      setIsOpen(false);
+      onSelected(person);
+    },
+    [onSelected],
+  );
+
+  const handleFocus = useCallback(() => setIsOpen(true), []);
+  const handleBlur = useCallback(() => setIsOpen(false), []);
+
+  const filteredPeople = useMemo(
+    () => filterPeople(people, appliedQuery),
+    [people, appliedQuery],
+  );
+
+  return (
+    <div className={classNames('dropdown', { 'is-active': isOpen })}>
+      <AutocompleteInput
+        query={query}
+        onQueryChange={handleQueryChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+      {isOpen &&
+        (filteredPeople.length > 0 ? (
+          <AutocompleteList
+            people={filteredPeople}
+            onSelected={handlePersonSelect}
+          />
+        ) : (
+          <Alert message="No matching suggestions" />
+        ))}
+    </div>
+  );
+};

src/components/Autocomplete/index.ts

@@ -0,0 +1 @@
+export * from './Autocomplete';

src/components/AutocompleteInput/AutocompleteInput.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+
+interface Props {
+  query: string;
+  onQueryChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+export const AutocompleteInput = memo(
+  ({ query, onQueryChange, onFocus, onBlur }: Props) => (
+    <div className="dropdown-trigger">
+      <input
+        type="text"
+        placeholder="Enter a part of the name"
+        className="input"
+        data-cy="search-input"
+        value={query}
+        onChange={onQueryChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    </div>
+  ),
+);
+
+AutocompleteInput.displayName = 'AutocompleteInput';

src/components/AutocompleteInput/index.ts

@@ -0,0 +1 @@
+export * from './AutocompleteInput';

src/components/AutocompleteList/AutocompleteList.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { AutocompleteListItem } from '../AutocompleteListItem';
+import { Person } from '../../types/Person';
+
+interface Props {
+  people: Person[];
+  onSelected: (person: Person) => void;
+}
+
+export const AutocompleteList = memo(({ people, onSelected }: Props) => {
+  return (
+    <div className="dropdown-menu" role="menu" data-cy="suggestions-list">
+      <div
+        className="dropdown-content"
+        style={{ maxHeight: '240px', overflowY: 'auto' }}
+      >
+        {people.map(person => (
+          <AutocompleteListItem
+            key={person.slug}
+            person={person}
+            onSelected={onSelected}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+AutocompleteList.displayName = 'AutocompleteList';

src/components/AutocompleteList/index.ts

@@ -0,0 +1 @@
+export * from './AutocompleteList';

src/components/AutocompleteListItem/AutocompleteListItem.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import classNames from 'classnames';
+import { Person } from '../../types/Person';
+
+interface Props {
+  person: Person;
+  onSelected: (person: Person) => void;
+}
+
+export const AutocompleteListItem = memo(({ person, onSelected }: Props) => {
+  const { name, sex } = person;
+
+  return (
+    <div
+      className="dropdown-item is-clickable"
+      data-cy="suggestion-item"
+      onMouseDown={() => onSelected(person)}
+    >
+      <p
+        className={classNames({
+          'has-text-link': sex === 'm',
+          'has-text-danger': sex === 'f',
+        })}
+      >
+        {name}
+      </p>
+    </div>
+  );
+});
+
+AutocompleteListItem.displayName = 'AutocompleteListItem';

src/components/AutocompleteListItem/index.ts

@@ -0,0 +1 @@
+export * from './AutocompleteListItem';

src/types/Nullable.ts

@@ -0,0 +1 @@
+export type Nullable<T> = T | null;

src/types/Person.ts

@@ -1,9 +1,11 @@
+import { Nullable } from './Nullable';
+
 export interface Person {
   name: string;
   sex: 'm' | 'f';
   born: number;
   died: number;
-  fatherName: string | null;
-  motherName: string | null;
+  fatherName: Nullable<string>;
+  motherName: Nullable<string>;
   slug: string;
 }