Changeset 080a3f3 for reactapp/src


Ignore:
Timestamp:
07/31/22 22:16:22 (2 years ago)
Author:
Viktor <mlviktor23@…>
Branches:
main
Children:
0df6b9e
Parents:
a4b5062
Message:

styled search component

Location:
reactapp/src
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • reactapp/src/App.js

    ra4b5062 r080a3f3  
    11import { Outlet } from "react-router-dom";
    22import { MainWrapper, MainTitle } from "./Components/Main.style";
     3import Search from "./Components/Search.js";
    34
    45export default function App() {
     
    1617      </style>
    1718      <MainTitle>profesori.mk</MainTitle>
     19      <Search />
    1820      <Outlet />
    1921    </MainWrapper>
  • reactapp/src/Components/Search.js

    ra4b5062 r080a3f3  
     1import React, { useEffect, useState } from "react";
     2import JSOG from "jsog";
     3import { transliterate } from "../Util/transliterate";
     4import {
     5  SearchDropdownContentSmall,
     6  SearchDropdownSmall,
     7} from "./Search.style";
     8function 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
     57export default Search;
Note: See TracChangeset for help on using the changeset viewer.