Changeset 080a3f3

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

Files:

• package-lock.json (modified) (3 diffs)
• package.json (modified) (1 diff)
• src/App.js (modified) (2 diffs)
• src/Components/Search.js (modified) (1 diff)
• src/Components/Search.style.js (added)
• src/Util/transliterate.js (added)

reactapp/package-lock.json

@@ -24 +24 @@
         "react-scripts": "5.0.1",
         "styled-components": "^5.3.5",
+        "transliteration": "^2.3.5",
         "web-vitals": "^2.1.4"
       }
@@ -15705 +15706 @@
       }
     },
+    "node_modules/transliteration": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/transliteration/-/transliteration-2.3.5.tgz",
+      "integrity": "sha512-HAGI4Lq4Q9dZ3Utu2phaWgtm3vB6PkLUFqWAScg/UW+1eZ/Tg6Exo4oC0/3VUol/w4BlefLhUUSVBr/9/ZGQOw==",
+      "dependencies": {
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "slugify": "dist/bin/slugify",
+        "transliterate": "dist/bin/transliterate"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/transliteration/node_modules/yargs": {
+      "version": "17.5.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
+      "integrity": "sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==",
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/transliteration/node_modules/yargs-parser": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz",
+      "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
@@ -28021 +28062 @@
       }
     },
+    "transliteration": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/transliteration/-/transliteration-2.3.5.tgz",
+      "integrity": "sha512-HAGI4Lq4Q9dZ3Utu2phaWgtm3vB6PkLUFqWAScg/UW+1eZ/Tg6Exo4oC0/3VUol/w4BlefLhUUSVBr/9/ZGQOw==",
+      "requires": {
+        "yargs": "^17.5.1"
+      },
+      "dependencies": {
+        "yargs": {
+          "version": "17.5.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
+          "integrity": "sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==",
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.3",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^21.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.0.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz",
+          "integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg=="
+        }
+      }
+    },
     "tryer": {
       "version": "1.0.1",

reactapp/package.json

@@ -19 +19 @@
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
+    "transliteration": "^2.3.5",
     "web-vitals": "^2.1.4"
   },

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() {
@@ -16 +17 @@
       </style>
       <MainTitle>profesori.mk</MainTitle>
+      <Search />
       <Outlet />
     </MainWrapper>

reactapp/src/Components/Search.js

@@ +1 @@
+import React, { useEffect, useState } from "react";
+import JSOG from "jsog";
+import { transliterate } from "../Util/transliterate";
+import {
+  SearchDropdownContentSmall,
+  SearchDropdownSmall,
+} 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" }}>
+      <input
+        placeholder="Пребарувај..."
+        onChange={(e) => setQuery(e.target.value)}
+      />
+
+      {query.length > 2 &&
+        professors.slice(0, 10).map((professor) => (
+          <SearchDropdownSmall>
+            <div key={professor.professorId}>
+              <SearchDropdownContentSmall weight="bold" size="medium">
+                {professor.professorName}
+              </SearchDropdownContentSmall>
+              <SearchDropdownContentSmall weight="normal" size="smaller">
+                {professor.faculty.facultyName}
+              </SearchDropdownContentSmall>
+            </div>
+          </SearchDropdownSmall>
+        ))}
+    </div>
+  );
+}
+
+export default Search;