Ignore:
Timestamp:
08/06/22 18:16:44 (2 years ago)
Author:
unknown <mlviktor23@…>
Branches:
main
Children:
800779d
Parents:
d654c74
Message:

added SearchResults page, hide search dropdown when out of focus

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/Search.js

    rd654c74 r3e98cea  
    33import { transliterate } from "../Util/transliterate";
    44import {
    5   SearchDropdownResultSmall,
    6   SearchDropdownTextSmall,
    7   SearchDropdownSmall,
    8   SearchDropdownResultLinkSmall,
    9   SearchSmall,
    10 } from "./Search.style";
     5  SearchResult,
     6  SearchResultText,
     7  SearchDropdown,
     8  SearchResultLink,
     9  SearchBox,
     10} from "./Styled/Search.style";
     11import { useNavigate } from "react-router";
    1112function Search() {
    1213  const [query, setQuery] = useState("");
    … …  
    2728        //setLoaded(true);
    2829      } catch (error) {
    29         console.log("Error", error);
     30        console.log("Fetching error occured", error);
    3031      }
    3132    };
    … …  
    3334    if (query.length > 2) fetchData();
    3435  }, [query]);
     36
     37  const navigate = useNavigate();
     38
     39  const handleKeyDown = (event) => {
     40    if (event.key === "Enter") {
     41      setExpanded(false);
     42      navigate("/search", { state: professors });
     43    }
     44  };
     45
     46  const [expanded, setExpanded] = useState(false);
     47
     48  function expand() {
     49    setExpanded(true);
     50  }
     51
     52  function close() {
     53    setExpanded(false);
     54  }
    3555
    3656  return (
    … …  
    4262      }}
    4363    >
    44       <SearchSmall
     64      <SearchBox
    4565        placeholder="Пребарувај..."
    4666        onChange={(e) => setQuery(e.target.value)}
     67        onKeyDown={handleKeyDown}
     68        tabIndex={0}
     69        onFocus={expand}
     70        onBlur={close}
    4771      />
    48       <SearchDropdownSmall
    49         display={query.length > 2 && professors.length > 0 ? "block" : "none"}
     72      <SearchDropdown
     73        display={
     74          query.length > 2 && professors.length > 0 && expanded
     75            ? "block"
     76            : "none"
     77        }
    5078      >
    5179        {query.length > 2 &&
    5280          professors.slice(0, 7).map((professor) => (
    53             <SearchDropdownResultSmall key={professor.professorId}>
    54               <SearchDropdownResultLinkSmall
    55                 href={"/professor/" + professor.professorId}
    56               >
    57                 <SearchDropdownTextSmall weight="bold" size="medium">
     81            <SearchResult
     82              key={professor.professorId}
     83              onMouseDown={(event) => {
     84                event.preventDefault();
     85                event.stopPropagation();
     86              }}
     87              margin="0"
     88            >
     89              <SearchResultLink href={"/professor/" + professor.professorId}>
     90                <SearchResultText weight="bold" size="medium">
    5891                  {professor.professorName}
    59                 </SearchDropdownTextSmall>
    60                 <SearchDropdownTextSmall weight="normal" size="smaller">
     92                </SearchResultText>
     93                <SearchResultText weight="normal" size="er">
    6194                  {professor.faculty.facultyName}
    62                 </SearchDropdownTextSmall>
    63               </SearchDropdownResultLinkSmall>
    64             </SearchDropdownResultSmall>
     95                </SearchResultText>
     96              </SearchResultLink>
     97            </SearchResult>
    6598          ))}
    66       </SearchDropdownSmall>
     99      </SearchDropdown>
    67100    </div>
    68101  );
Note: See TracChangeset for help on using the changeset viewer.