[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([]);
|
---|
[9bf1f8d] | 15 | const [subjects, setSubjects] = useState([]);
|
---|
[080a3f3] | 16 |
|
---|
| 17 | useEffect(() => {
|
---|
| 18 | const fetchData = async () => {
|
---|
| 19 | try {
|
---|
[8dffe02] | 20 | Promise.all([fetch(`http://192.168.1.108:8080/public/professors/nameContains/${transliterate(query)}`),
|
---|
| 21 | fetch(`http://192.168.1.108:8080/public/subjects/nameContains/${transliterate(query)}`)])
|
---|
[9bf1f8d] | 22 | .then(([resProfessors, resSubjects]) => Promise.all([resProfessors.json(), resSubjects.json()]))
|
---|
| 23 | .then(([dataProfessors, dataSubjects]) => {
|
---|
| 24 | let cyclicGraph1 = dataProfessors;
|
---|
| 25 | let jsogStructure1 = JSOG.encode(cyclicGraph1);
|
---|
| 26 | cyclicGraph1 = JSOG.decode(jsogStructure1);
|
---|
| 27 | setProfessors(cyclicGraph1);
|
---|
| 28 |
|
---|
| 29 | let cyclicGraph2 = dataSubjects;
|
---|
| 30 | let jsogStructure2 = JSOG.encode(cyclicGraph2);
|
---|
| 31 | cyclicGraph2 = JSOG.decode(jsogStructure2);
|
---|
| 32 | setSubjects(cyclicGraph2);
|
---|
| 33 | })
|
---|
[080a3f3] | 34 | } catch (error) {
|
---|
[702ca77] | 35 | console.log("Fetching error", error);
|
---|
[080a3f3] | 36 | }
|
---|
| 37 | };
|
---|
| 38 |
|
---|
[9bf1f8d] | 39 | if (query.length > 3) fetchData();
|
---|
[080a3f3] | 40 | }, [query]);
|
---|
| 41 |
|
---|
[3e98cea] | 42 | const navigate = useNavigate();
|
---|
| 43 |
|
---|
| 44 | const handleKeyDown = (event) => {
|
---|
| 45 | if (event.key === "Enter") {
|
---|
| 46 | setExpanded(false);
|
---|
[9bf1f8d] | 47 | navigate("/search", { state: professors.concat(subjects) });
|
---|
[3e98cea] | 48 | }
|
---|
| 49 | };
|
---|
| 50 |
|
---|
| 51 | const [expanded, setExpanded] = useState(false);
|
---|
| 52 |
|
---|
| 53 | function expand() {
|
---|
| 54 | setExpanded(true);
|
---|
| 55 | }
|
---|
| 56 |
|
---|
| 57 | function close() {
|
---|
| 58 | setExpanded(false);
|
---|
| 59 | }
|
---|
| 60 |
|
---|
[080a3f3] | 61 | return (
|
---|
[0df6b9e] | 62 | <div
|
---|
| 63 | style={{
|
---|
| 64 | position: "relative",
|
---|
| 65 | width: "fit-content",
|
---|
| 66 | float: "right",
|
---|
| 67 | }}
|
---|
| 68 | >
|
---|
[3e98cea] | 69 | <SearchBox
|
---|
[080a3f3] | 70 | placeholder="Пребарувај..."
|
---|
| 71 | onChange={(e) => setQuery(e.target.value)}
|
---|
[3e98cea] | 72 | onKeyDown={handleKeyDown}
|
---|
| 73 | tabIndex={0}
|
---|
| 74 | onFocus={expand}
|
---|
| 75 | onBlur={close}
|
---|
[080a3f3] | 76 | />
|
---|
[3e98cea] | 77 | <SearchDropdown
|
---|
| 78 | display={
|
---|
[9bf1f8d] | 79 | query.length > 3 && (professors.length > 0 || subjects.length > 0) && expanded
|
---|
[3e98cea] | 80 | ? "block"
|
---|
| 81 | : "none"
|
---|
| 82 | }
|
---|
[0df6b9e] | 83 | >
|
---|
[9bf1f8d] | 84 | {query.length > 3 &&
|
---|
| 85 | professors.concat(subjects).slice(0, 7).map((match) => (
|
---|
[3e98cea] | 86 | <SearchResult
|
---|
[9bf1f8d] | 87 | key={match.professorId !== undefined ? match.professorId : match.subjectId}
|
---|
[3e98cea] | 88 | onMouseDown={(event) => {
|
---|
| 89 | event.preventDefault();
|
---|
| 90 | event.stopPropagation();
|
---|
| 91 | }}
|
---|
| 92 | margin="0"
|
---|
| 93 | >
|
---|
[9bf1f8d] | 94 | <SearchResultLink href={`/${match.professorId !== undefined ? 'professor': 'subject'}/` + `${match.professorId !== undefined ? match.professorId : match.subjectId}`}>
|
---|
[3e98cea] | 95 | <SearchResultText weight="bold" size="medium">
|
---|
[9bf1f8d] | 96 | {match.professorId !== undefined ? match.professorName : match.subjectName}
|
---|
[3e98cea] | 97 | </SearchResultText>
|
---|
| 98 | <SearchResultText weight="normal" size="er">
|
---|
[9bf1f8d] | 99 | {match.professorId !== undefined ? match.faculty.facultyName : match.studyProgramme.faculty.facultyName}
|
---|
[3e98cea] | 100 | </SearchResultText>
|
---|
| 101 | </SearchResultLink>
|
---|
| 102 | </SearchResult>
|
---|
[0df6b9e] | 103 | ))}
|
---|
[3e98cea] | 104 | </SearchDropdown>
|
---|
[080a3f3] | 105 | </div>
|
---|
| 106 | );
|
---|
| 107 | }
|
---|
| 108 |
|
---|
| 109 | export default Search;
|
---|