1 | import React, { useEffect, useState } from "react";
|
---|
2 | import JSOG from "jsog";
|
---|
3 | import { transliterate } from "../Util/transliterate";
|
---|
4 | import {
|
---|
5 | SearchDropdownResultSmall,
|
---|
6 | SearchDropdownTextSmall,
|
---|
7 | SearchDropdownSmall,
|
---|
8 | SearchDropdownResultLinkSmall,
|
---|
9 | SearchSmall,
|
---|
10 | } from "./Search.style";
|
---|
11 | function Search() {
|
---|
12 | const [query, setQuery] = useState("");
|
---|
13 | const [professors, setProfessors] = useState([]);
|
---|
14 |
|
---|
15 | useEffect(() => {
|
---|
16 | const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
|
---|
17 | query
|
---|
18 | )}`;
|
---|
19 |
|
---|
20 | const fetchData = async () => {
|
---|
21 | try {
|
---|
22 | const response = await fetch(url);
|
---|
23 | var cyclicGraph = await response.json();
|
---|
24 | var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
|
---|
25 | cyclicGraph = JSOG.decode(jsogStructure);
|
---|
26 | setProfessors(cyclicGraph);
|
---|
27 | //setLoaded(true);
|
---|
28 | } catch (error) {
|
---|
29 | console.log("Error", error);
|
---|
30 | }
|
---|
31 | };
|
---|
32 |
|
---|
33 | if (query.length > 2) fetchData();
|
---|
34 | }, [query]);
|
---|
35 |
|
---|
36 | return (
|
---|
37 | <div
|
---|
38 | style={{
|
---|
39 | position: "relative",
|
---|
40 | width: "fit-content",
|
---|
41 | float: "right",
|
---|
42 | }}
|
---|
43 | >
|
---|
44 | <SearchSmall
|
---|
45 | placeholder="Пребарувај..."
|
---|
46 | onChange={(e) => setQuery(e.target.value)}
|
---|
47 | />
|
---|
48 | <SearchDropdownSmall
|
---|
49 | display={query.length > 2 && professors.length > 0 ? "block" : "none"}
|
---|
50 | >
|
---|
51 | {query.length > 2 &&
|
---|
52 | 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">
|
---|
58 | {professor.professorName}
|
---|
59 | </SearchDropdownTextSmall>
|
---|
60 | <SearchDropdownTextSmall weight="normal" size="smaller">
|
---|
61 | {professor.faculty.facultyName}
|
---|
62 | </SearchDropdownTextSmall>
|
---|
63 | </SearchDropdownResultLinkSmall>
|
---|
64 | </SearchDropdownResultSmall>
|
---|
65 | ))}
|
---|
66 | </SearchDropdownSmall>
|
---|
67 | </div>
|
---|
68 | );
|
---|
69 | }
|
---|
70 |
|
---|
71 | export default Search;
|
---|