source: reactapp/src/Components/Search.js@ 8d83180

main
Last change on this file since 8d83180 was 62b653f, checked in by unknown <mlviktor23@…>, 2 years ago

implemented upvote/downvote func. in react

  • Property mode set to 100644
File size: 2.6 KB
Line 
1import React, { useEffect, useState } from "react";
2import JSOG from "jsog";
3import { transliterate } from "../Util/transliterate";
4import {
5 SearchResult,
6 SearchResultText,
7 SearchDropdown,
8 SearchResultLink,
9 SearchBox,
10} from "./Styled/Search.style";
11import { useNavigate } from "react-router";
12function Search() {
13 const [query, setQuery] = useState("");
14 const [professors, setProfessors] = useState([]);
15
16 useEffect(() => {
17 const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
18 query
19 )}`;
20
21 const fetchData = async () => {
22 try {
23 const response = await fetch(url);
24 var cyclicGraph = await response.json();
25 var jsogStructure = JSOG.encode(cyclicGraph);
26 cyclicGraph = JSOG.decode(jsogStructure);
27 setProfessors(cyclicGraph);
28 } catch (error) {
29 console.log("Fetching error", error);
30 }
31 };
32
33 if (query.length > 2) fetchData();
34 }, [query]);
35
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
55 return (
56 <div
57 style={{
58 position: "relative",
59 width: "fit-content",
60 float: "right",
61 }}
62 >
63 <SearchBox
64 placeholder="Пребарувај..."
65 onChange={(e) => setQuery(e.target.value)}
66 onKeyDown={handleKeyDown}
67 tabIndex={0}
68 onFocus={expand}
69 onBlur={close}
70 />
71 <SearchDropdown
72 display={
73 query.length > 2 && professors.length > 0 && expanded
74 ? "block"
75 : "none"
76 }
77 >
78 {query.length > 2 &&
79 professors.slice(0, 7).map((professor) => (
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">
90 {professor.professorName}
91 </SearchResultText>
92 <SearchResultText weight="normal" size="er">
93 {professor.faculty.facultyName}
94 </SearchResultText>
95 </SearchResultLink>
96 </SearchResult>
97 ))}
98 </SearchDropdown>
99 </div>
100 );
101}
102
103export default Search;
Note: See TracBrowser for help on using the repository browser.