[080a3f3] | 1 | import React, { useEffect, useState } from "react";
|
---|
| 2 | import JSOG from "jsog";
|
---|
| 3 | import { transliterate } from "../Util/transliterate";
|
---|
| 4 | import {
|
---|
| 5 | SearchDropdownContentSmall,
|
---|
| 6 | SearchDropdownSmall,
|
---|
| 7 | } from "./Search.style";
|
---|
| 8 | function Search() {
|
---|
| 9 | const [query, setQuery] = useState("");
|
---|
| 10 | const [professors, setProfessors] = useState([]);
|
---|
| 11 |
|
---|
| 12 | useEffect(() => {
|
---|
| 13 | const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
|
---|
| 14 | query
|
---|
| 15 | )}`;
|
---|
| 16 |
|
---|
| 17 | const fetchData = async () => {
|
---|
| 18 | try {
|
---|
| 19 | const response = await fetch(url);
|
---|
| 20 | var cyclicGraph = await response.json();
|
---|
| 21 | var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
|
---|
| 22 | cyclicGraph = JSOG.decode(jsogStructure);
|
---|
| 23 | setProfessors(cyclicGraph);
|
---|
| 24 | //setLoaded(true);
|
---|
| 25 | } catch (error) {
|
---|
| 26 | console.log("Error", error);
|
---|
| 27 | }
|
---|
| 28 | };
|
---|
| 29 |
|
---|
| 30 | if (query.length > 2) fetchData();
|
---|
| 31 | }, [query]);
|
---|
| 32 |
|
---|
| 33 | return (
|
---|
| 34 | <div style={{ position: "relative" }}>
|
---|
| 35 | <input
|
---|
| 36 | placeholder="Пребарувај..."
|
---|
| 37 | onChange={(e) => setQuery(e.target.value)}
|
---|
| 38 | />
|
---|
| 39 |
|
---|
| 40 | {query.length > 2 &&
|
---|
| 41 | professors.slice(0, 10).map((professor) => (
|
---|
| 42 | <SearchDropdownSmall>
|
---|
| 43 | <div key={professor.professorId}>
|
---|
| 44 | <SearchDropdownContentSmall weight="bold" size="medium">
|
---|
| 45 | {professor.professorName}
|
---|
| 46 | </SearchDropdownContentSmall>
|
---|
| 47 | <SearchDropdownContentSmall weight="normal" size="smaller">
|
---|
| 48 | {professor.faculty.facultyName}
|
---|
| 49 | </SearchDropdownContentSmall>
|
---|
| 50 | </div>
|
---|
| 51 | </SearchDropdownSmall>
|
---|
| 52 | ))}
|
---|
| 53 | </div>
|
---|
| 54 | );
|
---|
| 55 | }
|
---|
| 56 |
|
---|
| 57 | export default Search;
|
---|