[080a3f3] | 1 | import React, { useEffect, useState } from "react";
|
---|
| 2 | import JSOG from "jsog";
|
---|
| 3 | import { transliterate } from "../Util/transliterate";
|
---|
| 4 | import {
|
---|
[3e98cea] | 5 | SearchResult,
|
---|
| 6 | SearchResultText,
|
---|
| 7 | SearchDropdown,
|
---|
| 8 | SearchResultLink,
|
---|
| 9 | SearchBox,
|
---|
| 10 | } from "./Styled/Search.style";
|
---|
| 11 | import { useNavigate } from "react-router";
|
---|
[080a3f3] | 12 | function Search() {
|
---|
| 13 | const [query, setQuery] = useState("");
|
---|
| 14 | const [professors, setProfessors] = useState([]);
|
---|
| 15 |
|
---|
| 16 | useEffect(() => {
|
---|
[62b653f] | 17 | const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
|
---|
[080a3f3] | 18 | query
|
---|
| 19 | )}`;
|
---|
| 20 |
|
---|
| 21 | const fetchData = async () => {
|
---|
| 22 | try {
|
---|
| 23 | const response = await fetch(url);
|
---|
| 24 | var cyclicGraph = await response.json();
|
---|
[702ca77] | 25 | var jsogStructure = JSOG.encode(cyclicGraph);
|
---|
[080a3f3] | 26 | cyclicGraph = JSOG.decode(jsogStructure);
|
---|
| 27 | setProfessors(cyclicGraph);
|
---|
| 28 | } catch (error) {
|
---|
[702ca77] | 29 | console.log("Fetching error", error);
|
---|
[080a3f3] | 30 | }
|
---|
| 31 | };
|
---|
| 32 |
|
---|
| 33 | if (query.length > 2) fetchData();
|
---|
| 34 | }, [query]);
|
---|
| 35 |
|
---|
[3e98cea] | 36 | const navigate = useNavigate();
|
---|
| 37 |
|
---|
| 38 | const handleKeyDown = (event) => {
|
---|
| 39 | if (event.key === "Enter") {
|
---|
| 40 | setExpanded(false);
|
---|
| 41 | navigate("/search", { state: professors });
|
---|
| 42 | }
|
---|
| 43 | };
|
---|
| 44 |
|
---|
| 45 | const [expanded, setExpanded] = useState(false);
|
---|
| 46 |
|
---|
| 47 | function expand() {
|
---|
| 48 | setExpanded(true);
|
---|
| 49 | }
|
---|
| 50 |
|
---|
| 51 | function close() {
|
---|
| 52 | setExpanded(false);
|
---|
| 53 | }
|
---|
| 54 |
|
---|
[080a3f3] | 55 | return (
|
---|
[0df6b9e] | 56 | <div
|
---|
| 57 | style={{
|
---|
| 58 | position: "relative",
|
---|
| 59 | width: "fit-content",
|
---|
| 60 | float: "right",
|
---|
| 61 | }}
|
---|
| 62 | >
|
---|
[3e98cea] | 63 | <SearchBox
|
---|
[080a3f3] | 64 | placeholder="Пребарувај..."
|
---|
| 65 | onChange={(e) => setQuery(e.target.value)}
|
---|
[3e98cea] | 66 | onKeyDown={handleKeyDown}
|
---|
| 67 | tabIndex={0}
|
---|
| 68 | onFocus={expand}
|
---|
| 69 | onBlur={close}
|
---|
[080a3f3] | 70 | />
|
---|
[3e98cea] | 71 | <SearchDropdown
|
---|
| 72 | display={
|
---|
| 73 | query.length > 2 && professors.length > 0 && expanded
|
---|
| 74 | ? "block"
|
---|
| 75 | : "none"
|
---|
| 76 | }
|
---|
[0df6b9e] | 77 | >
|
---|
| 78 | {query.length > 2 &&
|
---|
| 79 | professors.slice(0, 7).map((professor) => (
|
---|
[3e98cea] | 80 | <SearchResult
|
---|
| 81 | key={professor.professorId}
|
---|
| 82 | onMouseDown={(event) => {
|
---|
| 83 | event.preventDefault();
|
---|
| 84 | event.stopPropagation();
|
---|
| 85 | }}
|
---|
| 86 | margin="0"
|
---|
| 87 | >
|
---|
| 88 | <SearchResultLink href={"/professor/" + professor.professorId}>
|
---|
| 89 | <SearchResultText weight="bold" size="medium">
|
---|
[0df6b9e] | 90 | {professor.professorName}
|
---|
[3e98cea] | 91 | </SearchResultText>
|
---|
| 92 | <SearchResultText weight="normal" size="er">
|
---|
[0df6b9e] | 93 | {professor.faculty.facultyName}
|
---|
[3e98cea] | 94 | </SearchResultText>
|
---|
| 95 | </SearchResultLink>
|
---|
| 96 | </SearchResult>
|
---|
[0df6b9e] | 97 | ))}
|
---|
[3e98cea] | 98 | </SearchDropdown>
|
---|
[080a3f3] | 99 | </div>
|
---|
| 100 | );
|
---|
| 101 | }
|
---|
| 102 |
|
---|
| 103 | export default Search;
|
---|