- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
reactapp/src/Components/Search.js
r0df6b9e r0ae838b 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 query18 )}`;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 cycles25 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 <div38 style={{39 position: "relative",40 width: "fit-content",41 float: "right",42 }}43 >44 <SearchSmall45 placeholder="Пребарувај..."46 onChange={(e) => setQuery(e.target.value)}47 />48 <SearchDropdownSmall49 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 <SearchDropdownResultLinkSmall55 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;
Note:
See TracChangeset
for help on using the changeset viewer.