[#69 #70] Search persistence + search feedback

datagov-cz · Nov 4, 2021 · 42cd11d · 42cd11d
1 parent d832a81
commit 42cd11d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 16 deletions.
diff --git a/src/components/LargeSearchBar.tsx b/src/components/LargeSearchBar.tsx
@@ -6,16 +6,11 @@ interface LargeSearchBarProps {
   searchedText: string | null;
 }
 
-const LargeSearchBar: React.FC<LargeSearchBarProps> = (props) => {
+const LargeSearchBar: React.FC<LargeSearchBarProps> = ({ searchedText }) => {
   return (
     <Box bgcolor="primary.main" py={2}>
       <Container>
-        <SearchBar size="large" />
-        <Box pl={6} pt={2}>
-          <Typography variant="h5" color="textSecondary">
-            Bohužel jsme nenalezli přesný význam slova "{props.searchedText}"
-          </Typography>
-        </Box>
+        <SearchBar size="large" initialValue={searchedText ?? ""} />
       </Container>
     </Box>
   );

diff --git 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<SearchBarProps> = (props) => {
@@ -95,7 +91,6 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
     }
   };
 
-
   const handleChange = useMemo(
     () => (event: ChangeEvent<{}>, newInputValue: string) => {
       setInputValue(newInputValue);
@@ -140,6 +135,7 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
           onChangeHandler(newValue);
         }
       }}
+      defaultValue={props.initialValue}
       filterOptions={filterOptions}
       noOptionsText="Nebyly nalezeny žádné výsledky"
       fullWidth
@@ -152,6 +148,7 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
         <div dangerouslySetInnerHTML={{ __html: option.displayText }}></div>
       )}
       onInputChange={debouncedChangeHandler}
+      ListboxProps={{ style: { maxHeight: "500px" } }}
       renderInput={(params) => (
         <TextField
           {...params}

diff --git a/src/components/SuggestedWords.tsx b/src/components/SuggestedWords.tsx
@@ -24,7 +24,7 @@ const SuggestedWords: React.FC = () => {
   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 (
     <Container>