Resolve "[MIN-56] Autocomplete input"

Closes #24 (closed)

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx

+import { autocompleteSelector } from '@/redux/autocomplete/autocomplete.selectors';
 import {
   currentSelectedSearchElement,
   searchDrawerOpenSelector,
@@ -16,7 +17,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useCallback, KeyboardEvent, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ONE, ZERO } from '@/constants/common';
+import { FIVE, ONE, ZERO } from '@/constants/common';
 import Autosuggest from 'react-autosuggest';
 import { clearEntityNumberData } from '@/redux/entityNumber/entityNumber.slice';
 import { getDefaultSearchTab, getSearchValuesArrayAndTrimToSeven } from './SearchBar.utils';
@@ -35,6 +36,7 @@ export const SearchBar = (): JSX.Element => {
   const isSearchDrawerOpen = useSelector(searchDrawerOpenSelector);
   const isPerfectMatch = useSelector(perfectMatchSelector);
   const searchValueState = useSelector(searchValueSelector);
+  const searchAutocompleteState = useSelector(autocompleteSelector);
   const dispatch = useAppDispatch();
   const router = useRouter();
   const currentTab = useSelector(currentSelectedSearchElement);
@@ -85,15 +87,21 @@ export const SearchBar = (): JSX.Element => {
     openSearchDrawerIfClosed(currentTab);
   };
 
-  const suggestions = [{ name: 'alpha' }, { name: 'amigo' }, { name: 'beta' }, { name: 'omega' }];
+  // eslint-disable-next-line no-console
+  console.log(searchAutocompleteState.searchValues);
+  const suggestions = searchAutocompleteState.searchValues.map(entry => {
+    return { name: entry };
+  });
 
-  const getSuggestions = function (value: string): Suggestion[] {
+  const getSuggestions = (value: string): Suggestion[] => {
     const inputValue = value.trim().toLowerCase();
     const inputLength = inputValue.length;
-
-    return inputLength === ZERO
-      ? []
-      : suggestions.filter(lang => lang.name.toLowerCase().slice(ZERO, inputLength) === inputValue);
+    if (inputLength === ZERO) {
+      return [];
+    }
+    return suggestions
+      .filter(lang => lang.name.toLowerCase().slice(ZERO, inputLength) === inputValue)
+      .slice(ZERO, FIVE);
   };
 
   const renderSuggestion = (suggestion: Suggestion): JSX.Element => {