dropdown

src/App.tsx

@@ -12,16 +12,13 @@ import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
 
 function App() {
 	const [isOpenTransfer, setOpenTransfer] = useState(false);
-	const [text, setText] = useState("");
+
 
 	return (
 		<div className="App">
 			<BusinessLogicContext.Consumer>
 				{(context) => (
 					<TopBar
-						textChangeHandler={(e) => {
-							setText(e.target.value);
-						}}
 						handleTransfer={(e) => {
 							setOpenTransfer(!isOpenTransfer);
 						}}
@@ -54,8 +51,6 @@ function App() {
 					/>
 				</div>
 			</div>
-
-			<h1>{text}</h1>
 		</div>
 	);
 }

src/components/TopBar/Results/index.scss

@@ -0,0 +1,21 @@
+.lecture {
+  position: relative;
+  z-index: 10;
+  padding: 5px;
+  background-color: #e6c759;
+  font-size: 18px;
+}
+.lecture:hover{
+  background-color: #d4b851;
+  cursor: pointer;
+}
+.dropdown::-webkit-scrollbar {
+  display: none;
+}
+.dropdown {
+  max-height: 400px;
+  overflow-y: auto;
+}
+.top-bar__input-field {
+  width: 100%;
+}

src/components/TopBar/Results/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { Input } from "@material-ui/core";
+import "./index.scss";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+
+interface data {
+  id: number;
+  name: string;
+  sym: string;
+}
+
+export const Results: React.FC = () => {
+  const [input, setInput] = useState<string>("");
+  const [data, setData] = useState<Array<data>>([]);
+  const [open, setOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInput(event.target.value);
+    //query should be updated on backend to not accept empty string
+    if (event.target.value !== "") {
+      console.log(event.target.value);
+      search(event.target.value);
+    } else {
+      search("xxxxxxxxxxxxxxx");
+    }
+  };
+  const search = (text: string) => {
+    axios
+      .get(`http://localhost:1287/getCourses?name=${text}`)
+      .then((response) => setData(response.data));
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClickAway}>
+      <div>
+        <Input
+          placeholder="Wyszukaj..."
+          inputProps={{ "aria-label": "description" }}
+          className="top-bar__input-field"
+          onChange={handleChange}
+          onClick={handleClick}
+        />
+        {open ? (
+          <div className="dropdown">
+            {data.map((lecture, index) => (
+              <div className="lecture" key={index}>
+                <p>{lecture.name}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </ClickAwayListener>
+  );
+};

src/components/TopBar/index.scss

@@ -24,12 +24,12 @@
     &-div {
       width: 70%;
       display: flex;
-      align-items: center;
       flex-grow: 3;
     }
 
     &-field {
       width: 96%;
+      margin-top: 10px;
     }
 
     &-icon {

src/components/TopBar/index.tsx

@@ -1,6 +1,5 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import "./index.scss";
-import Input from "@material-ui/core/Input";
 import Transfer from "./transfer.png";
 import Search from "./search.svg";
 import UK from "./UK.png";
@@ -8,14 +7,12 @@ import PL from "./PL.png";
 import User from "./user.png";
 import CloseIcon from "./close.svg";
 import { Profile } from "./Profile";
+import {Results} from "./Results";
 
 interface TopBarProps {
 	handleTransfer: (e: React.MouseEvent) => void;
 	onLangChange: (lang: boolean) => void;
 	handleLogout: () => void;
-	textChangeHandler: (
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-	) => void;
 }
 
 interface TopBarState {
@@ -36,10 +33,6 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		};
 	}
 
-	handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-		this.props.textChangeHandler(e);
-	}
-
 	handleTransfer(e: React.MouseEvent) {
 		this.props.handleTransfer(e);
 	}
@@ -80,12 +73,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 						alt="search"
 						src={Search}
 					/>
-					<Input
-						placeholder="Wyszukaj..."
-						inputProps={{ "aria-label": "description" }}
-						className="top-bar__input-field"
-						onChange={(e) => this.handleChange(e)}
-					/>
+					<div className="top-bar__input-field"><Results/></div>
 					<img
 						className="top-bar__input-icon"
 						alt="close"