diff --git a/src/components/LargeSearchBar.tsx b/src/components/LargeSearchBar.tsx index 63de019..9b45402 100644 --- a/src/components/LargeSearchBar.tsx +++ b/src/components/LargeSearchBar.tsx @@ -6,16 +6,11 @@ interface LargeSearchBarProps { searchedText: string | null; } -const LargeSearchBar: React.FC = (props) => { +const LargeSearchBar: React.FC = ({ searchedText }) => { return ( - - - - Bohužel jsme nenalezli přesný význam slova "{props.searchedText}" - - + ); diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 08ad190..1b98c6f 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,9 +1,4 @@ -import React, { - ChangeEvent, - useEffect, - useMemo, - useState, -} from "react"; +import React, { ChangeEvent, useEffect, useMemo, useState } from "react"; import TextField from "@material-ui/core/TextField"; import Autocomplete from "@material-ui/lab/Autocomplete"; import { makeStyles } from "@material-ui/core/styles"; @@ -16,7 +11,7 @@ import { generateTermRoute } from "../utils/Utils"; const OPTIONS_LIMIT = 7; -const filterOptions = (options: SearchResult[], state: any) => { +const filterOptions = (options: SearchResult[]) => { return options.slice(0, OPTIONS_LIMIT) as SearchResult[]; }; @@ -59,6 +54,7 @@ const useOtherStyles = makeStyles(() => ({ interface SearchBarProps { size: "small" | "large"; + initialValue?: string; } const SearchBar: React.FC = (props) => { @@ -95,7 +91,6 @@ const SearchBar: React.FC = (props) => { } }; - const handleChange = useMemo( () => (event: ChangeEvent<{}>, newInputValue: string) => { setInputValue(newInputValue); @@ -140,6 +135,7 @@ const SearchBar: React.FC = (props) => { onChangeHandler(newValue); } }} + defaultValue={props.initialValue} filterOptions={filterOptions} noOptionsText="Nebyly nalezeny žádné výsledky" fullWidth @@ -152,6 +148,7 @@ const SearchBar: React.FC = (props) => {
)} onInputChange={debouncedChangeHandler} + ListboxProps={{ style: { maxHeight: "500px" } }} renderInput={(params) => ( { const classes = useStyles(); //Only for development purposes, need to discuss how to fetch this personalized data - const words = ["Budova", "Bytový dům", "Stavba", "Koridor"]; + const words = ["Agenda", "Budova", "Vozidlo", "Závada"]; return (