Changeset d654c74 for reactapp/src

Timestamp:

08/06/22 14:09:43 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

3e98cea

Parents:

74b8c52 (diff), 0df6b9e (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Merge branch 'main' of ​https://github.com/neeznamm/profesori.mk

Location:

reactapp/src

Files:

• App.js (modified) (2 diffs)
• Components/Main.style.js (modified) (1 diff)
• Components/ProfessorCard.style.js (modified) (1 diff)
• Components/Search.js (modified) (1 diff)
• Components/Search.style.js (added)
• Pages/Professor.js (modified) (2 diffs)
• Util/transliterate.js (added)
• searchicon.png (added)

reactapp/src/App.js

@@ -1 +1 @@
 import { Outlet } from "react-router-dom";
 import { MainWrapper, MainTitle } from "./Components/Main.style";
+import Search from "./Components/Search.js";
 
 export default function App() {
@@ -15 +16 @@
         }
       </style>
-      <MainTitle>profesori.mk</MainTitle>
+      <MainTitle>profesori.mk</MainTitle> <Search />
       <Outlet />
     </MainWrapper>

reactapp/src/Components/Main.style.js

@@ -17 +17 @@
   text-decoration: underline 3px;
   margin-bottom: 30px;
+  width: fit-content;
+  float: left;
 `;

reactapp/src/Components/ProfessorCard.style.js

@@ -6 +6 @@
   padding: 10px;
   margin-bottom: 30px;
+  margin-top: 140px;
 `;
 

reactapp/src/Components/Search.js

@@ +1 @@
+import React, { useEffect, useState } from "react";
+import JSOG from "jsog";
+import { transliterate } from "../Util/transliterate";
+import {
+  SearchDropdownResultSmall,
+  SearchDropdownTextSmall,
+  SearchDropdownSmall,
+  SearchDropdownResultLinkSmall,
+  SearchSmall,
+} from "./Search.style";
+function Search() {
+  const [query, setQuery] = useState("");
+  const [professors, setProfessors] = useState([]);
+
+  useEffect(() => {
+    const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
+      query
+    )}`;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url);
+        var cyclicGraph = await response.json();
+        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setProfessors(cyclicGraph);
+        //setLoaded(true);
+      } catch (error) {
+        console.log("Error", error);
+      }
+    };
+
+    if (query.length > 2) fetchData();
+  }, [query]);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "fit-content",
+        float: "right",
+      }}
+    >
+      <SearchSmall
+        placeholder="Пребарувај..."
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <SearchDropdownSmall
+        display={query.length > 2 && professors.length > 0 ? "block" : "none"}
+      >
+        {query.length > 2 &&
+          professors.slice(0, 7).map((professor) => (
+            <SearchDropdownResultSmall key={professor.professorId}>
+              <SearchDropdownResultLinkSmall
+                href={"/professor/" + professor.professorId}
+              >
+                <SearchDropdownTextSmall weight="bold" size="medium">
+                  {professor.professorName}
+                </SearchDropdownTextSmall>
+                <SearchDropdownTextSmall weight="normal" size="smaller">
+                  {professor.faculty.facultyName}
+                </SearchDropdownTextSmall>
+              </SearchDropdownResultLinkSmall>
+            </SearchDropdownResultSmall>
+          ))}
+      </SearchDropdownSmall>
+    </div>
+  );
+}
+
+export default Search;

reactapp/src/Pages/Professor.js

@@ -3 +3 @@
 import JSOG from "jsog";
 import OpinionTree from "../Components/OpinionTree";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  solid,
-  regular,
-  brands,
-} from "@fortawesome/fontawesome-svg-core/import.macro";
 
 import {
@@ -70 +64 @@
     return (
       <div>
-        <p>loading</p>
+        <p style={{ marginTop: "140px" }}>се вчитува...</p>
         <Outlet />
       </div>